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.
6 Comments
aimee on April 12th, 2009
i notice the badge has some problems though when you try to log in, it shows the message: "this method requires a get". do you know how to fix this?
marcellinus on April 15th, 2009
How to increase the width of the badge. FYI, I'm wordpress. Can I change the code using editor? And where to find the code of the badge
Mogli on May 18th, 2009
I have the same problem like aimee ... who can help??
Chris Stover on May 27th, 2009
Despite copying and pasting (and saving) the HTML code into the text widget, nothing appears on my site. When I go to view the HTML in the text widget again, there code is no longer there. Any thoughts/troubleshooting?
brigid on August 15th, 2009
Hi
Thanks so much for this info, it worked perfectly!
I have been trying to load it using the twitter app on WP. obviously it didn't work for me.
I had no idea I could use the text box!
Some great stuff here, I will definately be back for more
Thanks again
Stefan on January 30th, 2009
Feel free to add your comments.