Few days back, i wrote a post about a Twitter badge, that looks like Uservoice’s Feedback button. However, there were certain limitations in using it :

• The image is hosted on their server, not yours.
• It includes a small “?” link that leads back to their website.
• It relies on Javascript. Won’t work if javascript is disabled.
• Limited to the texts “Follow us”, “Follow”, “Follow Me” and “My Twitter”

When Mike left a comment asking if it was possible to get the image hosted on our site, i decided to write a quick tutorial on how to put such a badge on your site without relying on external site.

Personally, I hate to follow tutorials without knowing the outcome. So, check out the DEMO to see what you’ll be creating.

Step 1 : The Markup

The markup is really simple. Just link your image to your twitter account and wrap it inside a div with an id, as follows :

<div id="twitter-badge">
	<a href="http://twitter.com/shrihari"><img src="twitter.jpg" alt="Twitter" /></a>
</div>

That code should go just before the closing body tag : </body>.

Step 2 : The CSS

The CSS is also amazingly simple. Firstly, you need to make sure the an image with a link has no ugly border around it. If you’re using Wordpress, chances are high that your theme author has already done this, unless you’re using some spammy theme. Next, you need to fix the position of the image.

img, a img { border: 0; }
#twitter-badge
{
	position: fixed;
	left: 0;
	top: 200px;
}

If you want the image on the right side, you’ve to replace left: 0; with right: 0;

Check out the demo here. If you’ve any questions feel free to drop them in the comments.