How to embed a Twitter Feed on your website

Written by on November 8, 2009 in Coding - 51 Comments
twitter-feed

Lots of people use Twitter. Love it or hate it, it’s true. I follow other people in the design industry to see what they’re up to. I use my Twitter page to post updates on things in my life, mostly design related.

One of the great things about Twitter is that you rarely ever go to the actual site. You can use a program like Tweetie or TweetDeck to send all your Tweets. Another great thing is the ability to embed your recent Tweets onto other websites. It’s a rather simple process, so check out my demo and then keep reading to learn how you can embed your Tweets on your page.

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

Copy the above code and paste it right into your XHTML code on your webpage, (right in the body).

All you need to do is replace where I have “beantowndesign”. That is my Twitter user name, replace it with yours. The other thing you get to decide is how many of the most recent posts you want to show. Change the part where it says “count=1″ to however many Tweets you want to show up. For example, in the demo I decided to show my last 3 Tweets.

So that’s all there is to it.. how you style the text, links, and surrounding environment for the feed is up to you and your creativity.

Sponsors

About the Author

Mike Ilsley "ilz" is a Boston based website designer, front-end developer, WordPress addict, owner of Beantown Design, and exclusive ThemeForest author. Follow him on Twitter and Facebook, and don't forget to subscribe to the WebDesign&Such email RSS feed. Also, check out his latest project, jQueryMobileShowcase.com.


  • Ben

    Very useful tutorial, however I’m beginner to all CSS/Javascript. For some reason all my tweets seem to be aligned to the right, is there any way to stop that? I’m not sure where to include ‘text-align:left’ for it to work. Thanks

  • enviousofclouds

    regarding ‘Any script you can think of that will just leave one message on the screen and rotate the messages but just show one.’ by mario, has there been any luck with this?

  • http://kandykoated.com Cat

    I can’t figure this out. It seems easy but, I guess not. I tried implementing it here:

    http://kandykoated.com/folio3/site/

  • ilz

    @Cat I would take a look but that link doesn’t work.

  • http://www.maelstromrecords.com/ns_index.php Tin

    hello…
    thank for this technique, which seems to work pretty well… or at least I thought so, but it seems I’m not getting the most recent tweet… the embedded tweet list always starts from the penultimate tweet… any ideas? all help appreciated… sorry that its buried in such a big complicated page…

  • http://benleppke.com/ Ben

    I can’t seem to get it to work either… Very unfortunate.

    • ilz

      post a link and i’ll take a look.

  • http://cstldesign.com Shenika Guittennez

    I found this post very interesting . Where can I find more information about this?

  • http://www.ryansuchocki.co.uk Ryan Suchocki

    The instructions are incomplete:

    The page needs to contain a DIV with id=”twitter_update_list”

    The script ‘blogger.js’ searches for this element, and sticks the statuses in there – regardless of where the tags appear. (from the code: document.getElementById(‘twitter_update_list’).innerHTML = …) found at twitter.com/javascripts/blogger.js.

    This will fix everything for most of the people who couldn’t get this working…

    Apart from that, it’s very very useful so thanks!

  • http://www.enviecosmetic.com ????????????

    Thank you for’Good news this chapter. I think if everyone behaved well. There would be no problem varied Which commonly not be edited offline. Every network station to work a way

  • http://www.zeanfootball.com ?????

    Thank you for’Good news this chapter. I think if everyone behaved well. There would be no problem varied Which commonly not be edited offline. Every network station to work a way