Add Twitter Official Tweet Button to Blogger

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

In this new Tweet Button, you can customize the size, mention yourself and can also mention related Twitter user whom you may want to be followed by others. So have a look at the live example below by tweeting it.

Tweet Button for Blogger Posts

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>

The JavaScript API should be added once, it is not needed to load it for every button shown on a single page, for example, if you want to have both Tweet and Twitter Follow buttons.

Step 3: Find <data:post.body/> and above or below it (or both) add the code below after generating it.

Button options

Your username: 

Recommend: 

Button type:  vertical horizontal none 

Button size:  medium large 

Language :  Arabic - العربية Danish - Dansk Dutch - Nederlands English Filipino - Filipino French - français German - Deutsch Hebrew - עִבְרִית Hindi - हिन्दी Hungarian - Magyar Indonesian - Bahasa Indonesia Italian - Italiano Japanese - 日本語 Korean - 한국어 Norwegian - Norsk Polish - Polski Portuguese - Português Russian - Русский Simplified Chinese - 简体中文 Spanish - Español Swedish - Svenska 

---

Float:  None Left Right 

Show for:  All pages except static pages Post pages only Every page 

Preview and code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: none;'>
<a href='http://twitter.com/share' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-count='vertical' data-via='kulzrua' data-size='medium' data-lang='en'>Tweet</a>
</div>

</b:if>

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-via – This is where you should replace kulzrua with your Twitter username.
• data-related – It will add suggested user on Twitter.
  • You can add multiple related users separated using a comma.
  • To add summary of the related user, you can add some text after their screen name, separated by a colon.

    data-related='blogger:The Official account,twitter'

  • If you don't want to add any suggested/related account then leave this field blank.
• data-count – The type of button you want to have, values are ‘vertical’, ‘horizontal’ and ‘none’.
• data-size - It controls the size of the button. Values are ‘medium’ and ‘large’.
• data-lang – The language for the button.

Tweet button as Text Link

In the official page you will find that all Tweet Buttons uses the Twitter JavaScript API. If you want to usetext 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=kulzrua&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:

• I have selected to add the Twitter script before closing body for performance.
• If you want to use Twitter share as link only then you need not to add the JavaScript

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →