How to show Twitter updates on Blogger

Previous I explained how to tweet blog posts into Twitter in Adding a “Tweet this” button into blog posts. Well this time it’s kind of the other way around.

We are going to make a widget that pulls your Twitter updates and embeds them on your blog. The content of the widget will be automatically updated every time you make a status update on Twitter.

Update: Twitter has come up with four new widgets: User timeline, Favorites, List, Search and Custom timeline.

The following steps will display your profile updates. It will display you public timeline similar to the live example here. The timeline is interactive and enable your visitors to reply, Retweet, and favorite Tweets directly from your blog.

1. Visit Twitter's widgets page.
2. Click Create New button on top right of the screen.
3. Customize your widget -specify the widget’s height, theme, link color etc.
4. Click Create Widget button at the bottom of the settings. The code for the widget will appear at the bottom left of your screen.
5. Copy the code.
6. On Blogger go to Layout, add a HTML/Javascript gadget, and paste the code in the content box.

(Below is the original tutorial (that no longer works) using the old script. This is for (my) reference only)

Installing (the old) Twitter updates widget

1. Login to your Blogger account.
2. Go to Design > Page Elements.
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Enter the title of your widget e.g. Twitter Updates.
6. Copy the code below and paste it inside the window.
7. Click Save.

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a href=http://twitter.com/YourTwitterUsername id="twitter-link" style="display:block;text-align:right;">follow me on Twitter</a>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js">
</script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YourTwitterUsername.json?callback=twitterCallback2
&amp;count=5">
</script>

Notice the highlighted lines in the code? That’s where you need to enter your own input:

1. YourTwitterUsername –replace this with your Twitter username.
2. count -replace 5 with the number of latest Twitter updates you want to show in your blog.

Styling the widget

As for formatting/styling, it will follow your blog sidebar styling. But if you want to customize it, you can use inline styling by inserting style attribute after <div in line 1 or you can create a separate element definition in CSS, like this: 

#twitter_div { 
/* add styling codes here here */ 
}

And place the it before ]]></b:skin> line in your HTML.

Enjoy!

p.s. Have you added a Twitter Follow button on your blog?