Monday, October 5, 2009

Add Twitter Retweet Button to Blogger

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.

Forget the preamble and take me straight to the instructions to insert the Retweet button into Blogger

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 an integrated 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
      Retweet Button
      <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
      Retweet Button
      <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
      Retweet Compact Button - How to add to Blogger
      <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
      Retweet Compact Button - How to add to Blogger
      <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. Change your_twitter_user_name for your actual Twitter username. For instance I would enter BlogWizz

  8. Click on Save Template

  9. 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.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Tips to Add a Digg Button to Blogger Blogspot
Add a Twitter Updates Widget to Blogger
Add Twitter Button or Twitter Badge to Blogger
Add Twitter Followers Counter to Blogger
Add a Social Bookmarking Button to Blogger
Add Social Bookmark Buttons to Blogger
Best Free Social Bookmark Icon Sets for Blogger



Subscribe to Blog Know How by Email

16 comments:

HD said...

First I want to congratulate you for this amazing blog!
We Are Pleased To Announce The Launch Of Movies Gallery 09, Mobile Movies in 3gp format, Reality show, Upcoming Movies 09 Trailer, About Dubai,Real Estate, Tips Of Career And Many More. .

To start just go to http://www.whydubai.net

We hope you like it. Please send us any feedback and help us improve the sites further.

Tech Priest said...

Great post man !
works perfect

The Wizz said...

Thanks HD

The Wizz said...

Hey Tech Priest. Hope your readers make lots of use of your Twitter Retweet button

Tech Priest said...

With your help, I am sure they will :)
I also mentioned your Blog in some of my posts, just to show my gratitude.

The Wizz said...

Thanks Tech Priest. Links always appreciated :)

Peter said...

The retweet button is very useful if you want to send out updates about your blogs to your followers, but have no time to do so. All you have to do is click and it will send you update messages to your Twitter followers. It can also be useful in tracking the posts that you have made.

The Wizz said...

Thanks Peter. Good tip.

vikas singal said...

HI Mate..

I am following your blog from quite a good time now...thanx for such a wonderful blogpost..

But i do have a question...i have just installed the retweat button on my blog : http://expert-opinion-on-movies.blogspot.com

But it seems its not working ..means i am not able to retweat the post with it...

Kindly help me out..

The Wizz said...

Hi Vikas just took a look at your blog. Seems you have your retweet buttons working now. Let me know if you still need help :)

Fuzzy Slippers said...

Very helpful! Thanks so much :D

The Wizz said...

Fuzzy Slippers you are welcome! Hope to see you here again

Prasant Naidu. said...

thanks buddy for this post, really helps :)

hacker9 said...

finally added this on my blog,.. was searching for it on google,.. guess what ur blog was on the top of the list...thanks......

Habijabi said...

I love the html coding on blog.And thank you for the tips. One can also visit lee croucher facebook page

Wicked Innovation said...

Great post. This kind of article are useful. Twitter to blogger are helpful to your blog to increase your traffic.

Post a Comment