Thursday, August 26, 2010

How To Use the New Twitter Retweet Button in Blogger

After the release of the new native retweet button from twitter it is better to use this one than the old tweetmeme retweet button, since tweetmeme themselves recommend using the new native button from twitter now.

retweet

Inserting the code provided by twitter (http://twitter.com/goodies/tweetbutton) directly into your template will not work on your blog home page, since all the tweet counts will have the number of tweets mentioning the home page and not each post, hence the problem. To solve it, you can customize the button as follows.

Tweetmeme used to use Javascript for customization, but twitter offer a new way to do this, by inserting directly data as attributes for the html button. You can insert the code wherever you want inside the <b:loop values='data:posts' var='post'> element.

Twitter retweet for Blogger
  1. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  2.     <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"
  3.     expr:data-url="data:post.url"
  4.     expr:data-text='data:blog.pageTitle + ": " + data:post.title'>Tweet</a>
  5.     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  6. </b:if>
  7.             
  8. <b:if cond='data:blog.pageType == &quot;item&quot;'>
  9.     <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"
  10.     expr:data-url="data:post.url"
  11.     expr:data-text="data:blog.pageTitle">Tweet</a>
  12.     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
  13. </b:if>    

If you don’t know where to put the above code, search for <b:include data='post' name='post'/> and insert the code before this element to show the retweet button at the top of each post, or after to show it at the end of each post.

Here we are inserting the same code proposed from twitter and customizing the data-url and data-text so that the url for each retweet button is the one of the blog post itself and not the home page, and the text is the tile of the page alone if we are viewing a specific post, or the title of the blog plus the title of the post if we are viewing the homepage.


blog comments powered by Disqus