This API provides social media sharing buttons that:
Start by including the script:
<script src='//assets.euractiv.com/social/vsac-social-min.js'></script>
Notes:
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
.
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 titledata-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: