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 not 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>

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