Twitter has just launched an official retweet counter button in collaboration with tweetmeme. This is a very good news for all bloggers who uses twitter to tweet their thoughts on twitter, and if you are running a blog then this new twitter button will allow you to easily share your blog posts and website pages with your followers. The Tweet count button shows how many times the URL has been Tweeted.

Now You can choose to display or hide the count box, or place it above or next to the Tweet Button with ease. You already have tweetmeme and the tweet counter green buttons as a small widget. I have already posted about Best Social Bookmarking Widget for Blogger which includes slick counter buttons, in that widget one is retweet button with counter. In this post we will learn how to add horizontal, vertical and simple retweet buttons in your blogspot blog.





Steps to Add Official Twitter Button in Blogger With Counter and Without Counter

Note: Before making any changes to your template, take a full backup of your blogger template.

#Step 1. Log in to your Blogger Dashboard and Navigate to Design > Edit HTML and checked the Expand Widget Templates Check box.







#Step 2.Now choose your Twitter button type from - http://twitter.com/goodies/tweetbutton page. Customize following options which are available currently.

• Button : Customize your button settings.


• Tweet text : This is the text that people will include in their Tweet when they share from your website:


• URL : Suggest a default Tweet for users.


• Language : This is the language that the button will render in on your website. People will see the Tweet dialog in their selected language for Twitter.com.

Choose Vertical count, horizontal or No count option, whichever suite best for your blog.



#Step 3. You can Recommend People to follow.





Recommend up to two Twitter accounts for users to follow after they share content from your website. These accounts could include your own, or that of a contributor or a partner.



#Step 4. Preview your button and Copy the code.





Demo code:



<a href="http://twitter.com/share" class="twitter-share-button" data-text="TWEET-TEXT" data-count="vertical" data-via="YOUR-TWEETER-USER_NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>



Your code should be look like the one i have given above.



#Step 5. Now in Blogger navigate to Design > Edit HTML Section and find this code in your template: <data:post.body/> and After getting it just place the below codes after it, if you want button to have at beginning of post else place it after the code to display button at the end of the post.



Twitter code for Vertical Counter 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-text="TWEET-TEXT" data-count="vertical" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



Twitter code for Horizontal & Sleek Counter 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-text="TWEET-TEXT" data-count="horizontal" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



Add below twitter code for Simple 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-text="TWEET-TEXT" data-count="none" data-via="YOUR_TWITTER_USER-NAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div>

</b:if>



#Step 5. Don't Forget to change YOUR_TWITTER_USER-NAME with your twitter username TWEET-TEXT with the text which you think should automatically add before each tweet made by users. and Save template and done!.



Official video from Twitter team for this Twitter share buttons:







What do you think about this new twitter buttons?, do you like it or not. Share your thoughts.

If you are using twitter - A micro blogging service, then you will be pleased to know the way how you can add retweet button or twitter counter button in your blogger blogs.



Here is a and different type of twitter badges and retweet counter buttons for you, i have explained in detail how you can add feedburner like twitter counter buttons and retweet counter buttons manually, as a widget in Blogger.







After integrating this Retweet button into your blog you can shows the number of retweets received by a single post or page of your blog or website.



Below here you will find different styles to display retweet, counter and twitter badges on your blog, choose best one which suites for your blog.



Style-1: Add a retweet counter on your posts with Tweetmeme.



Tweetmeme is a service which help you promote your blog by using the tweetmeme button, a simple and easy way you can integrate twitter into your blog and websites.

The result is a button like this:

If you want to add the tweetmeme button on your blogger template, follow this steps.



Steps to Add Twitter Retweet Counter Button:



Step 1: Go to your blogger dashboard.



step 2: Navigate to Layout > Edit HTML and checked the Expand Widget Templates Check box.







step 3: Find this line of code:



<div class='post-header-line-1'/>



and right before that line put this code and done:



<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>



Style - 2: Add a retweet counter on your posts with using Retweet.





You can quickly integrate this Retweet Button into your blog/website, which shows a button with a counter and just in some seconds using two lines of JavaScript code.



There are two versions of the button, big and small as given in below image:







Steps to add retweet button:



Step 1: Repeate step 1 and 2 as we have already seen in style-1 section.

Step 2: Find this code:

<b:includable id='post' var='post'>

<div class='post hentry'>

...and if you want to add the big button add immediately after the last row then use this code:



<script type="text/javascript">

url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>



If you want to put the smaller button then use this code and done:



<script type="text/javascript">

url = '<data:post.url/>';

size = 'small';

</script>

<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>



Style - 3: Twitter counter Badget and Follower Buttons using twittercounter.

To add this type of twitter counter image open twittercounter and enter your twitter username (Register first if required), configure Text color and Background color of the widget and Generate code.



There is a The bird button, which gives the added advantage of showing your full follower count and being more visible. More visible = more followers!



So what are your waiting for now? Just add any one of the retweet button and get track and increase twitter follower.



let me know your experience while using twitter on your blog, let me know in case of any difficulty.