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 3rd 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 (110×20 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
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 leftIn
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, 1st 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: 110×20 px
Change
vertical to horizontal
ii) To add the No count: 55×20 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.
If you have anything to tell about Twitter new tweet button please let us know. Even if you have customize your own tweet button.