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:
Top Right
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:
Top Left

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:
End
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:

Top Right
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:
Top Right
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.

Check For More Social Share Buttons "How to add Linkedin Share, Yahoo Buzz, Reddit, Facebook Like, Delicious, Google Buzz, Stumbleupon, Digg, Retweet and Facebook Share buttons in blogger."

Comments