Twitter tweet button for your Blog, Website and Browser

Hi! Everyone, hope you all are fine.

In this post I am going to tell you how you can use Twitter's new twit button in your blog or website. You might have show many retweets button from 3^rd party service (like: tweetmeme). But twitter have official bought there retweet button in 3 sizes (Vertical count: 55x62 px, Horizontal count: 110x20 px and No count: 55x20 px).

You can use this retweet button in 3 different ways.

1. By using JavaScript

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a>

2. By using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

3. By customizing your own retweet button

<a href="http://twitter.com/share">Tweet</a>

For WordPress.com Users
In Word Press you can only use tweet button in Horizontal size (110x20 px)

1. Login to your wordpress.com (wp) account

2. Go to the following blog in which you want to place your tweet button

3. Now go to Appearance --> Extras

4. There you will see few tick box option

5. In that you will see its written Show a Twitter "Tweet Button" on my posts.

6. Tick that box then click on Update Extras »

7. And it's done

8. Now you will see the tweet button in the bottom of your wp blog post

For Blogger Users

1) Login to your Blogger.com account

2) Go to Design --> Edit HTML --> then click on Expand Widget Templates for the following blog in which you want to use tweet button

3) Search for the following code (to bring the browser search box press Ctrl + F or F3)

a) If you want to use it before post and after title

<p class='post-header-line-1'>

b) If you want to use it after post ends

<data:post.body/>

4) Place the code just after the above code

<b:if cond='data:blog.pageType == "item"'>
  <div style='float:right; padding:10px;'>
    <a class='twitter-share-button' data-count='vertical' data-related=Jajodia_Saket:Tecko Blog...' data-via='SaketJajodia' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
  </div>
</b:if>

5) Things you might need to change

a) If you want to show this tweet button in home page then remove the following codes

<b:if cond='data:blog.pageType == "item"'>
</b:if>

b) Change or remove as per your suitability

style='float:right; margin-left:10px;'

If you want to change it then

In style change right to center or left

In padding change 10 to any number as you feel suitable with your template

c) If you want to change the size

data-count=' data-count='vertical' '

Change vertical to horizontal or none as you feel suitable

d) Change SaketJajodia with your twitter username

6) Here is one more plain and simple tweet button you can use

<style media='screen' type='text/css'>
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a0.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id='custom-tweet-button'>
  <a rel='nofollow' expr:href='"http://twitter.com/share?text=" + data:post.title + " &via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog... "' target='_blank'>Tweet</a>
</div>

Change the SaketJajodia with your twitter username

Note: Before editing your template, 1^st backup your template for safe side, by clicking on Download Full Template in Edit HTML page

To add in self hosted website
To add in self hosted website

1) Go to the page where you can have access to edit you website HTML

2) Now find the place where you want add tweet button

3) Now place the following code as per your suitability

a) Using JavaScript

<a rel='nofollow' href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SaketJajodia" data-related="Jajodia_Saket:Tecko Blog">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

i) To add the Horizontal count: 110x20 px

Change vertical to horizontal

ii) To add the No count: 55x20 px

Change vertical to none

b) To add the plain and simple tweet button

<style type="text/css" media="screen">
  #custom-tweet-button a {
    display: block;
    padding: 2px 5px 2px 20px;
    width:40px;
    background: url('http://a4.twimg.com/images/favicon.gif')left center no-repeat;
    border: 1px solid #ccc;
  }
</style>
<div id="custom-tweet-button">
  <a href="http://twitter.com/share?text=&via=SaketJajodia&related=Jajodia_Saket:Tecko%20Blog..." rel='nofollow' target="_blank">Tweet</a>
</div>

c) Using iframe

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html" style="width:130px; height:50px;"></iframe>

4) Change the SaketJajodia with your twitter username

To customize your own tweet button
You can customize your own tweet button using this link http://twitter.com/share
For more info Click here.

For Chrome users

To use tweet button in your Google Chrome browser, you can use a Chrome extension by Shareaholic. It works as the Twitter tweet button works and it also shows how many tweets have been done in the following page.