12 August 2009

Adding Retweet Button to Blogger

Been trying to add Tweetmeme's retweet button to my blogs for weeks. Went to various online sources and sometimes I could get it to work. However, it would never be placed where I wanted it (in the body of the post, top-left), or the URL was to the whole blog not to the individual post, or the URL was too long, or the Twitter account for the retweet was 'tweetmeme' not my own account.

The problem was getting it to work in Blogger. Well, finally figured it out.

If you're using Blogger and want to add the retweet option, do the following:

  1. Go to your Dashboard -> Layout -> Edit HTML
  2. Before going further, click Download Full Template - if you screw up, you can upload the old template
  3. Check the box beside 'Expand Widget Templates'
  4. Click Control/Command 'F' to find the following line:

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

  5. Immediately below it, paste the following code:

    <div style='float:left;width:50px;margin:0 10px 10px 0;'>
    <script type='text/javascript'>
    tweetmeme_url = &#39;<data:post.url/>&#39;;
    tweetmeme_source = &#39;
    yourTwitterAcctName&#39;;
    tweetmeme_service = &#39;
    yourPreferredShortURLService&#39;;</script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
    </div>

Here's what my code looks like, with the lines already in the template in black:

<div class='post-header-line-1'/>
<div style='float:left;width:50px;margin:0 10px 10px 0;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
tweetmeme_source = &#39;
tidewaters&#39;;
tweetmeme_service = &#39;
bit.ly&#39;;</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>

<div class='post-body entry-content'>

EDA: If you're using NoScript on Firefox, enable tweetmeme.com.


Recommend this post