SOCIAL:Different kind of tweet count buttons for blogs

Adding tweet count button or social sharing buttons on to your blog help your readers to tweet/share interesting posts onto their profile. Tweet button is that it will let the reader to follow you(and a related account) after he tweets your post.  

In this tutorial we will learn layout of different type of tweet buttons . Specially vertical and horizontal button and button with no count. This tutorial give you different codes for different buttons. Example you can place vertical button on top left of post page only or everywhere on blog else except static page. Get different kind of tweet buttons for your blog as follows:-

Different kind of Official Twitter buttons for blogger...

1. Top right/Left vertical count tweet count button for post pages/everywhere

If you want to place vertical tweet button on top right of all post then paste following code.. to move the button from right to left change the highlighted code below.. change btemplates4all with your twitter user name.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='vertical' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

To place tweet count button everywhere on blog then use these codes:

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='vertical' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

To place tweet button everywhere except static page use following codes:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='vertical' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

2. Top right/Left horizontal tweet count button for post pages/everywhere

If you want to place horizontal tweet button on top right of all post then paste following code.. to move the button from right to left change the highlighted code below..

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='horizontal' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

To place the tweet button everywhere on blog use following code..

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='horizontal' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

To place tweet button everywhere on blog except static pages use following code..

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='horizontal' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

3. Top right/Left horizontal tweet button (without count bubble) for post pages/everywhere

If you want to place tweet button without bubble count paste following code.. to move the button from right to left change the highlighted code below..

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='none' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

To place tweet button everywhere on blog then use following code:

<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='none' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

To place tweet button everywhere on blog except static page then use following code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float:right;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title' data-related='btemplates4all:Tutorials and Widgets for Blogger' data-count='none' data-via='btemplates4all'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>
</b:if>

I have tried to explain deeply but missed something please post comments below. If you liked the post then plz consider sharing with friends.

Kindly Bookmark this Post using your favorite Bookmarking service: