Advanced Search

Combining Your Trending Stories with Twitter Trackbacks!

/ Published in: jQuery
Save to your folder(s)
Simple jQuery script 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.
[Read more](http://www.moretechtips.net/2010/10/combining-your-trending-stories-with.html "Read more")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.1.min.js"></script>
  3. <script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.0.min.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7.    // call popular on Twitter widget on document ready
  8.    $('#popular').popularOnTwitter({
  9.       site: 'moretechtips.net'
  10.       ,show_n: 0
  11.       ,window: 'a'
  12.       ,n: 5
  13.       ,show_tweet: 0
  14.       ,tweeter_text: '<\a href="#" class="get-trackbacks" title="Expand/Collapse tweets">+<\/a> by _d_'
  15.       ,loaded: popularLoaded
  16.    });
  17. });
  18.  
  19. function popularLoaded(){
  20.    var div = $('#popular');
  21.    // for each link li
  22.    $('li',div).each(function(){
  23.       var li = $(this);
  24.       // get url of the link
  25.       var url = $('.pot-url a',li).attr('href');
  26.       // bind click handler to the + link
  27.       $('a.get-trackbacks',li).click(function(){
  28.          var a = $(this);
  29.          // trackbacks div
  30.          var tb_div= $('div.trackbacks',li);
  31.  
  32.          // trackbacks div is there ?
  33.          if(tb_div.size()==0) {
  34.             // create trackbacks div for the first call
  35.             tb_div= $('<\div class="trackbacks"><\/div>').appendTo(li);
  36.             // call trackbacks widget
  37.             tb_div.twitterTrackbacks({
  38.                url:url
  39.                ,n:5
  40.                ,show_n:0
  41.             });
  42.             // change + link to -
  43.             a.text('-')
  44.          }else{
  45.             // div was created
  46.             if( tb_div.css('display')=='none') {
  47.                // show if hidden
  48.                tb_div.fadeIn(200);
  49.                // change + link to -
  50.                a.text('-');
  51.             }else {
  52.                // hide if shown
  53.                tb_div.fadeOut(200);
  54.                // change - link to +
  55.                a.text('+');
  56.             }
  57.          }
  58.          // return false to disable default behavior of link click
  59.          return false;
  60.       });
  61.    });
  62. }
  63. </script>

URL: http://www.moretechtips.net/2010/10/combining-your-trending-stories-with.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.