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 |
---|---|
|
Use this data attribute to tell the embed code which identifier to use. Supported attributes are |
|
Use this data attribute to choose a particular style of badge. Supported types are |
|
Use this data attribute to show a popover when a user hovers over the badge. |
|
Use this data attribute to show a breakdown of attention next to donut style badges. |
|
Use this data attribute to specify if a score should not be displayed in the center of the donut style badges. |
|
Use this data attribute to specify if the badge should be hidden when the Altmetric Attention Score is less than a given number. |
|
Use this data attribute to specify if a user should be taken to a new tab or window when they click on a badge. |
|
Use this data attribute to show a condensed version of the badge. |
|
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 |
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… |
---|---|
|
|
|
|
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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!');
});
});