How To Display Recent Twitter Tweets Using JQuery

Posted by Lasantha Bandara on August 11th, 2010 File Under : twitter, widget3 Comments

Do you want to show your recent tweets inside your website or blogger blog?Then,this tutorial will helpful for you, to add recent tweets into your website using Jquery.Your recent tweets will load fast using jquery and also you can change number of tweets must display very easily.If you want you can read advanced details about tutorial from 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.

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 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'), 'btipandtrick', 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 :
btipandtrick : Replace this with your twitter username.

5 : Number of tweets must appear.

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

You are done.

File Under : twitter, widget

3 Responses to “How To Display Recent Twitter Tweets Using JQuery”

  1. Beben says:

    nice my friend...
    its similar like...
    "http://www.thewebsqueeze.com/web-design-tutorials/displaying-your-tweets-on-your-website-with-jquery.html"
    ^^

  2. PaauLo ♫ says:

    thanks =D

  3. MacintoshBrasil says:

    i get error...

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "callback" must end with the ';' delimiter.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.