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/beantowndesign.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 “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.
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.
March 12th, 2010 at 5:04 am
Hi ilz, Great tut and works a dream for what I require. The problem I get when I validate my code it comes up with errors in xhtml 1.0 strict. Is there any way to remove these errors or what would I need to try.
Many Thanks Andy.
March 12th, 2010 at 2:53 pm
@Andy
What do the errors say?
March 13th, 2010 at 2:10 am
Hi ilk,
Thanks for comming back to me. Errors as requested.
Line 112, Column 123: general entity “count” not defined and no default entity
…ses/user_timeline/aw_designs.json?callback=twitterCallback2&count=1″>
Line 112, Column 128: reference to entity “count” for which no system identifier could be generated (highlighted the = )
…ses/user_timeline/aw_designs.json?callback=twitterCallback2&count=1″>
Line 112, Column 80: EntityRef: expecting ‘;’ – (this reports to the / before aw_designs)
…p://twitter.com/statuses/user_timeline/aw_designs.json?callback=twitterCallbac…
March 25th, 2010 at 7:10 am
@ Andy
I had the same problem, it was caused by the “&” in the jacascript src.. i replaced it with the following, works a treat for me, let me know…
March 25th, 2010 at 7:11 am
that may have been stripped, try again..
March 25th, 2010 at 7:15 am
ok, cant post the code..
basically, replace the “&” in the javascript source to & amp; (with out the space), and also make sure your ul twitter_update_list has a black li (list item) in it. dont worry, the blank item will be removed when the script loads..
this should solve all 4 errors..
March 25th, 2010 at 3:55 pm
Thanks for the tips Joe!
March 27th, 2010 at 8:29 am
Can’t seem to make this work. Have the code in, made sure the quotations were not squiggly, tried adding the amp ; thing, copied the code off other people’s sites that use it successfully, cannot get it to work, nothing shows up on my page. http://www.chrislaursen.com/twittertest2.html
April 12th, 2010 at 3:21 pm
Hi, great tutorial, got my Twitter feed up and running thanks to you
Got a question, though, the Twitter site allows you to make widgets that subscribe to a list, or to a set of search results, which is what I’d really like. Do you know how you modify this to subscribe to either of those? I tried simply changing the username in the JavaScript to a List title but it didn’t work.
April 12th, 2010 at 6:32 pm
@Chris,
put this in your CSS:
ul#twitter_update_list { list-style: none; }
and put this in your HTML, right above the 2 lines of JS code that you have:
{ul id=”twitter_update_list”>{/ul> replace the “{” with “< "
check out the source code of my demo if you want to see some more styling CSS, etc.
April 12th, 2010 at 6:39 pm
@Tipp,
Good question.. I’m going to look into that. Let me know if you find a solution.
April 13th, 2010 at 8:51 am
Ah, nevermind, I figured it out
I just put the list tag where I wanted the updates to show and had the scripts at the bottom of the page so that they would load last. These obvious things are so easy to miss…
May 10th, 2010 at 1:18 am
I’m afraid I can’t get it to work – link is http://www.susiestravelweb.com/test-twitter.shtml. It’s the only thing on the page but when you view it the page is completely blank.
May 18th, 2010 at 2:26 am
@susie I’m using Firefox and that test page works for me.
May 22nd, 2010 at 8:05 am
Thanks. Very useful.
June 3rd, 2010 at 3:33 am
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
June 3rd, 2010 at 3:36 am
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?