Code Snippet > JS - jQuery

Get The Latest Twitter Tweet with jQuery

Quick and easy way to retrieve the lastest twitter tweet from any user. It uses twitter user timeline api to display the latest tweet. Also, it checks for URL and reply tags and convert them into URL links.

JS - jQuery

You just have to create a div or p with id twitter like below:

<p id="tweet"></p>

and it should work perfectly. :)

For those who wants more advance feature, visit two of my tutorials in queness


$(document).ready(function() {
 
    // set your twitter id
    var user = 'quenesswebblog';
     
    // using jquery built in get json method with twitter api, return only one result
    $.getJSON('http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=1&callback=?', function(data) 		{
         
        // result returned
        var tweet = data[0].text;
     
        // process links and reply
        tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) {
            return ''+url+'';
        }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
            return  reply.charAt(0)+''+reply.substring(1)+'';
        });
     
        // output the result
        $("#tweet").html(tweet);
    }); 
     
});

This code snippet was submitted by:

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.


AdvertisementEnsure your 100% success by using our incredible 70-652 dumps study packages. We are providing the best 199-01 and 1Y0-A18 training solutions for final exam preparations of 70-515. You can also get testking HP2-Z18 free if you download all the dumps.



Show Some Love, Spread This Post!

You might like these codes

8 comments

Richard Thu, 12th April 2012 @Eoin, try replacing '<a href=" with '<a target="_blank" href="
Reply
Jeric Thu, 16th February 2012 Thanks
Reply
Mike A. Thu, 9th February 2012 Line 15 has a typo: }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
Should be: }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
Reply
Eoin Fleming Thu, 23rd June 2011 Hey Guys,unfortunately this code did not work. Something about a syntax error. But....

I found this code that works :

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js" align="left"></script>
<script src="http://twitter.com/statuses/user_timeline/RitsGroup.json?callback=twitterCallback2&amp;count=6"></script>

That displays the tweets on my website,which all sounds great but lets say a tweet has a link attached,its taking anyone who click on the link away from my site,which is not what i want... What i want is just for the link to open in a new tab.

Do ye know how I could get around this problem?
Drop me an email.... eoin.fleming@rits.ie

Any help appreciated, Thanks.
Reply
Kevin Liew Thu, 23rd June 2011 Thanks for info, I have fixed it.. it was the regular expression that causing the issue.
SANG Wed, 27th July 2011 still this url thing is not working for me...Where did u change
Kevin Liew Wed, 27th July 2011 im not very sure what's wrong. I checked it on IE, Firefox and Chrome again. They work perfectly. If it's still not working try this version: http://www.queness.com/post/8567/create-a-dead-simple-twitter-feed-with-jquery
Arun R Sat, 16th April 2011 Hi

Good code. I have added the following code to fetch multiple tweets instead of just latest tweet.

//in the $.getJSON('http://twitter.com/statuses/user_timeline.json?screen_name=' + user + '&count=5&callback=?', function (data) {
//modify the count value to the number of tweets you require, in this example "count=5"

//Replace
var tweet = data[0].text;
//with
// result returned
var tweet = "";
for (i = 0; i < data.length; i++) {
tweet += data[i].text + "br";//tags are not allowed in this comment section so please convert this br to br tag
}

//NOTE: If the code is doesn't work for you. Try commenting "process links and reply" block. It will work for sure. But remember links are not processed without this function.

Arun R
www.risingperfection.com
Reply

Leave a comment

Have something to say? Drop a comment! No HTML tags are allowed in the comment textfield.

Advertisement