Adding Altmetric Donut and Bar to Article Pages in Literatum

FOR DESKTOP - ALTMETRIC SMALL DONUT

1. Browse to a Publication Article and select scope manually, e.g.
www.liebertpub.com > Article/Chapter View > Journal Content >Publication (e.g. FPSAM)

2. Below cover image, insert HTML Widget

3. Add following code to the widget.

<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>

<div class="altmetric-donut-desktop">

<div data-badge-popover="bottom" data-badge-type="donut" data-doi="{{itemContent.doi}}" data-hide-no-mentions="true" class="altmetric-embed" data-link-target='_blank' ></div>

</div>

4.  Save and publish changes

FOR MOBILE – ALTMETRIC LARGE BAR

1. Browse to Publication Article and select scope manually, e.g.

mal-stag.literatumonline.com > Article/Chapter View > Journal Content >Publication (e.g. FPSAM)

2. Update Tools and Share Layout Widget by adding a 3rd column. Click Edit.

Change 2 Columns to 3. It will prompt you to edit at an ancestor scope instead. Select Override.

4. Once the Number of columns is changed to 3, there will be some new options in the Grid columns section. Where the Column Width select menu says 5, change this to 4.
Note: 1/31/2023 - Not sure how critical this step is anymore

After saving/updating, you should now have something like this:

5. Add a new HTML widget to the new and empty right hand column.

6. Inside this new widget, add the following:
<div class="altmetric-badge-mobile">
<div data-badge-popover="left" data-badge-type="1" data-doi="{{itemContent.doi}}" data-hide-no-mentions="true"  class="altmetric-embed" data-link-target='_blank'></div>
</div>


7. Save and publish changes

NOTES:

1. CSS for Donut and Badge live in the PB Assets folder:
https://mal-stag.literatumonline.com/pb-assets/styles/mal_styles.css

2. https://www.altmetric.com/products/altmetric-badges/
Generates badge, but the doi should be replaced with dynamic variable: {{itemContent.doi}}

3. Altmetric embed script is currently included on a per publication basis, and at Article/Chapter View Scope. In the example above, it is included with the generated code for the Donut.
  <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>