Embeddable badges

When clicked the badges lead to a page on altmetric.com that contains more information on the article specified.

By default the information pages only show these first few mentions on each service. We can co-brand the page with your logo and give your visitors a more detailed breakdown of the conversations happening around each article - please see our services for publishers page or contact [email protected] for details.

You can optionally customise how the badge appears by adding attributes:

• Use the data-badge-type attribute to choose a particular style of badge (see here for a list of options).
• Set the data-badge-popover attribute to show a popover when a user hovers over the badge.
• Use the data-badge-details attribute to show a breakdown of the data next to donut style badges.
• Use the data-no-score attribute to specify if a score should be displayed in the center of the donut style badges.
• Use the data-hide-less-than attribute to specify if the badge should be hidden when the Altmetric score is less than a given number.
• Use the data-link-target attribute to specify if a user should be brought to a new tab or window when they click on a badge.
• Use the data-condensed attribute to show a condensed version of the badge.

The HTML to copy into your page for the above embed:

If you'd like a popover to appear when the user hovers over a badge use the data-badge-popover attribute specifying where you'd like the popover to appear: left, right, top or bottom.

Popover on left

Hover over the donut to show a popover to its left.

<div data-badge-type='donut' class='altmetric-embed' data-badge-popover='left' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Popover below

Hover over the badge to show a popover below it.

<div class='altmetric-embed' data-badge-popover='bottom' data-doi='10.1016/S0140-6736(11)61619-x'></div>

You can choose to display details of the attention an article has received to the right of the badge by including the data-badge-details attribute.

The details display works best with the medium-donut and large-donut badge styles.

Medium donut

<div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' data-doi='10.1016/S0140-6736(11)61619-x'></div>

You can specify the style of badge you'd like to embed with a data-badge-type attribute. The badge types available are:

<div class='altmetric-embed' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='medium-donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='large-donut' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='1' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='4' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='medium-bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

<div class='altmetric-embed' data-badge-type='large-bar' data-doi='10.1016/S0140-6736(11)61619-x'></div>

Altmetric badges are delivered by Cloudfront where possible so latency should be very low.

The embed script becomes active after the page DOM has loaded and looks for elements with the altmetric-embed class and a data-doi, data-pmid or data-arxiv-id attribute.

If you're adding Altmetric badges to the DOM after the page has loaded (via AJAX, for example) then you can ask the Altmetric embed script to search the page again for new matches by calling _altmetric_embed_init in Javascript:

<script type='text/javascript'>
    _altmetric_embed_init();
</script>

If you only want to load Altmetric badges from a specific container (e.g. a new div containing several elements with the altmetric-embed class loaded via AJAX) rather than searching the whole page, you can pass an Element or a string selector as a "context" argument to _altmetric_embed_init:

<script type='text/javascript'>
    _altmetric_embed_init(document.getElementById('new-container'));
    _altmetric_embed_init('#new-container');
</script>

Some XML based content management systems won't allow you to add data-* attributes to HTML templates.

If you run into this problem you can pass options to the donut by adding special CSS classes to the badge element.

See below for some examples. Please do let us know at [email protected] if you run into any problems.

Here's an example:

<div class='altmetric-embed altmetric-doi-10.5339/connect.2012.9 altmetric-badge-type-donut altmetric-badge-popover-left'></div>

There are two custom JavaScript events that can be fired by the badge:

• altmetric:show is fired when a badge is shown;
• altmetric:hide is fired when a badge is hidden (e.g. if its score is 0 and the data-no-score attribute is set).

These events are attached to the .altmetric-embed container, so it is possible to attach event listeners and act on them.

For example: using jQuery, one can show an alert whenever a badge is shown with the following code:

$(function () {
    $('div.altmetric-embed').on('altmetric:show', function () {
        alert('Altmetric badge shown!');
    });
});