where's the salt?

04/14
2010

Add a Twitter feed with jQuery (no plugins) (18,800 views)

Add a twitter feed to your website

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):


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

Tags:

Date posted: Wednesday, April 14th, 2010 at 6:36 am (8 years, 10 months ago.)
Posted in: business mix, tech mix
Comments RSS Feed Comments RSS Feed
Reply
Ttrackback
Print This Post Print This Post

12 Responses to “Add a Twitter feed with jQuery (no plugins)”

  1. 1

    […] This post was mentioned on Twitter by ninanet. ninanet said: Add a Twitter feed with jQuery http://bit.ly/9grCpL #jQuery […]

    Tweets that mention Add a Twitter feed with jQuery #jQuery -- Topsy.com on April 14th, 2010 at 6:46 am
  2. 2

    […] here: Add a Twitter feed with jQuery (no plugins) If you enjoyed this article please consider sharing […]

    Add a Twitter feed with jQuery (no plugins) | Source code bank on April 14th, 2010 at 9:10 pm
  3. 3

    […] Add a Twit­ter feed with jQuery (no plugins) […]

    Add a Twitter feed with jQuery (no plugins) | RefreshTheNet on April 16th, 2010 at 12:05 am
  4. 4

    […] 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 […]

    Add a Twitter Feed with PHP on April 19th, 2010 at 8:24 am
  5. 5

    […] 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 […]

    Pattern Inc » Coding a Stylish Blog Design Layout in HTML & CSS on August 1st, 2010 at 10:20 pm
  6. 6

    […] 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 […]

    Coding a Stylish Blog Design Layout in HTML & CSS | pro2go Designs Blog on August 2nd, 2010 at 5:43 am
  7. 7

    […] 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 […]

    Coding a Stylish Blog Design Layout in HTML & CSS | Ispey Seo Expert on August 2nd, 2010 at 11:50 am
  8. 8

    […] 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 […]

    Coding a Stylish Blog Design Layout in HTML & CSS « iBlogger on August 30th, 2010 at 12:48 pm
  9. 9

    Thank you~ works great<3

    jenn on September 10th, 2010 at 1:27 am
  10. 10

    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

    Alex on February 8th, 2011 at 12:19 pm
  11. 11

    is there a way to show the post time? Or, time ago?

    will on June 5th, 2012 at 10:37 am
  12. 12

    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.

    nina on June 5th, 2012 at 11:35 am

Leave a Reply


search

Categories