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 one badge only
- Save them up on your computer;
- 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.
- Select the desired destination, e.g. a sidebar HTML widget and paste the following tag in:
<img src=”http://www.yourdomain.com/images/twitterbadgename.png”>
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, like I have done with mine, 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 – email me at ema at limeshot dot com with a bit more info and we’ll see if we can sort it out.
Rotating a selection of badges
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.
<img src=”/dropbox/2003/rotate/rotate.php” alt=”A Random Image” />
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!
Loading ...
(4.00 out of 5)
December 14th, 2008 at 8:18 pm
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]
December 26th, 2008 at 7:07 pm
Does it help much to get more people follow you on Twitter when you have “follow me” badge on your blog ?m
December 28th, 2008 at 3:41 am
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]
December 28th, 2008 at 8:07 am
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.
January 1st, 2009 at 7:49 pm
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]
January 4th, 2009 at 1:58 pm
Thanks Limeshot! Lovely designs, one now on my own blog, and thanks for the instructions, crucial to my success…
Will be back!
Pen
January 7th, 2009 at 11:08 am
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]
January 11th, 2009 at 7:32 pm
Very timely. I think these badges actually match my color scheme very well too.
January 13th, 2009 at 4:20 am
Thanks, I’ll try using this twitter badge in some of my blogs.
January 13th, 2009 at 9:09 pm
Thanks for the php for rotating badges. I’m going to try it out tonight.
Mark
January 27th, 2009 at 1:51 pm
“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.”