Top Menu

Sunday, August 4, 2013

How to Add Tweet Button For Blogger

Twitter a social networking and microblogging service, enabling its users to send and read messages called tweets.
Twitter has already released the tweet button officialy on twitter site. This is a step-by-step guide to automatically place a real-time Tweet count and button to every single blogger post.

To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" checkbox.

Step 2:
Now find (CTRL+F) this in the code:

<data:post.body/>
Vertical Count Button:


Case 1:

To place the vertical tweet button at the top right corner of your post paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
NOTE: To change the button position from "Top-Right" to "Top-Left" just interchange the text market in green. Check it in Case 2.

Case 2:


To place the vertical tweet button at the top left corner of your post paste this code before/above it :

<div style='float:left; margin-right:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you

Case 3:

To place the vertical tweet button at the end of your post paste this code after/below it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you

Horizontal Count Button:


Case 4:


To get this paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
NOTE: To place the vertical tweet button at the end of your post paste this code after/below it :

No Count Button:

Case 5:

To get this paste this code before/above it :

<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="TWITTER-USERNAME">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

NOTE: Enter your TWITTER-USERNAME written in bold red to show its shared via you
This will put a Tweet button to every post. You are therefore not able to choose which post you want to include or exclude a button.

No comments:

Post a Comment