04/14
2010
Add a Twitter feed with jQuery (no plugins) (28,519 views)
UPDATE 10-17-2012: change in Twitter API!
Adding a twitter feed to your website is easier than you might think.
All you need is:
the jQuery library
the twitter username/userID/screenname (preferably your own) of the feed you want to embed
and a few lines of code.
The HTML (head):
Simply load the jQuery library by placing a link to it in your page’s header.
The HTML (body):
Twitter Feed with jQuery
The div with the id jstweets is the container which will hold our tweets.
The JavaScript:
// UPDATE 10-17-2012: change in Twitter API!
$.getJSON("https://api.twitter.com/1/statuses/user_timeline.json?screen_name=REPLACE_WITH_YOUR_USERNAME&count=5&callback=?",
function(data){
$.each(data, function(i,item){
ct = item.text;
// include time tweeted - thanks to will
mytime = item.created_at;
var strtime = mytime.replace(/(\+\S+) (.*)/, '$2 $1')
var mydate = new Date(Date.parse(strtime)).toLocaleDateString();
var mytime = new Date(Date.parse(strtime)).toLocaleTimeString();
ct = ct.replace(/http:\/\/\S+/g, '$&');
ct = ct.replace(/\s(@)(\w+)/g, ' @$2');
ct = ct.replace(/\s(#)(\w+)/g, ' #$2');
/*
$("#jstweets").append('
'+ct +'
');
// old version - shows no time
*/
$("#jstweets").append('
'+ct + " (" + mydate + " @ " + mytime + ")
");
});
});
Twitter’s API provides a multitude of access options, here I am using the user_timeline method for the user specified in screen_name and chose json output format which is already perfectly formatted for the use with jQuery to fetch the tweets.
Using a loop, the script iterates through the amount of tweets specified in count (count=5) and for every tweet performs 3 additional tasks (yeah, regular expressions) to transform all links, hashtags and usernames into clickable links.
I could have used the search method which outputs clickable links, but Twitter only makes 2 weeks worth of tweets available via the search function (specifying rpp=10 won’t help if he tweets are more than 2 weeks old).
Add some stylesheets and put the div anywhere you want your tweets to get displayed on your page.
a, a:link, a:visited, a:hover {
text-decoration:underline;
color:#cacaca;
}
#jstweets {
width:650px;
height:250px;
background:transparent url('tbird.png') top left no-repeat;
border:1px solid #555555;
text-align:left;
}
h1 {
font-size:48px;
font-weight:normal;
font-family: Century Gothic,Myriad Pro,Arial,Helvetica,sans-serif;
margin: 0 0 40px 0;
}
.twitter {
display:table-cell; vertical-align:middle;
padding:0 0 0 250px;
}
Updated June 5, 2012:
- Changed the URL from http:// to https:// (new Twitter default)
- Added code to show time tweeted
Posted in: business mix, tech mix
Comments RSS FeedReply
Ttrackback
Print This Post
[...] This post was mentioned on Twitter by ninanet. ninanet said: Add a Twitter feed with jQuery http://bit.ly/9grCpL #jQuery [...]
[...] here: Add a Twitter feed with jQuery (no plugins) If you enjoyed this article please consider sharing [...]
[...] Add a TwitÂter feed with jQuery (no plugins) [...]
[...] the last post (Add a Twitter Feed with jQuery) we talked about how to add a twitter feed with jQuery, now it’s time to do the same with [...]
[...] Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can [...]
[...] Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can [...]
[...] Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can [...]
[...] Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can [...]
Thank you~ works great<3
The thing with this process is that after 150 requests in an hour, you will not be able to get your feed anymore. Just happened to me, looking for a work around
is there a way to show the post time? Or, time ago?
You simply have to include the value of created_at into your output.
Twitter’s default (Tue Jun 05 18:00:03 +0000 2012) is probably not what you want (and they do not provide a timestamp); so to format it you simply have to apply your desired format.
I have updated the demo to include the time (Tuesday, June 05, 2012 @ 11:00:03 AM) – it only takes 4 lines of code.
To see how it’s done, simply look at the source of http://ninanet.com/devdemos/twitterfeed-jquery.php.
If you want to display the time as [time] (minutes, hours, etc) ago, you would have to additionally calculate the time difference between now and the time the tweet was created.
//THIS IS GREATLY SIMPLIFIED AND WORKS MUCH BETTER! SEE CODE BELOW
$(document).ready(function(){
var userId = ‘cnnbrk’,
numTweet = 10,
feed = $(‘#social_feed’),
url = ‘https://api.twitter.com/1/statuses/user_timeline.json?callback=?&include_entities=true&include_rts=true&screen_name=’+userId+’&count=’+numTweet;
$.getJSON(url,function(data){
console.log(data); //see what results came in.
$.each(data, function(i, result){
tweet = result.text;
//wrap links with actual clickable anchor links
tweet = tweet.replace(/http:\/\/\S+/g, ‘$&‘);
//link @user to twitter user pages
tweet = tweet.replace(/\s(@)(\w+)/g, ‘ $&‘);
//link #hashtags to twitter hastag search
tweet = tweet.replace(/\s(#)(\w+)/g, ‘ $&‘);
feed.append(”+tweet+”);
}); //end each loop
}); //end getJSON
});
Sorry the commenting system renoved some of my code.. so the code aboev is not complete. To see the complete code example go to:
http://jsfiddle.net/RFyFj/
If it removes the link above it is
jsfiddle (dot) net (slash) RFyFj
I even got the links working correctly the regexpressions were adding a space into the urls whch was breaking them.
How do you make this work with your own twitter feed?
Uhm, well, first – it is MY Twitter feed :)
Then, if you mean yours (as in not mine) – simply use your Twitter handle…
thank you for your reply. I mean my twitter feed and not yours yes… what part in the java script do i need to replace? what’s the handle? sorry for being a douce!
oh now see with what you meant about the handle, but where abouts in the code to I place this? thanks in advance for your support.
Hi,
in the first line of the script where it says “REPLACE_WITH_YOUR_USERNAME” — put your handle there.
It looks like Twitter have changed their API or something and your code no longer works.
Thanks for the hint!
Yes, it seems Twitter has made some changes, so I updated the blog post, the demo and the download!
This goes for the Twitter Feed with PHP post as well:
http://blog.ninanet.com/2010/04/19/twitter-feed-with-php
Thanks!
Nina
Thanks to Andrew Levine from inward eleven, making me realize that one of the download links was pointing to the OLD Twitter json call.
Hi Nina! Thank you for the code and more importantly, thanks for keeping it up to date.
I just have a question. Why isn’t there a link in the @username when it is at the beginning of the tweet?
http://goo.gl/l50Bb
Please see the tweet with @Carter.. at the beginning.
Thanks again! :)
I love your jquery function it is so simple and clean. I would like to write a line to give you credit in the comments is: Credit for twitter feed – Nina Khoury @ http://blog.ninanet.com/2010/04/14/twitter-feed-with-jquery, ok?
Absolutely!
Thanks so much, David!
I will take a look and let you know what I find!
Thanks for pointing it out!
how can we add reply , retweet and favorite???
The code only integrates the tweets themselves. Further customizations or additional features are not planned – you would have to integrate them yourself :)