Although the demo buttons currently load endlessly, the actual button service is running smoothly. We're working on rectifying this little bug.
Get the Code

Settings are passed via HTM5 data attributes.

Name Type Default Description
url url current url The URL of the page to share. If none is set the script will first check for Open Graph data, then a canonical tag and finally resort to the current URL.
title string current title The title of page to share. If none is set the script will first check for Open Graph data, then a title tag.
image url The title of page to share. If none is set the script will first check for Open Graph data, then an image on the page.
limit integer false Amount of buttons to display. The rest are hidden with a + button to expand.
bubbles string hover Position of share count bubbles. Can be hover, top, right or none
style string responsive Share buttons style. Can be responsive, short, icons or custom

Enabling Twitter Tweet Count

Twitter counts are retrieved using newsharecounts.com. To enable them please visit newsharecounts.com and register your website (it's free).

Getting sleek share buttons on your site could not be easier. First, the following line of code the the bottom of your `body` tag.

<script src="http://share.donreach.com/buttons.js"></script>

Now place the HTML as per the following examples where you want the buttons to appear.

Default style

Responsive buttons with count bubbles on hover.

  <div class="don-share" data-count="3">
    <div class="don-share-total"></div>
    <div class="don-share-facebook"></div>
    <div class="don-share-twitter"></div>
    <div class="don-share-google"></div>
    <div class="don-share-linkedin"></div>
    <div class="don-share-pinterest"></div>
    <div class="don-share-stumbleupon"></div>
    <div class="don-share-tumblr"></div>
    <div class="don-share-buffer"></div>
    <div class="don-share-vk"></div>
  </div>
  

This is the code for the default social sharing widget, it uses data attributes to pass parameters to the script. In this example where setting the limit to 3 to hide the other buttons.

Icon style, top bubbles, custom url

  <div class="don-share" data-url="http://google.com" data-image="" data-style="icons" data-bubbles="top">
    <div class="don-share-facebook"></div>
    <div class="don-share-twitter"></div>
    <div class="don-share-google"></div>
    <div class="don-share-linkedin"></div>
    <div class="don-share-pinterest"></div>
    <div class="don-share-tumblr"></div>
    <div class="don-share-stumbleupon"></div>
    <div class="don-share-reddit"></div>
    <div class="don-share-hackernews"></div>
    <div class="don-share-buffer"></div>
    <div class="don-share-xing"></div>
    <div class="don-share-pocket"></div>
    <div class="don-share-fancy"></div>
    <div class="don-share-yummly"></div>
    <div class="don-share-scoopit"></div>
    <div class="don-share-weibo"></div>
    <div class="don-share-vk"></div>
    <div class="don-share-mailru"></div>
    <div class="don-share-odnoklassniki"></div>
    <div class="don-share-hatena"></div>
  </div>
  

In this example we've set style to icons, bubbles to top, and url to http://google.com. If no URL is set it will default to the current page.

Bubbles right

  <div class="don-share" data-title="test" data-url="http://facebook.com" data-bubbles="right" data-style="short">
    <div class="don-share-total"></div>
    <div class="don-share-facebook"></div>
    <div class="don-share-twitter"></div>
    <div class="don-share-google"></div>
  </div>