Twitter Trackbacks Widget v1.1

A new version of Twitter trackbacks jQuery plugin which integrates tweets that mention your post into your blog. This version handles the new API key requirement by Topsy.

Demo

Setup

<link type="text/css" href="http://twitter-trackbacks-widget.googlecode.com/svn/v1.1/default.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.twitterTrackbacks.defaults.apikey = 'API KEY..';
//]]>
</script>

<div class="twitter-trackbacks" options="{url:'http://www.moretechtips.net/' }">loading..</div>

1. Include Default CSS file.
2. Include jQuery library.
If it is already added to the page, then you don't need to do it again!
Plugin was tested with jQuery versions 1.3.2 to 1.9.0

3. Include this jQuery plugin.

4. Use your API key
You should get your own key from http://manage.topsy.com/app/create.
Just set your API key right after including the JavaScript files as in the above code.

5. Insert placeholder div
In your page where the widget should appear. Note that, you need to set the class name of div tag as "twitter-trackbacks" to have the widget loaded automatically.
Set widget options as a list of comma-delimited values and surrounded by braces.

Alternative Setup

Load widget by a jQuery plugin call and pass options array as the first parameter.
<link type="text/css" href="http://twitter-trackbacks-widget.googlecode.com/svn/v1.1/default.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-trackbacks-widget.googlecode.com/files/jquery.twittertrackbacks-1.1.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
   $('#trackbacks1').twitterTrackbacks({
      apikey: 'API key..'
      ,url: 'http://www.moretechtips.net/'
   });
})
//]]>
</script>

<div id="trackbacks1">loading..</div>

New Features:

1. New default style to comply with Twitter Display Requirements. Still, you can create custom styles starting from that CSS file.

2. Updated retweet/reply/favorite links to use Twitter Web Intents.

Project | Plugin Options | Download plugin | Demo