How to Display Recent Twitter Tweets on Your Blogger Blog Using JQuery

Tweet

 

Would you like to show your most recent tweets inside your website or Blogger blog? Yes? Then you will find this tutorial helpful; it explains how to add recent tweets to your website or Blogger blog using JQuery.This method is ueseful because your recent tweets will load fast using JQuery, and you can change the number of tweets you want to display very easily. If you want or need you can read advanced details about this tutorial here:

http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html

Twitter is a social networking and microblogging service, owned and operated by Twitter Inc., that enables its users to send and read other user messages called tweets. Tweets are text-based posts of up to 140 characters displayed on the author's profile page.

The display will look like this:

Now follow the steps given below to add this recent tweets widget to your website or blog.

1. Login to your Blogger Dashboard --> Design - -> Edit HTML.

2. Scroll down till you find the </head> tag .

3. Copy below 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'), 'eblogtrick', 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 :
eblogtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

4. Save your template.

5. 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/eblogtrick">Follow me on twitter</a></li></ul>
</div>

That’s all!

Good luck!