Add Twitter Retweet Button to Blog

Did you know that Twitter can help drive traffic to your Blogspot blog? In today's Blogger tutorial I show you how to add a free Twitter Retweet button to your Blogger posts. Adding a Tweetmeme Twitter Retweet button to Blogger will help promote your blog on Twitter in 2 ways: one by attracting new Twitter followers and two by increasing the direct traffic to your blog from Twitter.

What is Twitter and How Does it Work?
Twitter is currently the fastest growing free social networking site. Essentially, Twitter users micro blog about what they are doing or what others are doing by posting tweets of around 140 characters to Twitter. When Twitter members read these tweets and like what they read they can become followers much in the same way that your readers can choose to follow your blog.

Twitter is great news for bloggers because it can be used as a vehicle to promote blogs. Blogger can easily be linked with Twitter services so that every time a post is made to Blogger a short message with a link is posted on Twitter. As every follower is notified that you have tweeted, a blog publisher can gain lots of exposure for their blog with very little effort. 

Once you add Tweetmeme retweets to the mix the spread compounds because not only do you have followers hearing about your tweet but the followers of followers. So say one of your followers retweets your post all that person's followers hear about it too and pretty soon a tweet plus your retweets can popularize a post to the point that it spreads so widely that it goes viral. 

Advantages of a Twitter Retweet Button
A Tweet/Retweet button looks similar to and behaves like anintegrated Digg button  but it counts retweets rather than diggs. A Retweet button counts reposts of a tweet so that readers can see at a glance how popular your article is on Twitter. Another benefit of the Retweet button is that it allows your blog readers to retweet your post so that their followers hear about your post too. 

How to Add a Twitter Retweet Button to a Blogger Blog (Blogspot Blog)

The following instructions will place a Tweetmeme Retweet button into all of your blog posts.

1. Login to Blogger if not already logged in
2. From the Dashboard navigate to Layout > Edit HTML
3. Check the Expand Widget Templates button
4. Back up your Blogger template by clicking on Download Full Template as a precaution
5. Using CTRL + F find the following code:

   <div class='post-header-line-1'/>

6. Directly after the above line paste the following code depending on which Retweet button and position you prefer:
   Large Retweet Button - Right Aligned
   

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

   
   
   
   • Large Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

   • Compact Retweet Button - Right Aligned
     

     <div style="float:right;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

   • Compact Retweet Button - Left Aligned
     

     <div style="float:left;padding:4px;">
     <script type="text/javascript">
     tweetmeme_style = 'compact'; 
     tweetmeme_url = '<data:post.url/>'; 
     tweetmeme_source = 'your_twitter_user_name';
     </script>
     <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
     </script> </div>

7. 
   
8. Change your_twitter_user_name for your actual Twitter username. For instance I would enter BlogWizz
9. Click on Save Template
10. Click on View blog to admire your Tweetmeme Retweet button in your Blogger posts

Tips and Troubleshooting

• To Add Retweet Button Below Blogger Post
  If you want the button to appear at the bottom of Blogger posts instead of just below the post title locate the first instance of the following code and then paste the code for your chosen button immediately after this line: (don't forget to change your Twitter username as in Step 7)

  <data:post.body/>

• To Have the Retweet Button Appear on Post Pages Only in Blogger
  If you want the button to only appear on the post pages and not the home page you will need to enclose the button code in an if statement. See below for an example of what the full code would look like with this extra code.

  <b:if cond='data:blog.pageType == "item"'>
  </b:if>

  
  Thus the full code for a right-aligned large Retweet button which only appears on the individual post pages and not the home page would be:

  <b:if cond='data:blog.pageType == "item"'>
  <div style="float:right;padding:4px;">
  <script type="text/javascript">
  tweetmeme_url = '<data:post.url/>'; 
  tweetmeme_source = 'your_twitter_user_name';
  </script>
  <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
  </script> </div>
  </b:if>

In this tutorial you have learned how to add a Tweetmeme Retweet Button to your Blogger posts. The Retweet button will encourage your blog readers to retweet your content on Twitter thereby increasing your blog traffic. I have provided the code for both a large and compact button with the option of left or right alignment. The button appears just below the post title and counts the number of retweets of your Blogger post. I have also included details of how to add the Tweetmeme Retweet button to the foot of your Blogger blog and how to add the button to post pages only.

Tweet