Friday, August 13, 2010

Tweet Button For Blogger By Twitter

Hi friends its good news by twitter that they released the official tweet button for doing tweets to our blog content and help more in sharing it on twitter.As previously we used the green retweet button on our blogs for making our readers to share our post with it.As the button was made by tweetmeme, but now they joined in hands with twitter and has released the tweet button officialy on twitter site.You can see tweetbutton live.

They have made it now more beautiful and still available in both vertical and horizontal styles with one more button added that is without count.Check the three buttons available below in picture.



Now i would like to tell you how to add these buttons to your blogger blog.

Just go to blogger Design > Edit Html and expand the widgets codes by chekcmark it.Press Ctrl+F and find for this code in blogger <data:post.body/>

After getting it just place the below codes after it,if you want button to have at beggining of post else place it after the code you found to have button at the end of the post.

For vertical button




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>


For Compact Button




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>


For Button without count




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>


Now just little bit about customizations in it.

1.Use the green starting and end lines only if you want to show buttons only on your post page else remove it.
2.Enter your TWITTER-USERNAME written in bold black to show its shared via you if not want remove bold text.
3.Some portion is marked red.Its just simple css to postion your button.Make it float left or right where you want and margin also from left or right of the post.

I am sure now you will be able to add these buttons to your blog easily.As you can get the codes for these official buttons here at twitter goodies.If you didnot like these official buttons by twitter you can also use these old retweet buttons by tweetmeme for your blog.

If you have any problems in adding these buttons to your blogger blog leave your comment here i will help you out.

No comments:

Post a Comment