April 22, 2008

Add a Customized Twitter Widget to your Blogger Blog

Twitter LogoTwitter has become one of the most useful social applications for bloggers. Many bloggers choose to feature their latest updates in a widget visible in their blogs. Here at Blogger Buster, for example, you can see a Twitter widget in the header section which features my latest "tweet".

Many readers have emailed me to ask how I customized this widget, so in this post I'll explain some methods you could use to create and customize your own Twitter updates widget, including a simple widget installer for you to add a widget similar to the one used here.

Twitter does offer a "Blogger" widget which can be installed using a one-click installer. This widget does not have any styling associated with it, ensuring your updates will appear in the same fonts and colors as other widgets in your blog.

If you have already added a Twitter widget to your blog, you can easily customize the appearance of this widget using some simple CSS techniques.

The widget code for your Twitter badge will most likely appear like this:

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

As you can see from the comments I added in red, you can add inline CSS styling to your widget code, in order to add borders, background color or even an easily recognizable icon.

Here are some examples of the code you can add in this section:

style="border: 3px solid #cccccc; padding: 5px;" <--This will add a wide grey border around the widget with some padding to ensure the text doesn't get too close to the edges.

style="background: #ffcc00;" <-- This will add a bright yellow background to the widget, ensuring this contrasts with other elements in the page.

style="background: url(http://imagehost.com/youricon.jpg) top left no-repeat; padding-left: 50px;" <--This will add an icon as a background image to your widget. The padding declaration ensures the text does not overlap the icon (this is the solution I use to feature the blue bird in my Twitter icon in the header section).

To add these style declarations into your Twitter widget, simply go to Layout>Page Elements in your Blogger dashboard and click on the "Edit" link for your Twitter widget. Then locate the section of code which begins like this:

<div id="twitter_div"
and add your styling code to this section.

Here is an example of the Twitter widget code with style declarations added in red:

<div style="background: url(http://bloggerbuster.com/images/twitter-icon.gif) top left no-repeat; padding-left: 50px;" id="twitter_div"><ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/amandafazani">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/amandafazani.json?callback=twitterCallback2&count=5" type="text/javascript"></script>

Add a Twitter Widget using this Widget Installer

For those of you who would prefer a simple method of adding a stylized Twitter widget to your Blogger powered blog, here is a widget installer which will add a widget with an easily recognizable "Twitterific" icon, like this:

The colors and fonts of this widget will blend with other elements of your blog, while the Twitterific icon will be easily recognized and help your readers associate this widget with Twitter.

To add this widget to your blog, simply fill in the details in the form below. Your Twitter username is the one which you have chosen to represent you on Twitter. For example, my username us "amandafazani" and my Twitter URL is http://twitter.com/amandafazani. Add this username into the appropriate box, then change the title and number of tweets to display as suited to your needs.

I hope this post has been informative in explaining how you can add style to your Twitter badge/widget in your Blogger blog. Please let me know what you think by leaving your comments below.



View blog reactions


Related Posts by Categories



Post a Comment 15 Comments:

22 April 2008 22:01 podxien said...

Hi Amanda!
great great post!
Spot on as usual!

22 April 2008 23:02 tieTYT said...

good article, thanks

23 April 2008 04:24 MsPinkBiik said...

Hi Amanda
This is another amazing widget. Although I was able to add one before on my site but it kept my screen freezing and stops my sidebar to load. Do you know what could be wrong?
Thanks for your tips and help.

BTW I am now using your blue steel template. Please let me know what you think.

23 April 2008 10:41 Massimiliano Forastieri said...

Thanks a lot for your widget from Italy :-D

24 April 2008 10:08 Jean Chia said...

this is great! but do u have the bird in pink color?

25 April 2008 22:16 Amanda said...

For Podxien and Tietyt: Thank you for your kind comments, I'm glad you have found this helpful :)

For MsPinkBiik:

I love how you've used the Blue Steel template! As far as I can tell the Twitter widget should work just fine. It may be that Twitter was acting up again (sometimes the server goes down in which case it takes AGES for my header section to load).

You could try adding this again, but do let me know if it still doesn't work for you and I'll check your blog to see what could be wrong.

For Massimiliano Forastieri:

Thank you for stopping by! It's great to know this widget has been useful for you too.

For Jean Chia:

I don't have a pink one to hand, but feel free to grab the image if you'd prefer to alter this in your favorite image editor :)

28 April 2008 10:03 Jean Chia said...

hi amanda! oh great! thanks for giving me the permission even tho' i doubt that i can turn the bird to pink color. thanks again, amanda! you are simply the best!

01 May 2008 15:39 Jim Roeg said...

Thank you! Looks great.

19 May 2008 09:41 Tom said...

Hi there,

Thanks for this, I have added it to my blog.

One thing: I don't want the image gif to be hosted by your server, I'd prefer it to be uploaded onto my website.

Do you know how to change the coding so I can upload a picture instead of pointing to a URL?

24 May 2008 14:31 D said...

Is there any easy css coding to move this widget to the top right of my blog (similar positions to what you have)?

Thanks,
D

07 June 2008 17:38 Xinu said...

Thanks Amanda! This is awesome. The widget looks so much cleaner and more professional on my site now. Great tip!

15 June 2008 16:35 Threeundertwo said...

This is great. Can you tell us how to create a "follow" me link with it?

23 June 2008 14:28 .:Carola }i{:. said...

Thank you so much, it was great help!

25 June 2008 07:47 mummey said...

Thank you. All I needed was the border, and I didn't feel like relearning CSS again just for that.

Cheers,
-b

29 June 2008 23:17 Vanessa said...

Thanks Amanda for another blogger.com resource. I have to say ditto about not pulling on your server with the image. I was feeling lazy about going into CSS to change anything. I'll figure out something.

Post a Comment