04/14
2010
Add a Twitter feed with jQuery (no plugins) (21,688 views)
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:
$.getJSON("https://twitter.com/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
[…] 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.