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")


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.