Highly customizable Twitter trackbacks widget to integrate tweets that mention your post into your blog. Each tweet comes with reply & retweet links to get more readers engaged in your story conversation.


After Topsy has released a Wordpress plugin to turn your post tweets into comments. I wanted to use their awesome API to create this Javascript  widget that can be used for any blog especially for non-Wordpress ones.
Additionally, Topsy Wordpress plugin gives you a retweet button that I covered how to embed it using Javascript only.

Now Check out these DEMOS.. or See it in ACTION by the end of this post!

Demo 1 | Demo 2 | Demo 3

Each one links to the demo page where you can see HTML & CSS & JS you need to embed... CSS code is essential but I'm not going to focus on it here.

Demo 1: Trackbacks Bar ►
This is the default behavior of this plugin. A trackbacks bar!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>

<div class="twitter-trackbacks">loading..</div>
Use CSS as in demo page then include jQuery and plugin JS and add a div with a "twitter-trackbacks" class and it will be auto-loaded!
Link URL will be automatically grabbed from the page it is placed in.

Demo 2: Triple Trackbacks Bar ►
Few options were changed here, by placing a comma delimited array of arguments in 'options' attribute of the Div element..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>

<div class="twitter-trackbacks" options="{
   url:'http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html'
   ,n:9
   ,show_n:3
   ,stay_time:8000
   ,animate:'height'
   ,inf_only:1
   ,inf_tip:1
}">loading..</div>
'url' was manually set.
Limited the number of tweets to return 'n' to 9 only.
Increased number of tweets to show 'show_n' to 3.
Changed the time for a tweet to stay 'stay_time' to 8 seconds.
Animating tweet height instead of the default opacity animation.
Set 'inf_only' to 1 to return tweets from influential tweeters only.
Set 'inf_tip' to 1 to show tweeter 'influence level' as a tool tip.

Demo 3: Fixed List ►
This demo uses a typical JS call, to create simple list of twitter trackbacks without any transitions.. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('div.my-trackbacks').twitterTrackbacks({
      url:'http://www.moretechtips.net/2009/10/twitter-friends-followers-widget-jquery.html'
      ,n:8
      ,show_n:0
      ,inf_tip:1
   });
});
</script>

<div class="my-trackbacks">loading..</div>
One change here: 'show_n' was set to 0 to disable any transitions..
Plus few CSS changes to highlight influential users' tweets with darker backgrounds!

Widget Features:

1. Display Twitter responses/tweets that mention your link.
2. Display tweets as a bar with transition effects or as a fixed list.
3. Retweet and reply links for each tweet to encourage people to share your link.
4. Return tweets of highly influential users only.
5. Style tweets based on the influence level of their users.
6. Many transition options like opacity, height, font-size.
7. Each part of the tweet like Avatar, links, Hashtags.. has its own class for easy CSS customization.
8. Show or hide some parts of the tweet like avatar, author name, date, retweet/reply links.
9. Use a typical JS call or auto-load div elements that have "twitter-trackbacks" class.
10. Widget adds a small "i" letter that links to here. You can remove it by setting (info) option to empty string (''), but I'll appreciate it if you attribute/link-back to me elsewhere on your website.
    

Project | Plugin Options | Download plugin | Demo 1 | Demo 2 | Demo 3

Tags: hot , javascript , jQuery , jQuery Plugin , Social Bookmarking , topsy , twitter