How to Add ReTweet Button on BlogSpot Blogger Blogs

There is lots of blogspot/blogger blogs are using retweet button using API services from teweetmeme. I am not saying it’s no good, but I’d rather like to get it directly from Twitter itself.

The Tweetmeme services are really good, but it is still acting as a third party who is connecting my tweets and twitter. Retweet buttons can be customized every way possible except the colors as it’s being called directly from Twitter.

Positioning the Button
Positioning the button can be done using the CSS. In this example, I’ll be putting the button at top right of the article body, but with altering the CSS codes, you can also place it on top left, bottom left or bottom right.

Open your blog’s Dashboard and click on Design. Then Click on Edit HTML and ckeck the Expand Widget Templates. Scroll down to bottom and look for CSS codes. Copy the CSS codes below and paste it before ]]></b:skin> in your template. You can change the values in the CSS according to your placement needs. Use float:left if you want to place the button at the left of the article body.

#retweet-button {
 width:55px; /* width:110px; for horizontal count button */
 height: 62px; /* height:20px; for horizontal count button */
 float:right; /* float:left; for floting the button at left of article body */
 display:block;
 position:top;
}

Save the Template. You’ll be redirected to the same Edit HTML page after saving and we now need to place the javascript codes for the button.

Now, look for the piece of code “<p><data:post.body/></p>” in your template. This is the code which shows the article. Copy the code below and paste it between <p> and <data:post.body/>. This will show up the button at the top of the article. Paste it between <data:post.body/> and </p> to place the button bottom of the article body.

<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 can change the data-count value to “horizontal” to show a compact type button and “none” to disable the tweet count.

tweetbutton layout1 How to Add ReTweet Button on BlogSpot Blogger Blogs