Skip to main content
  1. Documentation
  2. Social Share Buttons

Social Share Buttons

Configure Social Share Buttons


Get the Code

Settings

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 og:url, 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 og:title, then a title tag.
image url   The title of page to share. If none is set the script will first check for Open Graph og:image, then an image on the page.
limit integer   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).

Examples

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-google"></div>
  <div class="don-share-facebook"></div>
  <div class="don-share-baidu"></div>
  <div class="don-share-qzone"></div>
  <div class="don-share-twitter"></div>
  <div class="don-share-vk"></div>
  <div class="don-share-reddit"></div>
  <div class="don-share-weibo"></div>
  <div class="don-share-linkedin"></div>
  <div class="don-share-mailru"></div>
  <div class="don-share-odnoklassniki"></div>
  <div class="don-share-tumblr"></div>
  <div class="don-share-pinterest"></div>
  <div class="don-share-pocket"></div>
  <div class="don-share-hatena"></div>
  <div class="don-share-scoopit"></div>
  <div class="don-share-renren"></div>
  <div class="don-share-xing"></div>
  <div class="don-share-hackernews"></div>
  <div class="don-share-mixi"></div>
  <div class="don-share-wykop"></div>
  <div class="don-share-buffer"></div>
  <div class="don-share-stumbleupon"></div>
  <div class="don-share-kaixin001"></div>
  <div class="don-share-yummly"></div>
  <div class="don-share-nk"></div>
  <div class="don-share-diigo"></div>
  <div class="don-share-surfingbird"></div>
  <div class="don-share-draugiem"></div>
  <div class="don-share-fancy"></div>
  <div class="don-share-delicious"></div>
  <div class="don-share-bibsonomy"></div>
  <div class="don-share-vkrugudruzei"></div>
  <div class="don-share-bizsugar"></div>
  <div class="don-share-designfloat"></div>
  <div class="don-share-blogengage"></div>
  <div class="don-share-pusha"></div>
  <div class="don-share-svejo"></div>
  <div class="don-share-moshare"></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>