where's the salt?

04/14
2010

Add a Twitter feed with jQuery (no plugins) (42,467 views)

Add a twitter feed to your website
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):


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

Tags:

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

Nina Khoury is a software engineer, self-described geek and EVP of ninanet site solutions. She founded one of the first online agencies in Austria in 1997, taught at various universities for seven years and now lives in Sin City - Las Vegas, NV.

28 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
  13. 13

    //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

    });

    jongrover on September 3rd, 2012 at 1:32 pm
  14. 14

    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.

    jongrover on September 3rd, 2012 at 2:19 pm
  15. 15

    How do you make this work with your own twitter feed?

    Michael Westcott on September 25th, 2012 at 3:34 pm
  16. 16

    Uhm, well, first – it is MY Twitter feed :)
    Then, if you mean yours (as in not mine) – simply use your Twitter handle…

    nina on September 25th, 2012 at 4:33 pm
  17. 17

    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!

    Michael Westcott on September 26th, 2012 at 8:27 am
  18. 18

    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.

    Michael Westcott on September 26th, 2012 at 8:35 am
  19. 19

    Hi,

    in the first line of the script where it says “REPLACE_WITH_YOUR_USERNAME” — put your handle there.

    nina on September 26th, 2012 at 11:12 am
  20. 20

    It looks like Twitter have changed their API or something and your code no longer works.

    shemjaza on October 15th, 2012 at 7:58 pm
  21. 21

    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

    Nina on October 17th, 2012 at 7:09 pm
  22. 22

    Thanks to Andrew Levine from inward eleven, making me realize that one of the download links was pointing to the OLD Twitter json call.

    Nina on November 20th, 2012 at 10:41 am
  23. 23

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

    Vin Baluyot on December 7th, 2012 at 7:47 pm
  24. 24

    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?

    David on December 13th, 2012 at 8:45 am
  25. 25

    Absolutely!

    Thanks so much, David!

    Nina on December 13th, 2012 at 9:34 am
  26. 26

    I will take a look and let you know what I find!
    Thanks for pointing it out!

    Nina on December 13th, 2012 at 9:36 am
  27. 27

    how can we add reply , retweet and favorite???

    Rajesh Khatri on January 3rd, 2013 at 8:58 pm
  28. 28

    The code only integrates the tweets themselves. Further customizations or additional features are not planned – you would have to integrate them yourself :)

    Nina on January 4th, 2013 at 12:55 pm

Leave a Reply


search

Categories