How to Display Most Recent Twitter Tweets Using JQuery

Tweet

 

Are you looking for an easy way to display your recent Twitter tweets inside your website or Blogger blog? Then ypu’ve come to the right place. In this short post I am going to show you how you can add recent tweets to your website with the use of JQuery. One of the advantages of this method is that your recent tweets will load fast. Another plus is that it is very easy change the number of tweets that will be displayed on your blog or website. Advanced details about this method can be found at: http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

How to display most recent Twitter tweets using JQuery

Please follow these steps to add this recent tweets widget to your Blogger blog.

1. Sign in to Blogger, then go to Dashboard --> Design --> Edit HTML.

2. Search for (Ctrl + F) the </head> tag.

3. Copy the following code and paste it just before the </head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function showTweets(elem, username, number)
{
var html = '<ul>';
var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{
$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";
elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}
$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'ebloggertricks', 5)
});
</script>
<style type="text/css">
#preload {display: none;}
#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('http://4.bp.blogspot.com/_HJvXUqHmf9Y/TGISCT-W4yI/AAAAAAAAABI/VdnChTmVqUs/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

NOTE: Replace ebloggertricks with your twitter username.

5: Number of tweets must appear.

4. Save your template.

5. Now go to Layout --> Page Elements.

6. Click on 'Add a Gadget'.

7. Select 'HTML/Javascript' and add the following code:

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/ebloggertricks">Follow me on twitter</a></li></ul>
</div>

8. Save.

That’s all!

Good luck!