Add Twitter Official Tweet Button with Counter to Blogger

Twitter has released their official share buttons with counters. In this tutorial we will discuss on how to add this Twitter Tweet button to Blogger.

Update on 5/2012: In this new tweet button, you can customize the look, mention yourself and can also mention related twitterer whom you may want to be followed by others. So have a look at the live example below by tweeting it.

Adding Twitter Button to Blogger

Step 1: Go to Blogger’s Template tab, click “Edit HTML” and tick “Expand widget Templates”.

Step 2: Find closing </body> tag and before it add:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

I have selected to add the Twitter script before closing body for performance and to avoid multiple loading. For example, it is not needed to load the JavaScript API for every buttons shown on a single page, or, if you want to show both Tweet and Twitter Follow buttons.

Step 3: Find <data:post.body/> and immediately above or below it (or both) add any one of the code mentioned below.

Tweet Buttons for Blogger

Start by typing your USERNAME:

Vertical button

Tweet

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='vertical' data-via='blogger_Raju' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>
</b:if>

Show for:

Horizontal button

Tweet

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='horizontal' data-via='blogger_Raju' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>
</b:if>

Tweet Button with No Count

Tweet

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<a class='twitter-share-button' data-count='none' data-via='blogger_Raju' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>
</b:if>

Official Tweet button as Text Link

In the official page of tweet button you will find that there are different button styles and all of them uses the Twitter JavaScript API. If you want to use text only link to share your tweet without any use of the script, then try this one.

<div id='tweet-button'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.canonicalUrl + &quot;&amp;text=Currently reading: &quot; + data:post.title + &quot;&amp;via=blogger_Raju&quot;' target='_blank'>Tweet</a>
</div>

For twitter text link, you may want to add some style to it. So find for ]]></b:skin> and above it add:

#tweet-button a {
display: inline;
padding: 2px 5px 2px 20px;
background: url(http://twitter-icon.png) 1px center no-repeat;
border: 1px solid #ccc;
}

Here is an example which can be also used to add sharing icons below Blogger posts:

Tweet

Remember that you don't need any JavaScript.

Step 4: Save your template.

Customizing Attributions

While adding your Twitter button you would like to change some attributions. Let's have a look at these:

• data-url – It’s the URL of your post which will be fetched automatically. Don't modify anything here.
• data-via – This is where you should be using your username. Replace blogger_Raju with your twitter Username.
• data-text – This is usually the title of the post.
• data-related – It will add any related user.
• data-count – The type of button you want to have.
• data-size - It controls the size of the button. Example:
  Tweet

  <a class='twitter-share-button' data-count='horizontal' data-via='blogger_Raju' data-size='large' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>

Points to note:

Conditional tag marked in blue is used to show this button on homepage and every other page excluding static pages. If you want to show it on post pages only, then use:

<b:if cond='data:blog.pageType == "item"'>
{Tweet button code goes here}
</b:if>

Otherwise, delete it. That’s all folks.