Add twitter retweet button to blogger

Learn how to add tweet retweet button and counter to every post on your blogspot blog and show the number of times your posts have been linked on Twitter and let readers retweet. Here you will find guide how to add retweet button to the top or a bottom of your posts and how to align retweet button on left or right side of your posts. You can choose one of three retweet counters (tweetmeme, backtype and topsy) described in this article. You will also find advantages and drawbacks for each one of those three retweet counter services.

Tweeter button looks like this button on the picture below:

Retweet buttons

You can choose one from various Retweet button counters. In this section you can find short description and demo of three most popular retweet buttons. Here you can also find code needed to paste inside blogger template to implement retweet button for each post in your blogger blog.
One option is to give visitors option to tweet your post from AddThis button.

Tweetmeme

In my opinion Tweetmeme is most popular retweet counter service on the internet.
Sample:

Advantages:

• when retweet is clicked small popup window is open, after retweet is done counter is automatically updated without reloading web page


• Tweetmeme is very popular


• can be customized with parameters

Drawbacks:

• visitor who tweet visited page with Tweetmeme for first time is asked to connect TweetMeme and Twitter together, this can turn off some vistors to tweet your post

Code for one retweet button per post page on blogger:

<script type='text/javascript'>
tweetmeme_source = &#39;[TwitterUserName]&#39;;
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

You should replace [TwitterUserName] with your twitter user name and code is ready to paste in Edit Template. For further instructions where to put code go to section Where to add Twitter button code.

Backtype retweet counter service

Demonstration:

Advantages:

• easy to implement, no need for define url parameter for individual posts


• link directly to twitter, no need for approving connect twitter with some other application


• appearance can be changed with parameters tweetcount_background and tweetcount_border

Drawbacks:

• less popular then Tweetmeme


• without automatically refreshing counter like with Tweetmeme, when retweet is clicked twitter is opened instead of page with retweet button (this can be changed with parameter tweetcount_links)

Code for retweet counter on every post page at your blogger blog:

<script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>

Topsy retweet button
Demo:

Advantages:

• nice design


• link directly to twitter, no need for approving connect twitter with some other application


• find samples and help here

Disadvantages:

• tweet counter will not be automatically refreshed


• less popular then Tweetmeme

Code for retweet button on each post in your blogspot blog:

<script type='text/javascript'>
     var topsy_nick = &#39;[TwitterUserName]&#39;;
     var topsy_style = &#39;big&#39;;
     var topsy_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://cdn.topsy.com/button.js' type='text/javascript'/>

Replace [TwitterUserName] with your user name and you can paste this code in your blogger template to add retweet button in every post.

Where to add Twitter button code

You can add tweet button on the beginning of every post or on the bottom of every post. In HTML layout search for <data:post.body/> and paste the code just before if you want to have twitter button on the top of the post or after it for twitter button on the bottom of the post.

Here are step by step guide to add Retweet button counter to blogger:

• Go to Layout in your blogspot blog


• Click on Layout --> Edit HTML


• it is recommended to backup template on local hard disk before doing any change in edit template box


• check on Expand Widget Template checkbox


• find <data:post.body/>


• for Retweet button counter on the top of post add Retweet button code (for code check previous section of this article) before <data:post.body/>
  
  

  ...
  
  [TWITTER BUTTON CODE]
  <data:post.body/>
  ...
  



• or you can want Retweet button on the end of your posts, add Retweet button code just after the <data:post.body/>
  
  

  ...
  <data:post.body/>
  [TWITTER BUTTON CODE]
  ...
  

How to align Tweeter button counter left or right

To align your twitter button left use this code:

<div style='padding: 4px; float: left;'>
[TWITTER BUTTON CODE]
</div>

Code needed to align your tweeter button counter right:

<div style='padding: 4px; float: right;'>
[TWITTER BUTTON CODE]
</div>

Sample of code needed to add Tweetmeme to blogger on top of every post right aligned:

...

<div style='padding: 4px; float: right;'>
  <script type='text/javascript'>
  tweetmeme_source = &#39;[TWITTERUSERNAME]&#39;;
  tweetmeme_url = &#39;<data:post.url/>&#39;;
  </script>
  <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>

<data:post.body/>

...

Put code before <data:post.body/> and replace [TWITTERUSERNAME] with your Twitter user name.

And for the end here are one more sample for Backtype retweet counter on bottom of each post on blogspot left aligned:

...

<data:post.body/>

<div style='padding: 4px; float: left;'>
  <script src='http://widgets.backtype.com/tweetcount.js' type='text/javascript'/>
</div>

...