How-to: Add retweet button to your Blogger posts

As Etsy sellers we all know the power of social media representative called Twitter. Have you ever noticed that small button which appears on various blogs and encourages you to retweet an article or blog post?
Here's a short guide how to add "Retweet" button to your blog. Read more >>



A word about TweetMeme
TweetMeme is a service which aggregates all the popular links on Twitter to determine which links are popular. TweetMeme categorises these links into Categories, Subcategories and Channels, making it easy to filter out the noise to find what you're interested in.
Thanks to them you can automatically see how many times your post was retweeted. Whenever someone uses these buttons to retweet one of your post, the number of tweets displayed increases. TweetMeme offers you two types of buttons - standard and compact one:

Standard: Compact:

If you want to find more about the way TweetMeme works go to www.tweetmeme.com/about

How to add a standard button to your Blogger posts

1. Go to Layout > Edit HTML > Expand Widget Templates
2. Press Ctrl+F > search for "<p><data:post.body/></p>" in your HTML code
3. Add following code:

<p><data:post.body/>
<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'YOUR_TWITTER_USERNAME'; </script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script> </div> </p>

This code will add the standard button on the right side at the end of each post.
If you want to add the button in any other place in your post, just use following code:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'YOUR_TWITTER_USERNAME';
</script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script> </div>

How to add a compact button to your Blogger posts

1. Go to Layout > Edit HTML > Expand Widget Templates
2. Press Ctrl+F > search for "<p><data:post.body/></p>" in your HTML code
3. Add following code:

<p><data:post.body/>

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_style = "compact";
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'YOUR_TWITTER_USERNAME'; </script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script> </div> </p>

This code will add the standard button on the right side at the end of each post.
If you want to add the button in any other place in your post, just use following code:

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

REMEMBER TO SAVE YOUR CHANGES and Voila!
When you click one of the buttons you will get a pop-up asking you to connect TweetMeme to Twitter (just once) and then you will see the dialog box where you can edit your tweet. It should look similar to this:


RT @casadiaries Set of 4 bamboo sticks coasters http://is.gd/aouJH