Social Share Buttons API

This API provides social media sharing buttons that:

are simple and light weight
are easy to customize
protect the user's privacy by proxying count requests to this server.

Getting Started

Start by including the script:

<script src='//assets.euractiv.com/social/vsac-social-min.js'></script>

Notes:

jQuery must be loaded first
The default button formatter outputs share buttons that are marked up for a Bootstrap website using Font Awesome to provide icons. If you wish not to use these, you must override the button formatter.
The script will load the stylesheet vsac-social-min.css (uncompressed)

Note: The examples for this page may not work. The configuration setting http_allowed_domains is missing the entries: example.com, assets.euractiv.com.

Documentation and Examples

Basic Use

By itself, the script is very easy to use; simply include an element with the class vsac-social.

<p class="vsac-social"></p>

The social share buttons create a share URL that will share the current page and title. By default, the buttons will use the content of the document's <title> tag for the title and the current page URL.

This behavior can be overridden with data attributes:

data-social-title: explicitly set the page title
data-social-url: explicitly set the URL to share

<p
    class='vsac-social'
    data-social-url='http://example.com'
    data-social-title='Hello World! - Asset Manager'
></p>

Additional Buttons

To add more buttons to the share bar, simply add the markup to the wrapper element when the page is generated. The buttons will be appended to the wrapper after whatever markup is already there. If using the default formatter, the buttons markup should be something like:

a.btn.vsac-social-[vendor]   // see below for possible [vendor] values
    i.fa.fa-[icon]                      // the font awesome icon
    span.hidden-xs.hidden-sm            // the vendor name/label (should wrap all text)
    b.hidden-xs                         // the share count (optional)

The [vendor] in a.btn.vsac-social-[vendor] is used to apply vendor-specific brand colors. Built in classes are:

.vsac-social-adn
.vsac-social-bitbucket
.vsac-social-dropbox
.vsac-social-facebook
.vsac-social-flickr
.vsac-social-foursquare
.vsac-social-github
.vsac-social-google
.vsac-social-instagram
.vsac-social-linkedin
.vsac-social-microsoft
.vsac-social-odnoklassniki
.vsac-social-openid
.vsac-social-pinterest
.vsac-social-reddit
.vsac-social-soundcloud
.vsac-social-tumblr
.vsac-social-twitter
.vsac-social-vimeo
.vsac-social-vk
.vsac-social-yahoo
.vsac-social-comments
.vsac-social-print

If you use your own vendor class, be sure to prefix it with vsac-social-* to ensure that all the generic styling is applied.

<p class='vsac-social'>
    <a href="#" class="vsac-social-print btn">
        <i class="fa fa-print"></i>
        <span>Print</span>
    </a>
    <a href="#" class="vsac-social-comments btn">
        <i class="fa fa-print"></i>
        <span>Comments</span>
        <b>13</b>
    </a>
</p>

Advanced Customization

If you can't or don't want to use the default wrapper class .vsac-social, you can append the share buttons to any element via javascript:

window.VSAC.social('.css-selector');

Similarly, if you are not happy with the default button formatter, you can override it with:

window.VSAC.social.btn_formatter(fn);

Where fn is your formatter callback. It will receive the button attributes (an object) as it's first argument, and it should return an HTML element or jQuery object ready to be appended to the wrapper.

To restore the default formatter, call btn_formatter with no parameters.

Place social share buttons in an element without the class .vsac-social:

A custom formatter that just outputs a list of button object properties (15 second timeout):

<p>Place social share buttons in an element without the class <code>.vsac-social</code>:</p>
<p id="some-other-wrapper"></p>
<script>window.VSAC.social('#some-other-wrapper');</script>

<p>A custom formatter that just outputs a list of button object properties (15
second timeout):</p>
<div id="my-formatted-wrapper"></div>
<script>setTimeout(function () {
    window.VSAC.social.btn_formatter(function (obj) {
        var ul = $('<ul />'), li;
        $.each(obj, function (prop, value) {
            li = $('<li />')
                .text(prop)
                .wrapInner('<code />')
                .append($('<span>').text(' : ' + value));
            li.appendTo(ul);
        });
        return ul;
    });
    window.VSAC.social('#my-formatted-wrapper');

}, 15000);</script>

System Status

Cache

The database that powers this API is currently using 5.8 GB.

Expired items were last cleaned from the cache 2 days ago. The database was last vacuumed 2 days ago.

To ensure that the database is regularly cleaned, make sure the following line is in your cron tab (adjusting the frequency to your needs):

/15 * * * wget -q -O - http://assets.euractiv.com/social/clean-cache.php

Driver: sqlite | Clean cache now.

Warning! It looks like the database isn't being cleaned regularly. Are you sure cron is configured?

Key-Value Store

The database that powers this API is currently using 0 B.

Expired items were last cleaned from the cache never. The database was last vacuumed never.