Tweetmeme.com, no doubt provides one of the best twitter badge for our blog! Just enter a piece of JavaScript code on your blog template and bingo! A nice little twitter button on your web-page and blog with twitter count and direct twitter link with bit.ly shortened URL.
But unlike wordpress, in blogger we need to add the code manually! Although there has been a previous discussion on adding all social bookmarking badges at once, I though of extending the discussion on adding tweeter badge properly on Blogger blogs. So after adding the code you will get twitter URL like
RT @swashata Optimize the date of Blogger template to look better [below the post title] and also be… http://bit.ly/iTKe2 (via @tweetmeme)
instead of
RT @tweetmeme Optimize the date of Blogger template to look better [below the post title] and also be… http://bit.ly/iTKe2
The first one sounds cool as it gives a touch of your brand through your twitter profile and you can also get many followers through this! Note that in WordPress this can be easily done through the tweetmeme plug-in. But in blogger we need to modify the JavaScript code a little bit to achieve what we are going to discus below…
Adding the code on Blogger template and aligning it as per your need
- As usual go to Blogger Dashboard > Layout > Edit HTML and click on “Expand Widget Template”
- Now back up the template and do the following modifications as per your need!
Adding the code above/below the post, aligned right:
Find the following code on your Blogger template:
<data:post.body/>
Now just above this code add exactly the following piece of code:
<div style='float: right; margin: 3px 0 5px 5px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'TWITTER-PROFILE-NAME';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>
Replace the TWITTER-PROFILE-NAME with your twitter profile name. Like for me it is “swashata”.
Preview the template. If you have done this correctly then you should see the badge similar to the screenshot above. Save it and you are done!
Similarly for adding it below the post body then add the same code below
<data:post.body/>
and you are done!
Adding tweetmeme badge along with other social bookmarking buttons:
For this prefer to our previous post on Adding all social bookmarking icons. You need to place the code after(next line)
<data:post.body/>
like this:
<table border='0' cellpadding='0' cellspacing='0' style='width: 100%;'>
<tbody>
<tr>
<td style='text-align: center; vertical-align: bottom;'>
<a class='linkopacity' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' src='DIGG IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='Technorati IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' src='del.ico.us IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumbleupon' src='Stumbleupon IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='Reddit IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Furl' src='Furl IMAGE URL'/></a>
<a class='linkopacity' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'><img alt='Yahoo' src='Yahoo IMAGE URL'/></a>
</td>
<td style='text-align: right; vertical-align: bottom;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'TWITTER-PROFILE-NAME';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</td>
</tr>
</tbody>
</table>
Obviously you need to change the IMAGE URL with the respective icons and TWITTER-PROFILE-NAME with your Twitter Profile.
Play with the code a little bit and inset where ever you want! The basic code of the tweetmeme badge is
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'TWITTER-PROFILE-NAME';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
Put it where-ever you want and align using div and style attribute. To know more on div and its associated style attributes you may read this post!
So I hope you have liked this and have put your brand on your tweetmeme badge. For any assistance, feel free to ask us! Also do let us know if you have any better alternative of this badge!
