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: example.com, 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