skip to main | skip to sidebar

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.

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.

1 comments

  1. Unknown // February 6, 2013 at 2:49:00 AM GMT+11  

    Yeaaah i like it !!

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
More Tech Tips! | Technology tips on web development

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