Currently the method being adopted by many web masters to display tweets on their web sites does not support retweets (RT). Recently there was an update to the twitter api which allows the parameter include_rts=true to be included within the url used to retrieve tweets but unfortunately this is not compatible with Blogger.js as it only effects their .rss and .atom feeds (and not the .json feed).

Recently we released a fix for this which involves taking your twitter data as an atom feed (which supports the include_rts=true parameter) and converting this to a JSON object using the google developers api. This means that we are then able to use the code in blogger.js to display the tweets (including retweets).

Ok, so here goes:

First for any of this to work you need to make sure that you are referencing the JQuery library. To do this you should insert a reference to the hosted JQuery script by adding the following into the %lt; head >%lt;/ head > section of your sites pages (or at least those that want to display the twitter feed) using the following script tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js?ver=3.0.1"></script>

Alternatively if you prefer you can download the script from http://code.jquery.com/jquery-latest.pack.js?ver=3.0.1 and host it yourself (a minimized version of this script also exists at jquery.com).

Next you need to download our javascript library from here and again include a reference to it in the %lt; head >%lt;/ head > section of your sites pages.

<script type="text/javascript" src="http://[Path To Your JS Files]/twitter-rss-wih-rt.js"></script>

Now you need to insert an empty <UL/> tag into the page where you want your feed to appear, and you will need to give this tag an id (for the purposes of this blog we will assume an id of “my_tweets”).

All that now remains is to insert some javascript that will execute once the page has loaded that will populate this element with your tweets. You can do this a number of ways but I prefer to use the page.ready functionality of JQuery. Below is a complete example of the startup script and <UL/> tag:

i.e.

<html>
   <head></head>
   <body>
      ...
      <ul id="my_tweets"></ul>
      ...
      <script type="text/javascript">
         $(document).ready(function() {
            GetTwitterFeedIncRT('maraboustorkltd', 7, 'my_tweets');
	 });
      </script>
   </body>
</html>

You can see from the above code that the GetTwitterFeedIncRT procedure is being called in the twitter-rss-with-rt.js file that we included earlier and is being passed three parameters. These are “maraboustorkltd” (our twitter username which you should replace with your own), 7 (which is the number of tweets we want to return and display, and “my_tweets” (which is the id given to the UL tag that will receive the tweets).

Using this method it is also possible to have multiple feeds being shown in multiple
<UL/> tags.

If you are a WordPress user you might like to know that we have packaged up this functionality into a free WordPress plugin. Details of this plugin can be found here

Tags: , , , , , , , , ,

Leave a Reply