Using the Follow me on Twitter Badges on WordPress / Blogger

on December 13th, 2008

Since I have uploaded the Follow me on Twitter badges one question I get a lot is “How do I put them on my site/blog?”.

So, this is a brief guide to using the Twitter badges – both for using a single badge or rotating a selection of badges. I hope it will make things a bit easier for tweeps out there.

Using just one badge

You comment, I follow
  1. Save them up on your computer;
  2. Upload them – using your method of choice – to the server hosting your blog/website; if you’re on WP there is a Upload Images button in the Add Media menu that you can access from the Write area.
  3. Select the desired destination, e.g. a sidebar HTML widget and paste the following tag in:
  4. <a href="http://twitter.com/yourtwitterhandle"><img src="http://www.yourdomain.com/images/twitterbadgename.png" alt="A Twitter Badge"></a>
  5. Replace “yourdomain” with the URL of your blog/site; “images” with the folder you uploaded the image and “twitterbadgename.png” with the name of the respective image file. And you’re done!

Now if your blog doesn’t support sidebar widgets or you want to include it in your template, e.g. in the comments area, you’ll have to change your theme code. This might get a bit tricky if code is not your forte. However, I’m happy to try and help – contact me using our contact form with a bit more info and we’ll see if we can sort it out.

Rotating a selection of badges

A Random Image

Following a question about a WP widget that could rotate these, I have found a WordPress plugin that already rotates images every time the page loads – I have used it for the badge to the right of this paragraph.

The technique actually works with any site, not only with WordPress.

I requires a .php file to be uploaded within the same directory as the images to be rotated and then called as any image, e.g.

<a href="http://twitter.com/yourtwitterhandle"><img src="/dropbox/2003/rotate/rotate.php" alt="A Random Image" /></a>

Obviously, use the correct image location.

You can download the php file here. More info regarding the plugin: http://ma.tt/scripts/randomimage/

That’s it – enjoy your new badges!

Tags: ,

19 Responses to “Using the Follow me on Twitter Badges on WordPress / Blogger”

  1. Miragi says:

    Thanks for the beautiful badge and the ultra-clear installation directions! You rock!

  2. dp says:

    Thanks so much. Great post – so helpful.

  3. I like the articles or blog posts here but your Rss has a handful of XML errors that you should fix. Great post though!

  4. C says:

    Thanks for this! :)

  5. Thanks for the php for rotating badges. I’m going to try it out once I have a free minute.

  6. [...] How to use the Twitter badges on your website or blog [...]

  7. eq plat says:

    “Very informative article – adding this to RSS now!

    I’m also interested, what wordpress template is being used on this blog? It’s amazing and I’d love to know where I can get a copy.”

  8. Thanks for the php for rotating badges. I’m going to try it out tonight.

    Mark

  9. Thanks, I’ll try using this twitter badge in some of my blogs.

  10. Very timely. I think these badges actually match my color scheme very well too.

  11. Cheers, thanks for that.. now i just need to get a few more followers than twitter (currently i have about 3 lol)

    Ta

    Joe´s last blog post: Extreme Element – 10% off sale site: [site]

  12. Thanks Limeshot! Lovely designs, one now on my own blog, and thanks for the instructions, crucial to my success…

    Will be back!

    Pen

  13. Quite a useful post for people new to blogging especially. I like the look of these badges. :) Much more aesthetically pleasing than the stock Twitter widget.

    Erik´s last blog post: Taylor Vaifanua site: [site]

  14. Stemulite says:

    Thanks a lot for the step-by-step instructions. My son got me started on blogging (and Twittering), but all I know how to do it type. For everything else I need lots of help. This post was great. Thanks again.

  15. Deborah says:

    Thanks so much for walking this newbie through it! I would have given up long ago had you not held my hand. And, the badge looks great. Now I need to figure out how to get the rest of my blog to look as good as the badge!

    Cheers!

    Deborah´s last blog post: The mile high family site: [site]

  16. Does it help much to get more people follow you on Twitter when you have “follow me” badge on your blog ?m

  17. Alex says:

    Very useful post! Might I just add that you would do a lot more with those badges by using the following code:

    {a href=”http://www.twitter.com/limeshot”}{img src=”http://www.yourdomain.com/images/twitterbadgename.png” border=”0″}{/a}

    What this does is it allows you to make the image clickable to go directly to your twitter account (in this case you need to change the YOURWTITERNAME part to your actual twitter account, such as http://twitter.com/limeshot

    The ‘border=”0″‘ code ensures that you do not have any kind of blue (or whatever your default link colour is) outline around the image.

    Thanks again for your post, hope I could add a little towards more functionality :)

    Alex´s last blog post: Upgraded to WordPress 2.7! site: [site]