Add Buffer Button for Your Blogger Posts

Recently we have been discussing about Buffer and how it's gonna help you out with scheduling your tweets and Facebook posts to grab more attention of your friends and followers. However if you have already started using Buffer for this scheduling process, you could have find Buffer browser extensions are very helpful in buffering links or content in a giffy. That's what convenient for you - installing browser extensions. But what about your posts appearing on your blog? Wouldn't it be nice if you can provide another way to share your posts for people who are not using browser extensions or would not like to play copy-paste game with your links on their Buffer dashboard?

Yeah there is. Buffer has it's own button to use on websites or blogs. We have had tutorials about how to set up your Twitter or Facebook account with Buffer. Now we gonna talk about adding Buffer buttons for your Blogger posts. However if you are planning to share your own posts on Buffer via the button, then you might like to read How to Schedule Your Tweets with Buffer and Schedule Your Facebook Posts with Buffer. Implementing Buffer button will helps your readers to share your links right away and directly to their Buffer account to be post on scheduled times. As like as Twitter tweet button, implementing Buffer button allows you to customize text being shared and mention your Twitter username to promote your brand or business too.

Steps:

1. Go to your Blogger Dashboard.

2. Click on your Blog Title.

3. Jump to Template tab.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button below your blog preview.

5. Click Proceed button to view Template Editor.

6. Tick on, Expand Widget Templates option.

7. Now search for <data:post.body/> in your template and add your button code snippet just after that.

Notes:

* Adding below <data:post.body/> will place your button under the post. If you need to place it elsewhere on post page, read How to Position Elements on a Blogger Post Page.

* If you see a line similar to <div style='clear: both;'/> tag right after the <data:post.body/> tag, then you gotta place this code snippet right after the <div style='clear: both;'/>.

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

<a href='http://bufferapp.com/add' class='buffer-add-button' data-count='[Button Style]' data-via='[Twitter Username]' expr:data-text='data:post.title' expr:data-url='data:post.url'>Buffer</a>
<script src='http://static.bufferapp.com/js/button.js' type='text/javascript'/>
</b:if>

Color Indication Information

- Buffer Button Style

Select your preferred Buffer button style from below and add Style Name here.

Vertical Style

Style Name: vertical

Horizontal Style

Style Name: horizontal

No Count Style

Style Name: none

- Twitter Username

Here you can add your Twitter name or preferred Twitter username to be mentioned in the post shared via Buffer. If you are not prefer to mention any Twitter username, leave it blank. Below you can see how it appears if you specify an username.