Add Twitter tweet button to Blogger posts

This time we will show you how to add the official Twitter tweet button to each Blogger post. This button will let people share your posts without leaving your blog, similar to the TweetMeme retweet button. However, it comes with a few additional features worth considering.

The one feature that I like most about Twitter tweet button is that you can choose to recommend up to two Twitter accounts for sharers to follow after they share content from your blog. These accounts could include your own, or that of a contributor or a partner. It’s a great way to promote your accounts and increase followers.

         Twitter recommending to follow the selected user

It will also automatically shorten the URL using Twitter’s t.co URL shortening service.

I have modified the button’s original code to make it detect the correct post URL and post title even when you click the button on a page that shows multiple posts i.e. home page, label or archive page.

Now let’s install the button:

1. Go to Dashboard > Design > Edit HTML.
2. Back up your template.
3. Tick the  Expand Widget Templates check box on top right of the HTML window.
4. Find the following line of code in your HTML, this is the code for your post content:

    <data:post.body/>

5. Paste the button code immediately below (after) that line:

   <!-- Twitter tweet button Start -->
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <div style='text-align:left;padding:5px 5px 5px 0;'>
   <a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='BloggerSentral' data-related='' href='http://twitter.com/share'>Tweet</a>
   <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
   </div>
   </b:if>
   <!-- Twitter tweet button End -->

6. Button configuration

   Choose the type of button  and follow recommendation by changing the value of the respective attributes in code line 4.

   Button type	Attribute	Value
   	data-count	vertical
   		horizontal
   		none
   Follow recommendation 1	data-via	Your Twitter username
   Follow recommendation 2	data-related	Second Twitter username

7. Button placement
   The steps above positioned the button on bottom left of each post. To change the button position,  do the following:
   • Position it on top of post
     Instead of after <data:post.body/>, place the button code before .
   • Position it on the right
     Change the text-align in line 3 from left to right.
   • To display the button in static pages as well, remove the conditional tag –in code line 2 and 7.
   • To display the button only on post pages, replace conditional tag in line 2 with this:
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
     and remove expr:data-text='data:post.title' in line 4.
8. Preview, you should see the button appear in each post.
9. Click Save if you like what you see.

Problem with apostrophes in post titles

As pointed out in the comments, there is a problem with post titles that use apostrophes –only the text before the apostrophe shows up, followed by a backslash.

From my observation, the problem is due to the inclusion of the expr:data-text='data:post.title' attribute. Removing this attribute should eliminate the problem.

However before you hit that Delete button, consider this: without the data-text attribute, you will encounter another problem –when you click the button on a multi-post page, it won’t post the post title. It uses the blog title instead, bummer.

Enjoy!