Twitter Badge Widget For Wordpress

What is a twitter badge and how to install it on your wordpress blog. Well, have a look at my wordpress sidebar and you get the idea. It's a cool twitter gadget and it displays your latest twitter updates on your website.

Important! (update feb 1 2009)
You need a self hosted wordpress blog for this. If you don't, there's another way to display your tweets on your wordpress.com blog (no badge though).

How to Install the Twitter Badge...
When you go to the official twitter badge download page, you will see that there isn't a "twitter badge for wordpress" option, so wordpress users are stuck with the "other" option.

When you click on that option, you need to decide which version you would like to install on your wordpress blog. (I picked the flash version.)

Click "continue"... Then pick either the interactive widget (the one I am using on my website right now) or the display-only widget. Click "continue" again, select a color style (smooth, velvetica or revo) and a widget size (narrow, wide or full). I chose smooth and narrow.

Copy the produced html code.

Now go to your wordpress dashboard, find "Appearance" and click on "Widgets".

Please note that your wordpress theme must be widget-ready. If it isn't, consider to switch to a widgetable theme. You can find some nice wordpress themes at woothemes.

Select "show all widgets", scroll down below, find "Text" and click on "Add". A Text widget appears to your right... Open it (click on edit) and paste the copied twitter code in there.

Now before you click "Done", inspect the code because you MUST adjust the twitter code manually to adjust the width of the twitter badge...

Now pay attention!
In that code you will find width="290"... not once but twice. Change both values to the desireable width (you can do the same thing with the height-values of course).

Now, click "Done", position the Text-widget where you wanna have it (I put mine on top) and click "Save Changes".

Reload your wordpress powered webpage and ... Voila. There it is. Your Twitter flash badge for wordpress.

Now the only thing I don't like about the twitter badge is that it leaves an empty hole while it is loading. This can take up to a few seconds. For this reasons, I added a background to the widget. In case you wanna know how to add a background to your flashy twitter badge for wordpress, let me know.

Also, in case you're worried about the W3C validation of your wordpress code (XHTML strict flags the embed method), there's a good workaround for that as well.

Talk to you later.

How to Modify your WP Theme

In my previous post, I showed you how a premium theme can contribute to the monetization of your wordpress blog.

There is however another reason why I think you're better of with a premium theme: they are easier to to modify.

I modify wordpress themes for 2 main reasons:

If the (x)html code generated by a theme isn't W3C compliant, then I try to fix it. I check the validity of the produced source code at the W3C Markup Validation Service. I'm very picky about that because I believe that perfect codes are better indexed by the search engines.
In case you find an error and you can't fix the code yourself, ask the company or person who designed your premium theme. I am sure they'll do this for free, as it is in their best interest to deliver perfect codes.

The other reason why I like to modify a theme is to make the theme a bit more personal. Small changes are usually enough to make a difference.

At the time of writing...
The WP theme I am using right now, as any other premium theme designed by Woothemes, is very easy to modify. In case you also installed a Woo Theme go to your WP dashboard, and click on your theme's options menu (at the lower left-hand side of your wordpress 2.7 dashboard). There you can add your custom logo, your tracking codes, your banners, etc...

Also, Woothemes are fully widgetized, which makes it a breeze to add widgets to your blog's sidebar.

Well, there you have it. Next time I will talk about some essential plugins you need to install. Talk to you later!