How To Put a Buffer Button On Your Website

  • follow us in feedly
Published March 21, 2013 by Brad Knutson
Buffer Button

Buffer is a nifty little app that many SEOs and social media marketers use to save themselves time. You can use Buffer to schedule social media updates for all your favorite social media platforms. It’s no secret that social media has peaks and valleys when it comes to usership and exposure. You wouldn’t send a tweet out at 2 AM if you want to maximize the number of people that will see it, would you?

OK, but let’s say it’s 2 AM and you’ll be on a plane during peak Twitter hours. You don’t want to share your content now when no one will see it, so why not schedule it for later? This is where the value of Buffer comes in. It literally lets you Tweet and post social media updates while you sleep (or while you’re doing the dishes, or while you’re at class, etc). It’s an invaluable tool for a social media marketer.

You may have seen some blogs around that show a Buffer button right on the page. That’s convenient, eh? I just found an awesome blog post that I want to share with my followers, but it’s 2:30 AM and they are all sleeping…so let’s Buffer it so they’ll see it during peak hours!

That sounds awesome, I want in on that. How do I put a Buffer button on my website?

It’s actually pretty simple. Buffer lets you build your own button and specify options on their Buffer button page. It’s easy enough, however, to just paste the below code wherever you want in your HTML files or WordPress page templates. The Buffer button will appear wherever you paste the code.

<a href="" class="buffer-add-button" data-count="vertical" data-via="Bradsknutson" >Buffer</a><script type="text/javascript" src=""></script>


You can set the Tweet text and URL (see Buffer’s button page to do this), but I would recommend not doing that, because if you leave those options out, Buffer will pull the page title and page URL that the button was clicked on.

Counter position

  • Vertical – data-count="vertical"
  • Horizontal – data-count="horizontal"
  • None – data-count="none"

Social mention

You can set the Twitter account that is mentioned in the Tweet by setting data-via="TwitterNameHere"

Image to share

If you want to share an image, just add data-picture="" to the a tag. Make sure you specify the full path the image.

The Result

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “How To Put a Buffer Button On Your Website

  1. Vladimir

    Thanks for the information.
    But things not so easy with WordPress. Open JavaScript console at Google Chrome (Ctrl+Shift+J). You will see a lot of error and warning messages from buffer’s button.js. While it seems that ‘buffer’ button works in general, something is going wrong when we try to embed it into WordPress.

    1. Brad Knutson Post author

      Hey Vladimir,

      I see the syntax errors you are referring to that show up in the console, however these seem to be errors specific to the button.js script, which we don’t have control over. This site is built on WordPress, and I use use the Buffer embed method in this post. I just tested it, and I didn’t have any issues buffering a post to my Twitter account. So – even though there are errors in the console, everything appears to be working normally.

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">