What is it?

The sharecount button for Facebook displays the number of times the current page has been shared on Facebook and allows visitors to share it themselves.

Inspired by the popular Retweet buttons, it was built by us folks behind awe.sm on top of our new data API.

Features:

  • Displays the number of shares and on hover the total number of clicks for those shares (displays Facebook logo when 0 shares)
  • Large or small button
  • Track the shares from the button using your awe.sm API Key or fbshare.me links
  • Add Google Analytics parameters to fbshare.me links
  • Configure the colors of the badge in the large button

Get one for your site!

If you use WordPress, get the plugin. Otherwise, get the embed code below.

Basic Code

Just paste the following code where you want the button to be displayed.

<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

This code will display a large version of the button and use the URL and title of the page it is placed on to generate fbshare.me links with Google Analytics parameters disabled.

Advanced Options

The button also supports advanced configuration through the following variables:

  • size - The size of the button: 'large' OR 'small' (if not specified, defaults to 'large')
  • url - The URL of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
  • title - The name of the page you want shared on Facebook (if not specified, defaults to that of the page on which the button is displayed)
  • google_analytics - If no awesm_api_key specified, sets whether fbshare.me links have Google Analytics parameters added: true OR false (if not specified, defaults to false)
  • awesm_api_key - For existing awe.sm customers only (if not specified, will use fbshare.me links)
  • badge_text - Change the color of the text in the badge for the large button (use standard CSS RGB hex codes, *do not* include a leading #)
  • badge_color - Change the color of the badge background for the large button (use standard CSS RGB hex codes, *do not* include a leading #)

Here's the code for an example using some of these configuration variables:

<script>var fbShare = {
url: 'http://jonathanhstrauss.com/',
size: 'large',
badge_text: 'C0C0C0',
badge_color: 'CC00FF',
google_analytics: 'true'
}</script>
<script src="http://widgets.fbshare.me/files/fbshare.js"></script>

How it Works

awe.sm is a campaign tracking platform for social media that generates a unique link every time someone shares content through our system. Since each link is encoded with metadata about the share action it represents, including the channel for which it's destined (e.g. Twitter or Facebook or LinkedIn, etc), it's very easy to find out how many times a given URL has been shared to a given channel (and how many clicks those shares have generated).

This particular button is built on top of our Aggregate Data API, which can be used by any developer to retrieve anonymized aggregate data about the shares tracked through our system. We built it to showcase the power of our platform and the ease of developing on our APIs (this was a weekend project).

To learn more about awe.sm, check out our original announcement. And apply to the awe.sm developers group to get full access to our API documentation.