Enquire

How To Display Latest Tweet From Twitter On Your Website

jQuery Scripts & Helpful Snippets

The code below no longer works, since the Twitter API updated to 1.1 on the 11th June 1013. The 1.1 API requires oAuth which requires a server side component. But here is a PHP solution to show your latest Tweet. Unfortunately, it’s not quite as simple as the former jQuery solution shown below.

Here’s a really quick and simple way to display your latest Tweet on your website like the example below (the graphics obviously won’t appear, just the Tweet):

Latest Tweet

1
2
3
4
5
6
7
8
9
10
11
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function ()
{
 $.getJSON("https://api.twitter.com/1/statuses/user_timeline/USERNAME.json?callback=?", function(data) {
  $(".show_tweet").html(data[0].text);
 });
});
</script>
 
<div class="show_tweet"></div>

Simply replace USERNAME with your unique Twitter username. The show_tweet class is where the Tweet will display.

The “follow us” link won’t appear by default, I hard-coded that into the show_tweet div 🙂

It’s as easy as that.

Comments

  1. Roberto Torres spoke on 04/12/2011

    Thanks for such an excellent code!!

    I have a question for you, what is needed to put a specific font into the latest tweet? Let’s say Verdana.

  2. Jacob Rantor spoke on 18/02/2012

    Whereas this works its flawed.

    It works fine if you only get a few visits an hour. But when you get good traffic the requests fail and you have no fallback so you are left with an empty box.

    How would you fix that?

  3. Mishow spoke on 12/04/2012

    It didn’t work for me, nothing gets displayed.

  4. joz spoke on 14/07/2012

    would it be possible to load ONLY hashtagged(#) tweets do you think?

    i use #nowplaying while i work and wondered if i could just display these?

    regards
    Joz!

  5. George Kammenos spoke on 11/10/2012

    Hi, After Twitter system changes the script above should be updated!
    Kind regards
    George

  6. Zekkie spoke on 29/10/2012

    https://api.twitter.com/1/statuses/user_timeline/USERnAME.json?callback=?

    this is the correct link for the json api for now ^^.

  7. Ivana spoke on 18/11/2012

    Hiya, is there any chance you’d know how to add a time to this script – get the time when the tweet was published, as well as the username?

    Thanks!

  8. agung wicaxono spoke on 19/12/2012

    Thx for shared. It’s very help me. But, I think you have a little typo on your script


    $.getJSON(https://api.twitter.com/1/statuses/user_timeline/USERNAME.json?callback=?”, function(data) {
    $(“.show_tweet”).html(data[0].text);

    you missed double quote for the resource link

    $.getJSON(“https://api.twitter.com/1/statuses…

  9. adm1n spoke on 10/01/2013

    Thanks agung 🙂

  10. Jay Jalaram Extrusions spoke on 20/01/2013

    Thanks Maruf for a great snippet. I would use the same for my website.

  11. Leyla spoke on 13/03/2013

    Someone know how I can callback the “created_at” value?

  12. TheQuestioner spoke on 21/05/2013

    What if you are wanting multiple tweets?

  13. Noah spoke on 07/06/2013

    I tried several different sites, this is the first one with a solution that worked! Thanks!

Leave a reply

Your email address will not be published. Required fields are marked *

X