Add Twitter Tweet Button To Blogger

Tweet

Twitter is one of the largest social media company in the world and they has released their official share buttons with counter. In this tutorial we will discuss on how to add this Tweet Button to Blogger. This button is an official button created by twitter developers and does not belong to a third party. As opposed to the retweet button this button loads quickly and does not disturb the load time of your website.

How To Add Twitter Tweet Button To Blogger?

Now let’s install the button:

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates.
4. Search (Ctrl + F) for following line of code in your HTML:

<data:post.body/>

5. Paste the below 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='YourTwitterUsername' 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. Save it.

Button configuration:

• Choose the type of button and follow recommendation by changing the value of the respective attributes in the code step 5.

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

Button repositioning:


The steps above positioned the button on bottom left of each post. You can change the position if you wish:

• Position it on top of post
Place the button code before <data:post.body/>, instead of after.
• Position it on the right
Change the float in the code from left to right.