Add a Tweet It or Retweet Button to Your Blog

Along with Digg It and Stumble It, one important social networking button most people search for, is of course a Tweet It or a Retweet button.

In this tutorial you may select any or both of them.
The Retweet button is available in two different sizes, to add any of the buttons, you need to follow these instructions:

Log in to Blogger, go to "Layout" -> "Edit HTML" and mark the "Expand Widget Templates"
Find (CTRL+F) this code in the template:

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

And immediately BELOW/AFTER that, paste the code for the widget (copy whichever code you like from the post below).

A bigger "Digg It" like button:

Code:

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

---

Add a smaller one:

Code:

<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

---

Although these buttons look quite professional but when visitors use these buttons to Retweet, then the RT will belong to @TweetMeme and not to you (author of the article).
So I would prefer adding a "Tweet This" button, instead of Retweet, where you have the additional advantage of using any twitter image/icon.

Here's the code you need to add to your template, for a Tweet This button:

<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src='http://i45.tinypic.com/2wdaoad.jpg' width='64'/></a>

And it will be displayed like this:



You may change the twitter icon in the above code. You can freely use these free twitter icons:

| |

Follow @BloggerStop at Twitter for more such updates !

*UPDATE: Now there's another Retweet button available to you which will allow your readers to tweet your posts and it will show RT @YOUR_TWITTER_PROFILE but it will also display (via @Tweetmeme)

Here's the code for this widget:

<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'YOUR_TWITTER_ID';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Replace "YOUR_TWITTER_ID" with your own Twitter profile, in the code above.

UPDATE 2:
To show these widgets only in published post pages and NOT in homepage, add the code like this:

<b:if cond='data:blog.pageType == "item"'>
CODE FOR RETWEET or TWEET WIDGET
</b:if>

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts