Display Last Tweet | CSS-Tricks

Jamie

# September 4, 2009

Love it!

Reply

Jamie

# September 4, 2009

But how can I show the last several tweets?

Reply

Andrew Champ

# September 14, 2009

Add this
callback=twitterCallback2&count=1
after this callback=?

Change the 1 to as many as you’d like.

Reply

Andrew Champ

Permalink to comment# September 14, 2009

I mean, replace the callback=? with the first code.
Vicky

Permalink to comment# July 10, 2012

hey its working but how to display user name’s name and picture…

SubSONiK

# October 29, 2009

I tried to use the

callback=twitterCallback2&count=1

It doesn’t seem to work for some reason…

$.getJSON("http://twitter.com/statuses/user_timeline/boombapgr.json?callback=twitterCallback2&count=3", function(data) {
$("#tweets").html(data[0].text);
});

Connecting to Twitter…

Reply

Jack

# January 29, 2010

Yeah, similar sort of thing, can get the one on it’s own to work, but no more than that…

Reply

Josh

# May 13, 2010

For those having an issue with more than one item, it’s because you have to put it inside of an array if it’s more than one item.

Something like:
instead of:

(data){

});

use

(data){
 for (i = 0; i < item.length; i++) {
            var each = item[i];

 }
}

Reply

Jay

# May 25, 2010

Will Twitter limit the number of jSON requests my server makes? In other words, if my site gets 1000 hits per hour should i be caching the tweet in a database? Or does twitter see it as the client making the request rather than my web server?

Reply

Chris Coyier

Permalink to comment# May 25, 2010

This site does OK without it… but… I probably should be caching. Caching something like this is just a good practice period. Regarding the limits, I’m not sure there is on stuff like just pulling from the timeline. I think it’s stuff like search that is limited. Could be wrong though.
Giovanni Mattucci

Permalink to comment# September 17, 2012

There is definitely a limit to the number of request you can make. So storing tweet information (in a database or otherwise) is pretty much a must.

For an unauthenticated query to twitter, there is a limit of 150 requests per hour.

You can read all about it in twitters dev. documentation here.

Ryan

# July 12, 2010

you can also refer to this site on how to display your latest tweets in twitter. with twitter API.

http://www.ryscript.co.cc/web/how-to-display-latest-tweets-using-javascript-and-twitter-api/

thanks..

Reply

Rai Adi Sanjaya

# August 24, 2010

Nice simple code..
I gonna use that one..
Thanks

Reply

Eclipse

# September 8, 2010

It displays anchors as text on my page:

http://www.eclipse-webdesign.nl/contact

Any ideas?

Reply

Eclipse

# September 8, 2010

works… thanks!

Reply

Bob Kruithof

# December 28, 2010

If you want to display your tweets with working links/hashtags/usernamelinks you could use this: `

function parseTweet($text) {
  $pattern_url = '~(?>[a-z+]{2,}://|www\.)(?:[a-z0-9]+(?:\.[a-z0-9]+)?@)?(?:(?:[a-z](?:[a-z0-9]|(?\2', $text);
  $tweet = preg_replace('/(^|\s)@(\w+)/', '\1@\2', $tweet);
  $tweet = preg_replace("#(^|[\n ])(([\w]+?://[\w\#$%&~.\-;:=,?@\[\]+]*)(/[\w\#$%&~/.\-;:=,?@\[\]+]*)?)#is", "\\1[link]", $tweet);
  return $tweet;
}

`

Reply

daniel due

# March 4, 2011

This is awsome, I’ll try to implement this like now!!! :D

Reply

daniel due

# March 4, 2011

