How to add a Custom Retweet Button

Liked the new retweet button that I added right to the ads above? You can add it too without using any plugin or any third-party javascript codes.

Twitter has its’ own system to generate retweet button and that’s exactly what we are going to use in this tutorial. Since the javascript is remotely hosted at Twitter, you don’t have to upload anything on your server.  Useful for bloggers who use blogspot or wordpress.com blogs.

Let’s choose the button
There are actually 3 layouts of the button. One is with no retweet count and other two has either vertical count or horizontal count.

ReTweet Button Layouts

Let’s Style and Position the Button
We can style and position the button using CSS. We should place the button where it attracts visitor’s attention. By far, the best position is top right corner of the article body.

The CSS below is for the vertical count button. You can alter the values for other layouts.

#retweet-button {
 width:55px; /* width:110px; for horizontal count button */
 height: 62px; /* height:20px; for horizontal count button */
 float:right;
 display:block;
 position:top;
}

Copy and paste the code in your CSS file.

Let’s add the code
Now it’s time to put the code in the webpage. Open the page you want to show the button in text editor and put the code below right before where your article begeins.

<div id="retweet-button">
<a href="http://twitter.com/share" data-count="vertical" data-via="w7b">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

You should edit some of the values to customize it.

data-count: put “vertical” for vertical count button, “horizontal” for horizontal count button and “none” for no count button
data-via: This user will be @ mentioned in the suggested Tweet. You can put your twitter username here. Or else, leave it as it is.

By default, it will tweet the Page Name as content and the URL will be shortened using twitter’s default URL Shortening Service t.co.

That’s all and you are done!!
I’ll be writing a brief tutorial on how you can add it in your blogger or wordpress.com blog in next few days, so stay tuned.