How to Add Recent Twitter Tweets Using JQuery to Blogger ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

1.Login to your blogger dashboard--> Design - -> Edit HTML.

2.Scroll down to where you see </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'), 'blogger9_com', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dHrCb61OKGNuSz9AU4EsqUHFDK38-MwxnDs3vW7ZPv9fgVkx8ftnDuloTxsDR7SldFoB70n7A_hPNeia649c3B6wf9BK5rTPxemEGdgPnjLvrkyzwOpZmtmba0qhIIrXS7M7e5y5Hts/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

NOTE : Replace blogger9_com with your twitter username.

4.Now save your template.

5.Go to Layout --> Page Elements.

6.Click on 'Add a Gadget'.

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

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

Now save your are done.