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:
Button size:
Language :
Float:
Show for:
Preview and code
<b:if cond='data:blog.pageType != "static_page"'><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='blogger_Raju' data-related='blogger_Raju' data-size='medium' data-lang='nl'>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 blogger_Raju 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 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='"http://twitter.com/share?url=" + data:post.canonicalUrl + "&text=Currently reading: " + data:post.title + "&via=blogger_Raju"' 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:
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
This post has been last updated on July, 2012.
