Clicking on a badge

When clicked, 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 contact sales@altmetric.com for details.

Data attributes

You can optionally customize how the badge appears by adding data attributes:

Attribute

Description

data-{{identifier_type}}

Use this data attribute to tell the embed code which identifier to use. Supported attributes are data-doi data-arxiv-id data-handle data-isbn data-uri data-pmid data-urn data-nct-id data-id

data-badge-type

Use this data attribute to choose a particular style of badge. Supported types are donut medium-donut large-donut 1 4 bar medium-bar large-bar. See Badge types for examples.

data-badge-popover

Use this data attribute to show a popover when a user hovers over the badge.

data-badge-details

Use this data attribute to show a breakdown of attention next to donut style badges.

data-no-score

Use this data attribute to specify if a score should be displayed in the center of the donut style badges.

data-hide-less-than

Use this data attribute to specify if the badge should be hidden when the Altmetric Attention Score is less than a given number.

data-link-target

Use this data attribute to specify if a user should be taken to a new tab or window when they click on a badge.

data-condensed

Use this data attribute to show a condensed version of the badge.

data-template

If your organization has multiple customized Details Pages you can use this attribute to ensure that users are redirected to the correct customized version instead of the one based on the domain of where your badges are being hosted. When setting the attribute value, you’ll need to pass in the sub-domain name for required Details Page. For example data-template='dimensions'.

Tip

Some XML based journal platforms don’t allow data attributes in front end code. Don’t worry! As a fallback you can also specify options as CSS classes.

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

Instead of…

Use class…

data-doi='xxx'

altmetric-doi-xxx e.g. altmetric-doi-10.5339/connect.2012.9

data-badge-type='donut'

altmetric-badge-type-donut

data-badge-type='1'

altmetric-badge-type-1

data-badge-popover='xxx'

altmetric-badge-popover-xxx e.g. altmetric-badge-popover-left

Here’s an example:


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

Popover

If you’d like a popover to appear when the user hovers over a badge you can use the data-badge-popover attribute specifying where you’d like the popover to appear. Available options are: left right top bottom.

Popover on left

Hover over the donut below 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 below to show a popover below it.


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

Details

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>

Badge types

You can specify the style of badge you’d like to embed with a data-badge-type attribute. The badge types available are listed below with examples.

Badge type

Example

Code

Default

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

donut

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

medium-donut

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

large-donut

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

1

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

4

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

bar

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

medium-bar

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

large-bar

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

Events

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!');
    });
});