How to embed a Twitter Feed on your website

ilz

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.

View Demo

<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/ilz_.json?callback=twitterCallback2&count=1″></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 “ilz_”. 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.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • BlinkList
  • MisterWong
  • Reddit
  • Add to favorites
  • StumbleUpon
  • Technorati
  • Twitter

25 Responses to “How to embed a Twitter Feed on your website”

  • Gaurav Dhaka Says:

    Thanx for the info. Useful information. But why not use the twitter widget instead??? Any harm in that?

  • ilz Says:

    You can use the widget, but as a designer I prefer to customize everything. The widget is already designed and pretty ugly IMO.

    This code lets you build it into the design of the site, so it doesn’t look like you just dumped a generic widget on the page.

    For example, check out the one I did in the footer of my portfolio site. BeantownDesign.com

  • Mike Says:

    Great post…is there any way to customize each post? i.e. Can I put each tweet into its own background box…or could I style the most recent tweet differently (i.e. larger) than the others? Thanks ilz!

  • Sarah Says:

    Nice tutorial! But, it’s not working for me. as far as I can tell I’m doing the same thing you have in your source code. help?!? (thanks in advance…)

    link: http://www.pohyindesign.com/blogtest.php

    code:

    Latest Tweets

  • ilz Says:

    Looks like you figured it out Sarah? Let me know if you are still having problems.

  • Sarah Says:

    Yep, got it!
    Do you have an idea of how to get the update time line on a separate line?

  • ilz Says:

    Interesting question Sarah. I figured it would take some jQuery to get that to work, so I looked around. I found something over at CSS-Tricks that does what you want.

    Check out this demo I just put online.

    You can see the date is on a separate line like you wanted. I actually like this method, since it lets you style the block around each tweet. I of course had to throw on some box-shadow and border-radius.

    You can download a zip of these files here. You’ll see in the head of the index.html page the same code as the above code, where you call out how many tweets you want to show up.

  • ilz Says:

    And by the way Mike, this answers your question of how to put each tweet in it’s own background box. As far as having the latest tweet be different than the others.. I’m still not sure about that, hmmm..

  • Embed a Twitter Feed on your website with jQuery | WebDesign & Such Says:

    [...] a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple [...]

  • ilz Says:

    Check out how to use jQuery to accomplish a couple of the above questions.. right here.

  • Allen Wolfe Says:

    Thank you for providing the education. I’ve attempted to add my tweets without success. I have Java script already running on this page. Might there be a conflict in the Java scripts? Any help would be appreciated.

  • Allen Wolfe Says:

    I discovered the problem. Some of the characters were altered when I copied and pasted into Notepad. Thank you again for providing the know-how.

  • Sarah Says:

    Excellent! I just saw this update and will be trying it out shortly.

  • Laneth Sffarlenn Says:

    Hey ilz_, just wondering if you could shine some light on the Flickr code at the start of your jQuery in the second example you posted for Sarah?

    Is this is post your Twitter avatar? As it stands, I don’t know what it’s for or enough to do anything about it, and am curious as to whether I need it or if it’s just something for you?

  • Mike Saddlebrook Says:

    Is Twitter all it is cracked up to be as far as making money with it is concerned? I would like to try and build a Twitter base.

  • ilz Says:

    Laneth,

    Good question. That was for something else, I’ve now stripped it off the page since it isn’t needed.

    Mike,

    Twitter is a great tool as long as you have a real product or service that you care about. If you try to spam a bunch of junk and crappy links nobody will follow you, and thus it will be worthless to you.

  • Mario Says:

    Any script you can think of that will just leave one message on the screen and rotate the messages but just show one.

  • justWondering Says:

    Am trying to create a Mobile twitter page for the blackberry that would require a server side process, since Blackberry doesn’t support the complex javascript of blogger.js.

    Ideas? (Yes, javascript for blackberry is enabled. Simple javascript runs.)

  • Laneth Sffarlenn Says:

    @ilz – Thanks for your reply :) I’ve implemented your coding here: http://sffarlenn.net/tweets.html
    (And for some reason @TrippingWords just keeps disappearing from the stream…)

  • Barry Says:

    Hello, cheers for the tutorial. Unfortunately I couldn’t get it to work straight away as your code was missing this line just above the script tags:

    (in case that gets stripped out, it’s a UL tag with an id of “twitter_update_list”)

    Beware the curly quotes if you’re copy/pasting :)

    Thanks again

  • Parker Says:

    I seemed to have copied everything correctly and am double checking, but i cant get anything to load..Dont know what im doing wrong…help lol

  • Green Says:

    Alas, it doesn’t work for me… I get a pop-up saying “The server twitter.com:80 at Twitter API requires a username and password.”

  • Zachariah Wehby Says:

    I can not believe the amount of quality material that exists on this site. The site is extremely eye catching and pulls the reader straight in, the articles are great quality and are very professionally written. I have seen too many of these sites where it looks like they pay an 8 year old to do the writing – Not this one. Your site is easily the best that I have seen in a long while.

  • ilz Says:

    @Parker

    Sometimes when you copy/paste the code the quote marks turn into weird curly things. try manually deleting and re-typing them. other than that the code should work fine.

Leave a Reply

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes