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 displays 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: Profile, Search, Faves and List widgets. To display your most recent updates (similar to the live example on the right) you want the Profile widget. To install it, simply:

1. Visit  Twitter's widgets page.
2. Go to My Website > Profile Widget and customize your widget.
3. Click Finish & Grab Code button.
4. Click the Add to Blogger button to add the widget to Blogger.
5. Finally select the recipient blog and click the Add Widget button.

 

(Below is the original tutorial, using the old script)

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?