4

How to put a Twitter badge on your blog

Fairy Blog Mother

Look down my sidebar and you’ll see a large purple box, or badge, that shows my latest Twitter updates.

Today I’ll show you how to put one up on your WordPress.org blog. This is, unfortunately, not possible on your WordPress.com blog as it requires HTML script, but there is a widget available that will show the RSS feed of your Twitter stream. You can view how to install that from my ‘What and how to use widgets’ e-course.

Update for 15 April 2011: A new version of Twitter is out, so a revised version of this post has been written. It covers how to create a Twitter badge, but not how to put it into your blog – rejoin this post when you are ready to do that procedure.

First, go to your Twitter profile:

and pan down to the bottom links:

Click on the link ‘Goodies’:

And click on ‘Widgets’:

And choose ‘My Website’:

And click on ‘Profile Widget’:

Fill in your Twitter username in the field, and then select ‘Preferences’:

Tick the boxes you require (I’ve selected scroll bar, show 5 tweets, and confirmed the timestamps and hashtags), and then select ‘Appearance’:

Here I chose the colours I wanted to dress my badge up in. You can choose from the selection offered to you (click on the coloured squares and a pop up box with a selection will appear), or if you know the hex code of your colours like I do (#800080 is that magenta colour) fill those in the appropriate field in the pop up box. Have a play until you get what you like (it will show up in the example on the right, or click the ‘Test settings’ button at the bottom to view). Next click on ‘Dimensions’:

If you know your sidebar’s dimensions in pixels (!), put that in. My guess at 200 width was fine. The length is up to you, but I didn’t want my badge to dominate my sidebar, so I made it just a little bit longer at 250. The scroll-bar allowed the bottom tweets to be seen. There’s always the auto-width box to tick if you wish.

Now click on the ‘Finish and Grab Code’ button:

Highlight and copy the code. Now open your blog in another window and go to the dashboard:

Select ‘Widgets’ under ‘Appearances’:

Find and drag a text widget into your desired space on your sidebar. When it opens, past the badge’s code into it:

Don’t forget to click the ‘Save’ button. Now you can go to your blog through the ‘View Site’ button at the top and look at your brand new badge in your sidebar:

Hope you like it! Keep popping back to check it works – it’s so much fun seeing your latest Tweets appear as if by magic!

The following two tabs change content below.
Alice Elliott writes the award winning Fairy Blog Mother blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She provides simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Visit her new Beginner Bloggers blog to find her latest learning resources.
Sharing is caring

Please leave a comment, we would love to hear from you!


Important GDPR stuff: before you submit your comment, you will be asked to leave your name, email and web address, so we request your permission to display this data within our comments. Be reassured this information will not be collected onto lists or used for any other purpose.

  • shourima says:

    mine is not showing up for some reason. pl help. everything is showing except for the tweet updates.
    pl mail me

    • Alice says:

      Shourima, sounds like you haven’t added your Twitter username, hence why you can’t see your tweet updates. I’ve just been into Twitter to see if everything is OK, and it all appears to be.

  • Pankaj Arora says:

    Not happening in my blog. same process I did in the morning and now I stumbled on your site explaining the same thing. Still not happening 🙁

    • Alice says:

      Hi Pankaj, it’s because you have a WordPress.com blog. There may be restrictions for HTML use in text widgets in WordPress hosted blogs.

  • >