Twitter is one of the largest social media company in the world.If you have enough number of followers on twitter then every time tweet your new post on twitter and get the traffic.Today in this article we are going to show to How to add Twitter tweet button with counter for blogger ? Here we are giving code of all types of tweet buttons i.e. tweet button with vertical count,tweet button with horizontal count and tweet button without any count.We will add this button just below of every blogger posts for more traffic.

How To Add Twitter Tweet Button To Blogger?


Here we are giving all types of twitter tweet button choose anyone of them add add them just after below code.To find below code you need to "Tick the Expand Widget Templates" check box.Also take backup your template before making any changes.

<data:post.body/>

Tweet Button Styles

You can add tweet button in three styles :

  1. Vertical Count
  2. Horizontal Count
  3. Without Count

1. Vertical Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='helperblogger' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

2. Horizontal Count



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='helperblogger' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

3. Without Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='none' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='helperblogger' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

now replace helperblogger with your twitter username.

Customizations (Options)



  • This button is aligned to left of page if you want to align it to right or middle then replace text-align:left; with text-align:right; and text-align:center; respectively.


  • This button will visible on below of post if you want to add it before the post then add code just above of <data:post.body/>

Now save your template and you are done.If you have any problem or query then feel free to ask me.I will always there for my buddies...

Post a Comment

  1. HELPFUL :) THANKS !
    thankyou very much,Respect to you ;)

    ReplyDelete
    Replies
    1. It's my pleasure Shalvika.Also feel free to ask me about any gadgets or blogger help.

      Delete
  2. Really awesome site bro........keep it up

    ReplyDelete
    Replies
    1. Thanks Bro for your feedback.Your comments are really encouraging me for my further work....

      Delete
  3. Thank you very much for sharing so many ideas. I've given you credit in my page.

    Great work and please keep up the good work.

    ReplyDelete
  4. Is there is nice way to display facebook like button and twitter share button in same line. I've used your codes. But I got those buttons in two lines. :(
    Any help??????

    ReplyDelete
  5. FAB, thank you so much. I've added both the FB and Twitter counters to my page, they look great. Thanks so much for this very easy to implement advice. A beginner like me is very grateful to people like yourself who are happy to share :)

    Just a little question if I may though, I see that the counter buttons appear on the post page itself but not on the blog homepage where all the posts appear one after the other. Is there a way to have the counters appear on the blog home page as well? I give you the two links below so you can see what I mean. Note: I've added the counters at the end of the post. And it's ok if this isn't possible, I just thought I ask :)

    - http://nestpearls.blogspot.fr/ (no counter appearing after each post)
    - http://nestpearls.blogspot.fr/2012/10/humble-dreams-of-parisian-loft.html (counters appearing after post)

    Thanks so much in advance,
    B

    ReplyDelete
  6. Hi, how can i have the twitter and facebook like button in one line?

    thanks - look at my blog @ www.escapemanila.com - the fb and twitter are on different lines :(

    ReplyDelete
  7. http://www.cheapnikeshoxlist.net

    ReplyDelete
  8. doesn't work? i have 3 < data:post.body/ > on my blog. where i put it? plzz help me :(

    ReplyDelete
    Replies
    1. put it below the latest one
      < data:post.body/ > < /b:if >
      [put your script here..]

      Delete
  9. Thank you very much for sharing so many ideas.
    Load Systems

    ReplyDelete
  10. Your article helped me to understand the topic well and I would love to share this to my friends. I also love to
    Get Likes for your website
    Thank you for this and all the best.

    ReplyDelete
  11. hello, this is exactly what i need in my blog. i have searched and searched in blogger dashboard, but i cannot find "Tick the Expand Widget Templates" - please tell me where it is! :) thanks

    ReplyDelete
  12. Thank you for sharing this, it worked and it looks great on my site www.career-geek.net :D

    ReplyDelete
  13. Hi I do not find any 'expand widget button on blogger anywhere.

    Where do I find the 'expand widget' button?

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top