Wednesday, December 16, 2009

Tweetback Button Inside Post

I didn't touch my Twitter account for months, was not aware that it could be used to promote a new posting to fellow users, and didn't know that it could also be used to measure a posting popularity, until the day I found out that the Indonesia Matters has changed its blog ranks criteria to include Twitter Back Tweets. I decided to learn more about this stuff. My Twitter password needed to be reset since I forgot already what it was, and did a search about back tweet, and got a useful information on how to add a tweetback button for Blogger blog.

It's fun to modify blogger template, and it may improve the blog's rank as well. The good thing about a higher rank is that it gives more exposures to a blog to would be visitors which hopefully will increase traffic. Whether the visitors will be back again, it depends on the quality and relevance of the contents to the visitors.

The first useful posting I found was at BloggerStop, and then I found another useful article at BloggingTips. This posting is based on the article at the BloggingTips, with a minor modification on the button position.

Here are the steps to follow to add a Tweet Button with counter at the top left of your Blogger posts:
  1. Go to Layout, Edit HTML, click "Download Full Template" to backup your template
  2. Check "Expand Widget Templates" box, and find the following codes:

    <div class='post-body'>

    If you have modified your template, don't look for the whole phrase, look for <div class='post-body' without the > code
  3. Copy below codes and paste it immediately after the line:

    <span style='float: left; margin: 5px 10px 5px 0px;'><script type='text/javascript'>
    tweetmeme_url = '<data:post.url/>';
    </script>
    <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script></span>
  4. Preview your template, and if you are satisfied with it, hit "Save Template", and you are done.

If you want the Tweetback and Re-Tweet button at the end of each post, follow the steps below:
  1. Go to Setting, Formatting, scroll down to find Post Template
  2. Copy below codes, and if you have other templates inside the box, paste it with a sequence you want:

    <span style="margin: 0pt 0pt 5px 5px; float: right;"><script type="text/javascript"><br/>tweetmeme_url = '<data:post.url/>';<br/></script>
    <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script></span>
  3. Hit "Save Setting"

Hope you like it as much as I do.