No description, website, or topics provided.
JavaScript
Latest commit 6c2f8c8 Dec 8, 2016 @marsonparulian marsonparulian committed on GitHub Merge pull request #17 from finderau/AUSTE-476
AUSTE-476: prevent exec callback when FB doesn't return share.share_count

README.md

Barebones Share Buttons

A light weight library to fetch social sharing information from APIs that support JSONP.

Take a look at the demo page to see it in action.

Why?

The majority of libraries available for providing share buttons provide additions that you probably don't need (eg CSS, tracking scripts etc). This library provides you with a way to progressively enhance a basic link to a social networks sharing page to include a popup window and a call to their API for the amount of shares your page has had.

Install

You can grab a copy of the files from the ./dist directory or install via Bower.

bower install barebones-share-buttons

Basic usage

In the following example we're using a link to Facebook's sharer page, and we're going to include an element to show how many times our page (finder.com.au) has been shared.

Along with many other social networks, Facebook allow you to share a page via a URL with a specific parameter for the page you want to share. In Facebook's case they use a u parameter.

HTML

<a data-sharebutton href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.finder.com.au">Facebook <span data-sharecount>0</span></a>

JavaScript

sharebuttons.init();

In our HTML the data-sharebutton indicates to the library that this link is for social sharing, by default this will make the link appear in a pop up window on desktop browsers.

If you include an element with adata-sharecount attribute, the library will determine that you want to fetch the amount of shares for the page featured in the URL parameter. By default Facebook and Twitter are supported.

Advanced usage

Custom options

Sharebuttons includes a method to override the default options.

sharebuttons.updateOptions({
  'newWindow': false
});

Options available

  • selector string - default selector to use to get the links
  • loadedClass string - class applied to the share button once the count is fetched
  • countSelector string - selector for the child element that contains the count number
  • newWindow boolean - determines whether a new window should be opened
  • defaultProviderId string - if there is no provider plugin the ID will default to this value
  • onShare function - This callback is dispatched after a share button is clicked on
  • onFetch function - This callback is dispatched after a the share count is fetched from the social network

Additional note on options. They can be defined in 4 areas:

  1. Globally
  2. By the provider
  3. From a call to the updateOptions method
  4. On the element being used as a share button see the element options example

Adding a provider

Providers are represented by a JavaScript object, for example:

{
  id: 'myprovider',
  fetchCount: function (callback) {
    callback(10000);
  }
}

The can be manually loaded with the following:

sharebuttons.addProviders([
  {
    id: 'myprovider',
    fetchCount: function (callback) {
      callback(10000);
    }
  }
]);

Deploying

  • Make changes
  • Run npm run build
  • Make PR including files in dist directory
  • After merge, update tag
  • Update tag number in repositories that uses share-buttons