Social Share Buttons API


This API provides social media sharing buttons that:


Getting Started

Start by including the script:

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

Notes:

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


Documentation and Examples


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>

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>

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 8.5 MB.

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

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 31.3 KB.

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

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?


Configuration

Configuration is located in the file /config/social.php. If you do not have the ability to modify this file, contact your administrator to have options changed. The configuration file should contain an array with the name $config containing the following offsets:

NameTypeDescriptionCurrent Setting
twitter_search_replacearrayAn array to search and replace the title to format it for twitter. Format ["search_string"=>"replace_string"]
Array (
    [– EURACTIV.com] => @EURACTIV
    [– EURACTIV.fr] => @EURACTIV_FR
    [– EURACTIV.de] => @EURACTIVBerlin
)
callmap_driverstringThe callmap driver to use, either "sqlite", "fsstore" or "noop"
noop
callmap_labelsarrayLabels for the callmap, where the key is the regular expression to match and the value is the label to useLogin to view this setting
callmap_visualize_defaultarrayNodes to visualize by defaultLogin to view this setting
callmap_probabilityintegerProbability that a given hit will log. Important for high traffic sites. Set higher for lower probability.
1000
cal_ttlintegerThe time, in seconds, to cache items before revalidating
3600
cal_driverstringThe cache driver to use, either "fs" or "sqlite" or "noop"
sqlite
kval_ttlintegerThe time, in seconds, to cache key:value pairs before revalidating
3600
kval_driverstringThe key:value driver to use, either "fskv" or "sqlitekv"
sqlite
http_allowed_domainsarrayAllowed domains for fetching assets or generating URLsLogin to view this setting
http_allowed_urlsarraySpecified URLs or regular expressions of specified URLs match for fetching assets or generating URLsLogin to view this setting
http_connect_timeoutintegerThe amount of time, in seconds, that cURL should wait before returning an error status. 15 is a good value for most cases.
15
shortener_driverstringThe driver for the shortener, can be one of "bitly", "eurac" or "noshorten"
eurac
shortener_base_urlstringThe base URL for the shortener
http://eurac.tv
shortener_api_keystringThe API key for the shortenerLogin to view this setting
shortener_passthru_query_varsarrayQuery variables to leave in the URL, for example to prevent the creation of millions of URLs with unique ids, or to prevent sensitive information from being saved in the shortener.Login to view this setting