Add Buffer button to your Website / Blog

BufferApp or simply Buffer is a smarter way to schedule your social shares of content you find or publish on web. You can load the content in your buffer to get it share for you later throughout the day or week when you desire. Hence you’ll be tweeting or sharing links on Facebook or LinkedIn when you’re in a meeting or out on a business trip, just with the help of BufferApp!

With BufferApp, you can schedule content to share on Twitter, Facebook and LinkedIn. It also provides a buffer button for websites and blogs to allow your audience / readers to load your posts / content in their buffer to post it later. This article will help you to add a Buffer button to your blogs and websites without installing any additional widgets or plugins.

Adding Buffer button on website / Blog

Follow the below given steps to add Buffer button to your website or blog. Note that I’ve added my twitter handle in data-via parameter for the demonstration, please modify it to yours before saving the code. Other field parameters can also be modified, see the table in the end of the post.

Buffer button for Website

Edit the source code of the page of your site in which you want to put Buffer button. Add the below code in the page’s source where you want to show the button:

<a href="http://bufferapp.com/add" class="buffer-add-button" data-count="horizontal">Buffer</a><script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

Save the changes.

Buffer button for WordPress

Go to your theme directory and open single.php in editing mode. Put the below given code just * above / below <?php the_content(); ?>:

<a href="http://bufferapp.com/add" class="buffer-add-button" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>" data-count="horizontal" data-via="techably" data-picture="<?php if(function_exists('the_post_thumbnail')) echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">Buffer</a><script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

Save Changes.

Buffer button for Blogger

Log in to you Blogger account and go to Blogger Dashboard » Design » Edit HTML. Click “Expand Widget Templates” textbox. Find <b:includable id='shareButtons' var=’post’>, paste the following code just below it:

<a href="http://bufferapp.com/add" class="buffer-add-button" expr:data-text="data:post.title" expr:data-url="data:post.url" data-count="horizontal" data-via="techably" expr:data-picture="data:post.thumbnail">Buffer</a><script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

Save Template. If it shows error message like:

More than one widget was found with id: Navbar1. Widget IDs should be unique.

Just find Navbar1 (it could also be Navbar2 or Navbar3, just find the same it has reflected in the warning) and replace it with Navbar2 (or a different one like Navbar3 or Navbar4). If it says Warning: Your new template does not include the following widgets:…, just click the “Keep Widgets” button. That’s it.

Buffer button for Tumblr

Go to your Tumblr Dashboard » Edit » HTML. Find {/block:Regular} and paste the following code just above it:

<a href="http://bufferapp.com/add" class="buffer-add-button" data-text="{Title}" data-url="{Permalink}" data-count="horizontal" data-via="techably" data-picture="{PhotoURL-500}">Buffer</a><script type="text/javascript" src="http://static.bufferapp.com/js/button.js"></script>

Click Update.

Buffer button for Posterous

In your Posterous dashboard, navigate to Manage Spaces » Space Settings » Edit Theme » Advanced, and find <section class=”share”>, add the following code just below it:

<a href="http://bufferapp.com/add?url={Permalink}" class="buffer-add-button" data-count="horizontal" data-via="techably"><img src="http://4.bp.blogspot.com/-2I7IVOXThAU/T7o4IswZ4qI/AAAAAAAAE-0/wfdGCj55DZg/s400/buffer-techably.png" alt="Buffer button by TechAbly.com" /></a>

Save the changes. You can see the button in action here.

* above / below: Wherever you want to make it appear either above the post or at the footer of the post.

You can alter the following parameters to customize your Buffer button:

Parameter	Function	Possible Values
data-text	What text should be displayed in Buffer?	It could be the Post or Website title, post excerpt etc. If left blank, the current page title will be used.
data-url	Specify URL to be shown in the buffer	This parameter can be modified as per your website’s platform to serve dynamic URL via a function like <php the_permalink(); ?> (WordPress) or data:blog.url (Blogger). If left blank, the current page’s URL will be used.
data-count	How the button will appear?	none (no share count), horizontal (horizontal share count), vertical (vertical share count). Should be specified otherwise the button will appear broken.
data-via	Adding mentions to your buffer	You may mention the related Twitter handle to your buffer by adding the account name in this field. It is optional.
data-picture	Adding the share thumbnails / pics to buffer	For instance, if you share things on Facebook, you may want to add thumbnail image that should appear on the shared link. In this case, data-picture parameter helps to add an image to our buffer. This parameter is optional

Quick Tip: Use Ctrl + F or Command + F to find the code in your browser.

Also see Educational Social Media Graphics.