How To Add A Twitter Badge To Your Website
October 1st, 2008
Twitter is one of my favorite websites. It’s essentially a glorified facebook status update but I like how I can integrate my feed onto other websites. I also enjoy the fact that I can import my blog feed to twitter and then pass it onto my facebook status updates. For this post, I’m going to talk about adding your Twitter status to your personal website.
For an example of this in practice, check out the footer of cardeo.ca. One of the nice things about creating your custom badge is the ability to style it anyway you want. Our first step will be to add a few styles to our code so the badge matches the layout of the website.
/* h5 tag is used to style the header for your feed */
h5 {
font-size: 12px;
line-height: 18px;
font-weight: bold;
}
#twitter_update_list {
width: 200px; /* width of twitter column */
}
Feel free to add more styles, I’m just trying to keep it simple here. The next step is to add the HTML code to your website, where you want your Twitter feed to appear.
<h5>FOLLOW ME ON TWITTER</h5>
<p id=”twitter_update_list”></p>
The final step is to paste the below javascript at the end of your HTML file. Place the code right before you </body> tag. The last change you need to do is change the twitter username within the javascript to your own. My username is “mlambert”, replace it with your twitter username.
<script type=”text/javascript” src=”http://twitter.com/javascripts/blogger.js”></script>
<script type=”text/javascript” src=”http://twitter.com/statuses/user_timeline/mlambert.json?callback=twitterCallback2&count=1″></script>
I currently have the feed configured to display your last update. If you’d like to display more than one, change the count=1 in the javascript to the number of updates you would like displayed. That’s it, upload and enjoy.
Print This Post
16 Comments on “How To Add A Twitter Badge To Your Website”
admin
Yes, double-check that you pasted it in correctly. also, make sure this line appears where you want your badge to show up:
<p id=”twitter_update_list”></p>
email me if you need more help info@cardeo.ca
October 4, 2008 » 11:19 am
Hi, I seem to be having the same problem.
The “Follow me on Twitter” text is there, but the updates are not.
My guess (and I am by no means a programmer) is that the block of code where the “follow me on twitter” text appears references a javascript (twitter_update_list), but at the bottom of the page (where we’re coding the javascript), we don’t ever name the code with the twitter_update_list name – so the code is there, but since the naming is missing, it can’t be run.
Am I on the right track? How do I name the javascript?
Thanks for a great tutorial – super easy to follow, and it looks great on your site!
October 16, 2008 » 3:19 pm
admin
Hey Jason, would you mind posting a link to your website where you’re having the problem. I checked out your site but couldn’t see a heading for the feed anywhere. thanks
October 16, 2008 » 7:56 pm
Jason
Hey sorry to take so long to respond.
I’m going to keep trying to see if I can get it working. Its a business website, so I can’t really leave it on there half-working.
I’ll let you know if I still need help with it.
Thanks for the great tutorials!
Jason
October 20, 2008 » 10:28 pm
admin
cool Jason, if you need any help just let me know. If you want you could just paste the code into a temporary page (with just the code on it), then send me the link and I can help you troubleshoot it.
October 21, 2008 » 9:36 am
Hey. Just wanted to make a note that I had to replace the quotes from the copy/paste and then it worked like a charm! Thanks.
November 15, 2008 » 5:10 pm
Hi,
Great tutorial – I managed to do it first time. I only have one comment which may not be related to your code. For some reason the twitter feed only works on Goggle Chrome / Safari but not Internet Explorer. I used Macromedia Dreamweaver to add the HTML code. This is the address that the feed goes to
Would welcome your thoughts.
Cheers, Tom
March 16, 2009 » 3:52 am
admin
Hi Tom, what version of IE are you using? This script might not work on an older version like IE6. I found a page on twitter recently that also gives you the feed code if you want to check it out:
March 16, 2009 » 12:05 pm
Hi,
Thanks for the quick response. I have tested on Internet Explorer 7 & 8 and neither work. Chrome and Safari fine. Thanks for the link to twitter widgets – I tried them and they do work on IE but they only display 1 update. I like your code and the ability to display any number of updates on one page – you can see what I mean at . Any ideas would be welcome.
Cheers, Tom
March 17, 2009 » 1:58 am
admin
Hey Tom,
if you change the count in the last line of javascript code to something other than 1 it will display that many tweets.
For example count=5 will return 5 tweets. hope that helps
March 17, 2009 » 2:09 pm
Hi,
Whoops my last post must have been confusing – sorry. I know you can change the count in the code you posted – I have changed it to 40 on the page What I meant to say is that the widgets from twitter work on IE but only display one feed. There does not appear to be an easy way to adjust the count on the twitter widgets like you can on the code above. So my question is “any ideas why I can’t get your code to work on IE 7 or 8. Cheers, Tom.
March 18, 2009 » 2:09 am
Please ignore my previous rambling – I have sorted things now – I was previously only looking at the flash widget on twitter site. Many thanks.
March 18, 2009 » 2:23 am
admin
hehe no worries Tom, let me know if you have any other questions
March 18, 2009 » 12:49 pm
Ned
How do you introduce a line break between the text and the link (i.e. ‘about two hours ago’) as you have on this website? Great guide otherwise; I had it working immediately.
January 4, 2010 » 7:17 am
admin
Hey Ned,
try doing this to force the time to the next line.
add the following style to your css style sheet – you’re going to set the width to be whatever the width of the box is that holds your twitter badge. ie: if the box that holds it is 200px wide, set the width to 200px.
#twitter_update_list li span {
width: 200px;
}
let me know if that works for you.
January 4, 2010 » 12:11 pm
s
is changing the user name all which is required as doing this did not work for me
October 4, 2008 » 11:03 am