This did not work :(

Reply

Inigo Web Design

# March 29, 2011

@Daniel & others – Bob Kruithof’s code did not work for the following reasons: He did not replace the html brackets with their ascii counterparts (as it tells you to do below), therefore the links in the code have been displayed as actual links in your browser (as you can see they are rendered in blue & you can click on them…) and He hadn’t escaped some of the quotes in the last preg_replace. The following code works perfectly. Just copy & paste it inside the div on your page where you want your tweet to be displayed, and change ‘YOURNAMEHERE’ to your name.

\[a-z+]{2,}://|www\.)(?:\[a-z0-9]+(?:\.[a-z0-9]+)?@)?(?:(?:[a-z\](?:\[a-z0-9]|(?\2', $text); $tweet = preg\_replace('/(^|\s)@(\w+)/', '\1@\2', $tweet); $tweet = preg\_replace("#(^|[\n ])(([\w]+?://[\w\#$%&~.\-;:=,?@\[\]+]\*)(/[\w\#$%&~/.\-;:=,?@\[\]+]\*)?)#is", "\\1[link]", $tweet); return $tweet; } $username='YOURNAMEHERE'; // set user name $format='json'; // set format $tweet=json\_decode(file\_get\_contents("http://api.twitter.com/1/statuses/user_timeline/{$username}.{$format}")); // get tweets and decode them into a variable $theTweet = parseTweet($tweet[0]->text); echo '"' . $theTweet . '"'; 
?>

Reply

Thomas

Permalink to comment# July 29, 2011

This above code does not work if copy and pasted. The pattern_url variable closes php ‘?>’ which I’m not sure is the intention – if it is than its never reopened which gives you the error. Not sure how to fix as I don’t know how to use patterns and preg functions. Anyone have any ideas?
tobias

Permalink to comment# August 10, 2011

had the same problem… just replace the all the ‘ and the ” — with ‘ and “…

works for me…
serge

Permalink to comment# October 11, 2012

works for me. thank you

RJ

# September 7, 2011

This is not working in IE at the moment? Any ideas?

Reply

james

Permalink to comment# June 19, 2013

Use a modern browser like safari, firefox or chrome and ditch your prehistoric IE.

IE is like the fat, dumb kid at school that everyone had to wait behind for in every class and carry on their backs in all the sports.
SM

Permalink to comment# November 16, 2015

Instructing a developer to ditch a browser is a non-answer. The developer has no control over which browser the user is going to attempt to view the page with. I have run into many cases where I have been instructed to develop toward browsers as old as IE7. Some organizations will not allow browser upgrades without long drawn-out testing processes that never happen. Likewise, some organizations will not allow users to install Chrome, or other non-Microsoft browsers for security reasons.

praneeth hettiarachchi

# September 25, 2011

Works fine for me!!

don’t forget to include jQuery library! lol

Reply

Rob

# October 11, 2011

RJ, use the code that Inigo posted. Just make sure to change all of the quotes as they get messed up formatting if pasted into certain text editors. It works fine in all current versions of IE, Chrome, Firefox, and Opera…

Reply

Lawrence

# November 4, 2011

How do I exclude links from tweets returned? I do not want any tweets with links coming in. I know there is a filter:links paramater but not sure how to implement.

Reply

Howdy

# December 2, 2011

Any idea why this works with all my twitter usernames except the one below?

Reply

Zlatko

# January 25, 2012

Doesn’t work after retweet.

Reply

Yasen

Permalink to comment# February 10, 2012

“This method will not include retweets in the XML and JSON responses unless the include_rts parameter is set. The RSS and Atom responses will always include retweets as statuses prefixed with RT, regardless of provided parameters.”

https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

Parker

# March 9, 2012

How do I make random tweets?

Reply

Marina Bearman

# April 4, 2012

To display last five tweets using jQuery:

$.getJSON(“http://twitter.com/statuses/user_timeline/NoReservations.json?callback=?&count=6”, function(data) {
/* $(“#twitter”).html(data[0].text);*/
$.each(data, function(i, object) {

$(“#twitter”).append(”+object.text+”);

});

Reply

melolonta

# May 15, 2012

this works for me, for several tweets (5 in this case) with links.

http://jsfiddle.net/8jmLY/664/

Reply

Kakembo Alex

# June 15, 2012

if I’m not late for this party, this seems to work for me though. using jquery framework, put this in you html/php page and create as and inside it put this code. change the username to yours.

$(document).ready(function() {

  var tweets = 3; //specify the number you want here

  $.ajax({

    url: “http://twitter.com/statuses/user_timeline/krialex21.json?&count=” + tweets +”&callback=?”,
    dataType: “json”,
    timeout: 15000,

    success: function(data) {
      for (i=0; i<data.length; i++) {
        $("#twitter").append("” + data[i].text);
        $(“#twitter”).append(“” + data[i].created_at +”");
      }
    },

    error: function() {
      alert(“Failure!”);
    }

  });

});

Reply

Kyle

# June 19, 2012

So, followed this (and the latest comments), and no problem pulling the latest tweet at all. Easy as pie, actually. Terrific.

Looking through the json data pulled from Twitter, I really want to pull the “statuses_count” – i.e., the number of tweets you’ve posted. It’s displayed several times here: https://twitter.com/statuses/user_timeline/kyle_conrad.json?callback=? as well as here: https://api.twitter.com/1/users/show.json?screen_name=kyle_conrad&include_entities=true (and outlined here: https://dev.twitter.com/docs/api ).

However, I can’t seem to pull that – pulling text is no problem, but any of the other JSON data that I want to pull just returns an “undefined.” There has to be something simple that I’m doing wrong, right?

Reply

jireh

# June 21, 2012

Hello everyone,

I was wondering, how do I display the lastest tweet in one div. Then the 2nd tweet in another div and then the 3rd tweet in another div. Something along the lines of this:

(div)lastest tweet(/div)
(div)random picture(/div)
(div)random picture(/div)
(div)2nd tweet(/div)
(div)random article(/div)
(div)random picture(/div)
(div)third tweet(/div)

how would i go about that? I’m still looking but I dont even know the terminology to even search. Aggregate?

Thanks.

Reply

Miles

# September 1, 2012

hi was just wondering what i need to input to have the time of tweet showed e.g. 17 Mins ago , 1 hr ago etc

Reply

Giovanni Mattucci

Permalink to comment# September 17, 2012

Here is an article that shows you how to use javascript to do what you want. Basically, in the returned JSON information there is a variable called “created__at.”

You basically have to write your own math to figure out from the created_at timestamp into a “1 hour ago” sort of information.

Also you might want to delve into Twitters API documentation: https://dev.twitter.com

Oumz

# October 14, 2012

This no longer works, there seems to be some update by twitter recently …
It used to work fine but now I get this error : Sorry, that page does not exist”,”code”:34

Any workaround or quickfixes to this??

Reply

Kelsey

Permalink to comment# October 17, 2012

I’m wondering the same thing..

joan

# October 15, 2012

I’m agree, #Oumz, this doesn’t work since yesterday!

Reply

Charles

# October 17, 2012

I also agree with #Oumz. I can’t get any scripts to work.

Reply

Dom

# October 24, 2012

Thanks for the interesting post, I was using the old simple two lines of code below like many other people but
now it seems Twitter has prohibited this and we are all left with empty areas. Is there any way around this or do we really have to put up with the ugly widgets??

Reply

Dom

# October 25, 2012

Sorry, it didn’t post.

src=”http://twitter.com/javascripts/blogger.js”>

src=”http://twitter.com/statuses/user_timeline/username.json?callback=twitterCallback2&count=2″>

Reply

Mike DeLeon

# November 2, 2012

Works like a charm! Thanks!

Reply

Aniket Betkikar

# November 5, 2012

Worked like a charm!!!! :) Thank you.

Reply

luciano

# November 13, 2012

how can I use it on html?

Reply

Jeff

# November 17, 2012

Hi does anyone have a fix so the tweets will display with clickable links? I’ve been trying to get the following to work with no luck

function twitterCallback2(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh):\/\/[^”\s\<>]*[^.,;'”>:\s\<>)]!])/g, function(url) {
return ‘‘+url+’‘;
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+’‘+reply.substring(1)+’‘;
});
statusHTML.push(‘

“’+status+’” – ‘+relative_time(twitters[i].created_at)+’

‘);
}

$(‘.loading’).fadeOut(750, function() {
$(‘#latest_tweet’).append($(statusHTML.join(”)).hide().fadeIn(750));
});

}

Reply

Ivana

# November 18, 2012

Hiya, I’m just wondering if there’s a way to add the time to this, as well as the username. e.g., “12:22 by @username”

Thanks !

Reply

David F

# December 4, 2012

I’m trying to add this to my site, but it doesn’t seem to be working, I’m relatively new to web development and I’m sure its a simple oversight on my part but how should I connect the js file to my html file?

Reply

Kevin

# December 5, 2012

It’s not as easy to implement as Chris’s code up above but I found the MiniTwitter jQuery plugin that allows for the ability to be style in css. Very clean & so far is reliable.

Reply

Dave

# December 12, 2012

Can I specify a hashtag so that it brings back the latest tweet with a particular hashtag in?

Reply

John

# January 1, 2013

Thanks for this!

Anyway how can I get the date of the tweet when it has been posted?

Best,
John

Reply

Scott Grodberg

# January 2, 2013

Just wondering if this means I’ll have to use the widget eventually instead of this? Because I really like Chris’ solution! A widget will be nowhere near as elegant I assure you

Regards,
Scott

Reply

Mike

# January 23, 2013

Exactly what I was looking for – simple and elegant code. Cheers.

Reply

Aron Duby

# February 1, 2013

Since this is still one of the top results I feel I should mention this method is going to completely stop working in the near future. This is using version 1 of Twitter’s API, which is now deprecated and will be removed at some point (possibly next month according to one post I read). The new version (1.1) requires all calls to be authenticated using OAuth, which means the days of easily grabbing tweets like this are gone.

Dang Twitter, you definitely deserve the angry old man fist shake over there.

Also, Thanks Chris and everyone who contributes to this site, it’s a developer’s best friend!

Reply

MikeChipshop

# March 14, 2013

@Aron Duby

Unfortunately you’re completely correct. I went to knock up a quick splash page for a client today using this code, as i’ve done since Mr Coyier originally posted it, and i found it no longer works.

Time to hunt down an adequate solution as nothing Twitter provides is half as good for use.

Reply

Amged Osman

# March 14, 2013

A lot of people have ben asking how to convert the text urls to actual urls

function url2Links(text) {
  var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~<em>|!:,.;]*[-A-Z0-9+&@#\/%=~</em>|])/ig;
  return text.replace(exp,"<a href='$1' rel="nofollow">$1</a>"); 
}

Reply

Amged Osman

Permalink to comment# March 14, 2013

the website is not displaying teh full code .. so here’s a link to it

http://pastie.org/6503759

Connor Gurney

# March 23, 2013

I’m planning on using this on my blog soon. Thanks! :)

Reply

Dhruba Jyoti Deka

# April 29, 2013

No, it doesn’t displaying my tweets. Please help. I think Twitter updated the API.

Please update the post.

Reply

Colm Morgan

# June 10, 2013

Using a few of the comments previously posted here, I have created a handy snippet for anyone to use. All that’s needed is the twitter handle. It can be easily amended to display multiple previous tweets, and not just the most recent.

Enjoy!

/**
 * Get latest tweet via Twitter API, in JSON format,
 * 
 * Format tweet with working URLs for urls, hashtags, and mentions
 * 
 * @param $user
 */
$user = 'PierceComms'; // case in-sensitive

$json_results = json_decode( file_get_contents( 'https://api.twitter.com/1/statuses/user_timeline/'.$user.'.json?count=1&include_rts=1&callback=?' ) );
$tweet = $json_results[0]->text;

$pattern_hashtag = '/#([\\d\\w]+)/';
$replace_hashtag = '<a href="http://twitter.com/#search?q=%23$1" target="_blank">$0</a>';

$pattern_mention = '#@([\\d\\w]+)#';
$replace_mention = '<a href="http://twitter.com/$1" target="_blank">$0</a>';

$pattern_url = '/http:\/\/([a-z0-9_\.\-\+\&\!\#\~\/\,]+)/i';
$replace_url = '<a href="http://$1" target="_blank">http://$1</a>';

// Replace http://url.com with working URL
// URLs MUST BE REPLACED FIRST
$tweet = preg_replace( $pattern_url, $replace_url, $tweet );
// Replace #hashtags with working URL
$tweet = preg_replace( $pattern_hashtag, $replace_hashtag, $tweet );
// Replace @mentions with working URL
$tweet = preg_replace( $pattern_mention, $replace_mention, $tweet );

echo $tweet;

Reply

seonatural

# June 11, 2013

11/06/2013 – 10pm – RIP API 1.0 It seems Twitter API has moved to version 1.1 and the authentication is now requiered for all kind of requests… We can’t even get a tweet! We’ll now have to get it through our server (no more JSONP).

Reply

Colin

Permalink to comment# June 13, 2013

ouch it’s true, this whole page is useless now. anyone got a method to fetch the latest tweet that works?

carlos

# June 12, 2013

how can i display the fotmat-less last tweet with this new api version?

Reply

Colin

# June 13, 2013

http://stackoverflow.com/questions/12916539/simplest-php-example-retrieving-user-timeline-with-twitter-api-version-1-1

Reply

Rahul

# June 14, 2013

This doesn’t seems to work now, please update this article. Thank you.

Reply

m

# July 4, 2013

what r d things should i install before fetching the tweets? what r the softwares i required for this i dont know.please help me for this. i want the code for search the twitters ……

Reply

Eugene

# July 9, 2013

Hi,

Not working anymore.

Reply

e11world

# July 23, 2013

This is when technology becomes a pain in the ***.
I really hate having to go back and change things like these just because Twitter decided to make changes.

Reply

radhika

# September 3, 2013

I want to display the post time like about 19 hours ago.how do i do?

Reply

Dev Meghraj

# September 30, 2013

Hi can you update this post for twitter api changes.
https://dev.twitter.com/docs/api/1.1/overview

Reply

Cody O'Dell

# October 4, 2013

FYI This is out of date now

Reply

fs

Permalink to comment# November 4, 2014

Thanks Cody

Sudipto

# November 19, 2013

Is there a way to display the tweet count for a particular post like the way jetpack plugin does?

Reply

Charles

# April 9, 2014

We can use Ruby to get the latest tweet:

require "rubygems"
require "nokogiri"
require "open-uri"

doc = Nokogiri::HTML(open("https://twitter.com/<screenname>"))
doc.at_css(".expanding-stream-item .tweet-text").text

Reply

voituremaroc

# April 22, 2014

Error message :
The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.

according to the documentation of twitter api,
API v1.1 is released, user authorization (and access tokens) are required for all API 1.1 requests. In the weeks following release, some methods will require only application-based authentication for certain “userless” contexts.

Reply

daniel

# May 30, 2014

thanks you for your code, you helped me!

Reply

Shahjehan

# July 8, 2014

I like This Example Which is well work for me

http://codepen.io/jasonmayes/pen/Ioype

Reply

Nitish

# February 25, 2015

Hi
i got this error message.
“This no longer works as of Twitter API 1.1”
Can u plz help me how i can remove this

Reply

Comments

Leave a Reply Cancel reply