Combining Your Trending Stories with Twitter Trackbacks!

This is a simple jQuery tutorial to display Twitter trending stories of your website and their Twitter trackbacks by combining 2 of my jQuery plugins - Popular on Twitter Widget & Twitter Trackbacks Widget.

Both plugins are based on Topsy awesome API which can return the most popular stories of your website on Twitter within the desired period of time. Popularity is calculated by the influence of people talking about those stories. Topsy also keeps a complete history of Twitter trackbacks of your stories which are simply the tweets that mention it.

<DEMO/>

1- Add A Placeholder Div
Create a HTML div tag with ID "popular".
<div id="popular">loading..</div>
Also add CSS code from demo page which is a combination of the 2 widgets CSS..

2- Include Javascript files of jQuery, Popular on Twitter Widget and Twitter Trackbacks Widget
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.1.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>

3- Call Popular-on-Twitter Widget when document ready
$(document).ready(function(){
   // call popular on Twitter widget on document ready
   $('#popular').popularOnTwitter({
      site: 'moretechtips.net'
      ,show_n: 0
      ,window: 'a'
      ,n: 5
      ,show_tweet: 0
      ,tweeter_text: '<\a href="#" class="get-trackbacks" title="Expand/Collapse tweets">+<\/a> by _d_'
      ,loaded: popularLoaded
   });
});

Called the popular-on-Twitter widget on placeholder div with few widget options:

• Set "site" to my blog domain.
• Set "window" to "a" to get popular links in all time - you can use "m" for last month, "w" for last week or "d" for last day.
• Set "show_n" to 0 to display links as fixed list without any transitions.
• Set "n" to 5 to limit number of links to 5.
• Added a + link button with class "get-trackbacks" inside the "tweeter_text" option. To get Twitter trackbacks when user clicks it.
• Set "loaded" to function pointer "popularLoaded" that will be called when popular links are loaded.

4- Finally, Few jQuery Magic
function popularLoaded(){
   var div = $('#popular');
   // for each link li
   $('li',div).each(function(){
      var li = $(this);
      // get url of the link
      var url = $('.pot-url a',li).attr('href');
      // bind click handler to the + link
      $('a.get-trackbacks',li).click(function(){
         var a = $(this);
         // trackbacks div
         var tb_div= $('div.trackbacks',li);
         
         // trackbacks div is there ?
         if(tb_div.size()==0) {
            // create trackbacks div for the first call
            tb_div= $('<\div class="trackbacks"><\/div>').appendTo(li);
            // call trackbacks widget
            tb_div.twitterTrackbacks({
               url:url
               ,n:5
               ,show_n:0
            });
            // change + link to -
            a.text('-')
         }else{
            // div was created
            if( tb_div.css('display')=='none') {
               // show if hidden
               tb_div.fadeIn(200);
               // change + link to -
               a.text('-');
            }else {
               // hide if shown
               tb_div.fadeOut(200);
               // change - link to +
               a.text('+');
            }
         }
         // return false to disable default behavior of link click
         return false;
      });
   });
}
This function will be called when popular links are loaded and appended to placeholder as unsorted list items..

• Traversing the unsorted list items.
• Get link's URL inside each list item.
• Define a click event handler for the + button that was just added in previous call to Popular-on-Twitter widget.
• Find trackbacks div inside current list item -identified by its class "trackbacks".
• If not found -jQuery object size is zero- then will append trackbacks div to current list item. Then call Twitter trackbacks widget with few options:
  • Set "url" to current link url.
  • set "n" to 5 to limit number of trackbacks.
  • set "show_n" to 0 to display trackbacks as a fixed list.
• Else, div was found -trackbacks widget was called before. Then fade it in if it wasn't shown and vice versa.

• Note that the + button text is set to "-" when trackbacks is shown and reset to "+" otherwise.

Each widget comes with many other options that were not used here in this simple demo. For more info refer to:
Popular on Twitter > options
Twitter Trackbacks > options

<DEMO/>

Tags: AJAX , hot , javascript , jQuery , jQuery Tutorial , Tech Tips , topsy , Tutorials , twitter , Web 2.0