How to embed a Twitter Feed on your website
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/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.
November 8th, 2009 at 12:37 pm
Thanx for the info. Useful information. But why not use the twitter widget instead??? Any harm in that?
November 9th, 2009 at 2:28 pm
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
November 16th, 2009 at 11:37 am
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!
November 25th, 2009 at 7:34 pm
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
November 28th, 2009 at 11:01 am
Looks like you figured it out Sarah? Let me know if you are still having problems.
November 29th, 2009 at 8:45 pm
Yep, got it!
Do you have an idea of how to get the update time line on a separate line?
December 3rd, 2009 at 2:45 pm
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.
December 3rd, 2009 at 2:50 pm
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..
December 8th, 2009 at 5:17 pm
[...] a previous post I showed possibly the easiest way to embed a Twitter feed on your website. This brought up a couple [...]
December 8th, 2009 at 5:27 pm
Check out how to use jQuery to accomplish a couple of the above questions.. right here.
December 9th, 2009 at 7:32 am
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.
December 9th, 2009 at 8:19 am
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.
December 9th, 2009 at 12:48 pm
Excellent! I just saw this update and will be trying it out shortly.
December 11th, 2009 at 4:01 am
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?
December 11th, 2009 at 11:05 am
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.
December 12th, 2009 at 5:02 am
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.
January 15th, 2010 at 9:44 am
Any script you can think of that will just leave one message on the screen and rotate the messages but just show one.
January 18th, 2010 at 3:48 am
Try jQuery:
http://plugins.jquery.com/taxonomy/term/1523
http://webdesignandsuch.com/2009/12/embed-a-twitter-feed-on-your-website-with-jquery/
January 30th, 2010 at 4:57 am
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.)
February 8th, 2010 at 1:42 pm
@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…)
February 16th, 2010 at 9:14 am
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
March 3rd, 2010 at 1:25 pm
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
March 5th, 2010 at 3:25 am
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.”
March 5th, 2010 at 7:08 am
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.
March 7th, 2010 at 4:40 pm
@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.