skip to main | skip to sidebar

Twitter Trackbacks Widget - A jQuery Plugin
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!


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.


40 comments

  1. Lam Nguyen // November 26, 2009 at 11:01:00 AM GMT+11  

    This plugin got a lot of positive feedback, huh?

  2. Mike // November 26, 2009 at 11:08:00 AM GMT+11  

    yes @Lam,
    Good Twitter feedback :)

  3. Web Design // November 29, 2009 at 10:15:00 PM GMT+11  

    Nice stuff. Will definitely give it a go

  4. usuariocompulsivo // December 1, 2009 at 6:34:00 AM GMT+11  

    Is there a way to put some conditional H4 title on top of this DIV? I want to put a title like this:

    [Some Image] Twitter Trackbacks:

    And here comes the trackbacks.

    But i cant find a way to hide this tittle, when theres no twitter trackbacks...

  5. Mike // December 1, 2009 at 7:05:00 AM GMT+11  

    @usuariocompulsivo,
    No Tweets at all, Not even 1 tweet by you?!
    yet, your request sounds reasonable enough, I'll keep in mind for next version (~1week).. stay tuned

  6. usuariocompulsivo // December 1, 2009 at 8:42:00 AM GMT+11  

    Thanks, you can see what i mean.

    Here i have a lots of trackbacks:
    http://usuariocompulsivo.blogspot.com/2009/11/como-baixar-mp3-dos-videos-do-youtube.html

    Here, on an old post, i have none, but can't figure how to hide the "Twitter Trackbacks" title:
    http://usuariocompulsivo.blogspot.com/2007/01/o-iphone-e-morte-da-microsoft.html

    Thanks again man!

    []'s
    Compulsivo

  7. nintendo dsi r4 // December 4, 2009 at 9:11:00 PM GMT+11  

    Its great to track your comment links. "Each tweet comes with reply & retweet links to get more readers engaged in your story conversation." Just another way of marketing through your comments.

  8. usuariocompulsivo // December 8, 2009 at 6:02:00 AM GMT+11  

    Here just to see if theres an update ;-)

    []'s
    Compulsivo

  9. Mike // December 8, 2009 at 8:50:00 AM GMT+11  

    @usuariocompulsivo,
    Check new option 'header' on plugin options :)

  10. Frederico // December 15, 2009 at 7:43:00 AM GMT+11  

    Can it work with hashtags? EG: A fan page that grabs all the queries and place them in a recent list..

  11. Mike // December 15, 2009 at 7:56:00 AM GMT+11  

    @Frederico,
    And return tweets that are related to keywords not to links? like this Realtime Related Tweets Bar

  12. Frederico // January 2, 2010 at 1:55:00 PM GMT+11  

    Like lets say your business is Blogger. So list any tweet that has #blogger in it.

  13. Mike // January 2, 2010 at 2:30:00 PM GMT+11  

    @Frederico,
    I got it :) Check this plugin out Realtime Related Tweets Bar

  14. wordpress hacks // January 19, 2010 at 6:16:00 PM GMT+11  

    Nice info there.! I will incude it on my website soon.!

  15. Nuno Manuel Costa // February 5, 2010 at 10:13:00 PM GMT+11  

    Hello,

    I've a problem with this script! It stop working and i don't know why.
    http://blog.nunocosta.eu/2010/02/efeito-matrix-por-ilya-larionov.html

    Can you help me?

  16. Mike // February 6, 2010 at 1:57:00 AM GMT+11  

    @Nuno,
    Do u still have a problem? cause I see it working..

  17. Adam // February 7, 2010 at 2:32:00 AM GMT+11  

    Hi Mike,

    I see you *sort of* have the project up on google code. You don't provide the unminified javascript for other developers to work with, though. Have you considered releasing that?

  18. Mike // February 7, 2010 at 2:45:00 AM GMT+11  

    @Adam,
    Oops.. that wasn't meant to be! uncompressed version is up now :)
    thanks for your feedback.

  19. Free Phone // February 14, 2010 at 3:22:00 AM GMT+11  

    i like this, i always using twitter to share my status and condition from web and direct, thx for post

  20. Beben // February 16, 2010 at 7:06:00 AM GMT+11  

    wow...its a great web...
    hohohoho last i found it

  21. Mike // February 16, 2010 at 2:31:00 PM GMT+11  

    @Beben,
    thanks :)

  22. Michael Pehl // March 5, 2010 at 1:39:00 AM GMT+11  

    hm, not working on my wp blog using latest jquery.

    firebug says:

    $("div.twitter-trackbacks").twitterTrackbacks is not a function

  23. Michael Pehl // March 5, 2010 at 1:49:00 AM GMT+11  

    found the error :-) working now

  24. vbulletin 4 styles // March 24, 2010 at 8:09:00 PM GMT+11  

    "found the error :-) working now "

    Could you post the solution please, i am having the same errors, would really love to have this up and running on my website.

    Thanks

  25. Anonymous // March 30, 2010 at 5:27:00 PM GMT+11  

    this is a coool widget

  26. Andrea Ferracani // June 18, 2010 at 3:57:00 AM GMT+10  

    thank you very match for this fantastic plugin!
    The twitter avatar seems not working, is it a temporary twitter problem or a plugin problem?

    thank you!

  27. Alecsy // July 30, 2010 at 6:04:00 PM GMT+10  

    hi,

    thank you for the good widget. i made a wordpress's widget for easing facility on my blogs. If you would can be use, you can download at the url :

    http://www.alecsy.fr/creer-son-site-internet/plugins-wordpress/twitter_trackbacks_bar

    or at wordpress.org

    http://wordpress.org/extend/plugins/twitter-trackbacks-bar/

    You can posted the comments on my siteweb

  28. hana // October 15, 2010 at 2:05:00 AM GMT+11  

    It's veri interest..

  29. Daisy // December 13, 2010 at 8:24:00 AM GMT+11  

    I'm on Blogger and was wondering where you should insert the code. Please help. Thanks.

  30. Mike // December 13, 2010 at 8:30:00 AM GMT+11  

    Hi @Daisy,
    You can insert code in HTML/Javascript gadget after "Blog posts".
    If you need further help, email me

  31. Igor Sousa // February 19, 2011 at 6:34:00 AM GMT+11  

    Hello Mike, first I would like to congratulate you for the great work! This plug-in is really very handy!

    Second, I would like to take a question: I looked at the source code of the three demostrations, and all of them, except the fixed list, I saw this code (highlighted in bold):

    <div class="twitter-trackbacks" options="{
    url:'http://www.moretechtips.net/2009/11/twitter-trackbacks-widget-jquery-plugin.html'

    }">loading..</div>

    But in the code you provided above, this code isn't present in the first demonstration, so, I wanted to know if is necessary to add this code in the first demonstration or not?

    And I wonder if can I publish this code on my blog for my readers, but in my native language. Do you allow me?

    Thanks in advance for your attention. (:

  32. Mike // February 20, 2011 at 2:58:00 AM GMT+11  

    @Igor,
    Thanks alot for the kind words :)

    url by default will be auto-grabbed from current page URL. to override this it can be set manually.

    Sure you can feature this plugin the way you like as long as you keep a linkback ;)

  33. Igor Sousa // February 20, 2011 at 9:50:00 AM GMT+11  

    Mike: thank you, surely I will linkback to you!

    But I am experiencing some problems with this plugin. In old articles (when I installed the plugin), it worked / works perfectly, as you can see in this article:

    http://bloggandonaweb.blogspot.com/2010/08/script-para-aumentardiminuir-o-tamanho.html

    But recently, it has presented some problems: it doesn't show the avatars used in the twitter profiles, doesn't find all tweets that refer to the article (sometimes it finds nothing) and doesn't show the 'reply' link.

    As you can see in this article, the twitter button shows that the article was shared two times, but there is no trackback being shown:

    http://bloggandonaweb.blogspot.com/2011/02/criando-e-salvando-um-gif-animado-no.html

    Sorry to bother you with these questions, I know you can not provide assistance to all the people, but I really loved this plugin, and would like to continue using it! Hope you can help me to solve this problem.

    I don't know if this is relevant, but my blog was created on the Blogger platform. I await a response. Thank you for your attention and patience.

  34. Mike // February 22, 2011 at 8:57:00 PM GMT+11  

    @Igor,
    All questions are welcome anytime :)

    Sometimes when tweet text is too big for the designated space, then last line will be invisible and you wouldn't see the reply link; you need to increase that space height.

    About missing tweets, that is due to the Topsy API tracks the most common URL shortners only.. And sometimes it takes little time to synchronize with Twitter. and the same issue applies to avatars.

  35. ARC™ // June 14, 2011 at 9:06:00 AM GMT+10  

    can it detect our url automatically? would a pain in the a$$ to change the url every time a new blogpost is up

  36. Mike // June 14, 2011 at 9:52:00 AM GMT+10  

    @ARC,
    You can leave the URL empty to use the container page URL, check the plugin options for more details!

  37. ARC™ // June 17, 2011 at 3:15:00 PM GMT+10  

    thanks for the awesome tutes man. btw, Ive rewritten this post in my language (not English+rephrasing) and have absolutely make a backlink to you.

    Cheers!

  38. Ripon // June 17, 2011 at 6:06:00 PM GMT+10  

    Mike
    ---------
    I am wondering your solution is much ahead than other solution like tweetback. They use hosted solution whereas your one works on client side which is really amazing.

    I would like to know one thing. Say, I have tweeted my page using bit.ly short url. So, from client side I don't know the shorten url. In this case how to use your solution.

    I would be grateful if you could provide a solution for that.

  39. Mike // June 17, 2011 at 10:04:00 PM GMT+10  

    @Arc,
    Thanks, I really appreciate it

  40. Mike // June 21, 2011 at 7:28:00 AM GMT+10  

    @Ripon,
    This plugin uses Topsy API which can handle many URL shorteners and all this plugin needs to know is the full URL of your page..

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS