A simple way to display your latest tweet on your website

These days everyone is on Twitter. There are tweets flying left, right and center through cyberspace. So how do you get your latest tweet to display on your website? Well there are plenty of ways to do it, but the easiest way that I have come across is this one.  No plugins or installation required and it works on any website. All you need to do is copy and paste three lines of code and you’re done.

First of all you need to decide where you want your latest tweet to go on your website, then copy and paste the following HTML there.


<div id="twitter_update_list"></div>

Then simply copy and paste this JavaScript at the bottom of your website before the </body> tag.

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/blah.json?callback=twitterCallback2&amp;count=1"></script>

Don’t forget to replace “blah” in the code with your own Twitter account name. You can also change the “count” to  display more of your tweets. Now all you need to do is style up your tweet with a bit of simple CSS and you’re done!

Adham Dannaway

Web Designer and Front End Developer with a passion for web design, coding, blogging, WordPress and chewing gum. Check out my web design portfolio and follow me on Twitter and Facebook!

Share this post!

Tags: , , ,

  • Share
  • Stumbleupon Cre8ive Commando

    1. Chandan Chakraborty on July 31, 2010

      Great tips for a web designer. Thanks Adham for your valuable tutorial. I am looking for a page loading effect for my site, if you know please share.

      Thanks
      Chandan

    2. Abhishek on August 2, 2010

      Nice post about twitter..

    3. Manuel on August 30, 2010

      Is amazing but there is a problem when you need to validate the html 🙁

    4. Cre8ive Commando on August 31, 2010

      @Manuel – Try this instead, it should validate. 🙂

      • Latest tweets loading …
    5. KC on May 8, 2011

      Is there anyway to display your latest FAVORITE TWEET and not display the timestamp?

      Thanks in advance!

    6. Pravin Sawant on July 23, 2011

      Thanks for the tips about tweets.
      Keep it up

    7. Reuben on July 29, 2011

      Works great except for retweets it’s blank. How can you make it only show tweets and not retweets?

    Trackbacks

    1. […] This post was mentioned on Twitter by Adham Dannaway, Inv Amigo. Inv Amigo said: A simple way to display your latest tweet on your website #webdesign http://bit.ly/94uKeq […]


    0

    Have your say!