HowTo Add Buffer Button in WordPress

Published On :

Uniqueness always stays ahead and that’s what happened with Buffer. I remember Leo (Co-Founder of Buffer) had written a Guest Post here on DailyBlogging a few months back, on how to keep up with the evolving twitter. It was the time when Buffer was launched and he was working very hard on building up content and guest posting on different niche and quality blogs.

Today, almost every blog reader & Social Media enthusiast knows how effective/handy Buffer is, when it comes to consistent tweeting. In that guest post Leo has mentioned about the bookmarklet and the browser extensions/add-ons which can be used to Buffer posts or pages.

SMO Tips :-

But if you already use a lot of extensions and over that you add the Buffer Extension as well, then you are asking for trouble (specially in Chrome). Nothing can beat the use of widgets or buttons on post pages, which you want to Buffer.

Earlier this month, BufferApp released the code for the Buffer Button. They are also making a WordPress plugin for the button; so that bloggers who don’t know much about coding can add the Buffer Button. But till that plugin is released, you can refer this tutorial which will help you to add the Buffer Button to your WordPress Blog Posts.

Buffer Button

Two Dimensions of the Buffer Button Explained!

Getting the Buffer Button Code

You can either go to Buffer’s official blog post to get the Buffer Button code or copy paste the below code on your blog. I recommend using the below code, as I’ve added the WordPress function tags for the title and the permalink of the post. You just need to change the handle name in the code to your personal twitter handle.

Also, you will need to choose between the two dimensions of the Buffer Button i.e. Vertical (Bigger button) or Horizontal count (Smaller & sleeker button). I’ve used vertical count i.e. the bigger button, because that looks good & fits in the line of the other floating share buttons.

<a rel="nofollow" href="http://bufferapp.com/add" class="buffer-add-button" data-text="<?php the_title();?>" data-url="<?php the_permalink();?>" data-via="dailyblogorg" data-count="vertical">Buffer</a>
<script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

Adding the Button in your Posts Page

Once you’ve changed the handle name & chosen a dimension between vertical/horizontal count your job is almost done. Now, you just need to open up your single.php file or the custom-functions.php file (for Thesis users) and add that code in the right place. I would recommend you to place it along with the other share buttons so that people can see it & Buffer your posts.

I hope with this tutorial you won’t even need the Buffer WordPress plugin.

So are you going to use the Buffer button ? If you are already using it, tell us how helpful it has been so far.

Share :
Tagged as : 11 Comments
About » Has written 231 Post(s) «

I'm a Web Designer/Developer, SEO'er and a Blogger who gives a few Blogging Tips in the form of posts/tutorials. Follow & Subscribe to my Blog if you feel it's worth it.

HostGator
Loader

10 Comments Comments RSS

  1. #

    Wow, Mani, thank you so much for this tutorial and walkthrough! It is a great post and thanks a lot for the kind words too!

    I am sure many will find this very useful and I have to say it is the first time I see the vertical count of the Button in action and it looks really beautiful here on your blog!

    Ok, let me Buffer this post – Twice! :)

    • #

      It’s amazing that you are seeing the vertical button for the first time. I likes the sleek look of the horizontal button, but to just suite the other buttons used the vertical one.

      Thanks for Buffering :)

  2. #

    Hmm its looking damn awesome here mani anyways thanks for the tutorial.

  3. #

    Hi Mani
    Awesome Tutorial, And also i am seeing your vertical share buttons for first time today!! As my browsers resolution is very high [High Zoom] I didnt noticed it! Anyway now i saw it and looking very nice.

    Once again thank you for your wonderful tutorial :)

  4. #

    Wow… The button looks great. Is it possible to add on blogger blogs???

  5. #

    I tried your code but the vertical buffer icon isn’t showing up on my page. What am I missing?

    • #

      I’ve tried on my other blogs as well and it works perfectly. btw, I hope you are trying it on wordpress only.

  6. #

    Buffer is a phenomenal product with nothing but huge upside potential. I would like to limit it to the blog page posts. Is there a way to do that for a non code-reader? I love the program and am using it lots…very helpful.

    • #

      Hi there,

      Fantastic to hear that you like the Button. If you search plugins on your WP-dashboard for “Buffer Button” you will find it right there. Just install it and that’s it. Then under “settings” on your WP-dashboard you can set “individual posts only”.

      I hope that helps. Let me know if you have any more questions :)

  7. #

    Awesome, thanks Mani!

Post a Comment

Your email is never published nor shared. Required fields are marked *

Also, use your Real name in the 'Name' field. Comment names with only keywords will be trashed.