Suggestion: Add option for altmetric badges for publications

Martin-Jung commented 5 years ago

The altmetric website has instructions how to do this ( https://api.altmetric.com/embeds.html ). Essentially it only requires to embed an extra js and insert a few extra div containers in the theme layout.

gcushen commented 5 years ago

Thanks for your suggestion. I see this as more of a niche customization which the user can make themselves if desired. The HTML code could even be pasted into the body of publication markdown files as a simple method of integration. Happy to reconsider closer integration if there is more demand for it in the future.

ReginaNuzzo commented 5 years ago

Seconding the request for this. Would be a snazzy addition.

mdainese commented 5 years ago

Yes, it would be really great!

chlazaris commented 5 years ago

Yes, this would be fantastic! Also please consider Dimensions badges! Thank you

JDLeongomez commented 5 years ago

I'd also love this.

BTW, I tried to paste the code into a publication markdown file, but the badge does not appear. Not sure if I'm doing it right.

vikramnr commented 5 years ago

@JDLeongomez are you working on this one

JDLeongomez commented 5 years ago

@vikramnr not at the moment, no. I haven't tried to inset these badges for some time, after my initial failure. Still, something I'd love.

vikramnr commented 5 years ago

@JDLeongomez Ok sure. Thanks for the update

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had any recent activity. The resources of the Academic team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically close soon if no further activity occurs. Thank you for your contributions.

JDLeongomez commented 3 years ago

@vikramnr just a late update. If anyone is interested, I added both Altmetric and Dimensions badges below the abstract to my publications. They look like this:

Bagdes

I inserted the badges within a white box so they look OK (otherwise, over a dark background, they look horrible). The md file for that example publication is available here, with the HTML code at the end, below the +++ (please be aware that I don't know anything about HTLM, so this code is probably ugly and can be improved; it works though).

If anyone wants to use it, just paste it on your md file, changing the DOI for both badges.

EDIT: I also added a PlumX widget, just to try it. The updated code below contains Altmetric, Dimensions and PlumX code.

<html>
  <style>
    section {
        background: white;
        color: black;
        border-radius: 1em;
        padding: 1em;
        left: 50% }
    #inner {
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center }
  </style>
  <section>
    <div id="inner">
      <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
        <span style="float:left"; 
          class="__dimensions_badge_embed__" 
          data-doi="10.XXXXXX" 
          data-hide-zero-citations="true" 
          data-legend="always">
        </span>
      <script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>
        <div  style="float:right"; 
          data-link-target="_blank" 
          data-badge-details="right" 
          data-badge-type="medium-donut"
          data-doi="10.XXXXXX"   
          data-condensed="true" 
          data-hide-no-mentions="true" 
          class="altmetric-embed">
        </div>
    </div>
    <div id="inner">
      <script type="text/javascript" src="//cdn.plu.mx/widget-summary.js"></script>
        <a href="https://plu.mx/plum/a/?doi=10.XXXXXX" 
          data-orientation="horizontal" 
          class="plumx-summary" 
          data-site="plum" 
          data-hide-when-empty="true">
        </a>
    </div>
  </section>

One potential improvement would be to call the doi <meta> directly, so that DOIs don't need to be manually entered for each publication. This should be easy to do by adding, for example: data-doi="{{ . }}" provided the doi <meta> (something like $Params.doi) is defined in the <head>, as described here: https://github.com/wowchemy/wowchemy-hugo-modules/discussions/1912. This should be easy to do by copying and changing the relevant HTML files to the \layouts\partials folder, but I haven't managed to make it work. Any help from someone competent in HTML would be very appreciated.

tomlincr commented 1 year ago

@JDLeongomez I have implemented this as a custom shortcode which calls the doi directly from the publication header.

Add the following to /layouts/shortcodes/metrics.html

<!-- https://gohugo.io/templates/shortcode-templates/#custom-shortcode-examples -->
<!-- $.Page.Params
refers to the page’s params; the “page” in this case refers to the content file in which the shortcode is declared (e.g., a shortcode_color field in a content’s front matter could be accessed via $.Page.Params.shortcode_color). -->

{{ if $.Page.Params.doi }}
<html>
    <style>
        section {
            background: white;
            color: black;
            border-radius: 1em;
            padding: 1em;
            left: 50% }
        #inner {
            display: inline-block;
            display: flex;
            align-items: center;
            justify-content: center }
    </style>
    <section>
        <div id="inner">
        <script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
            <span style="float:left"; 
            class="__dimensions_badge_embed__" 
            data-doi="{{ $.Page.Params.doi }}" 
            data-hide-zero-citations="true" 
            data-legend="always">
            </span>
        <script async src="https://badge.dimensions.ai/badge.js" charset="utf-8"></script>
            <div  style="float:right"; 
            data-link-target="_blank" 
            data-badge-details="right" 
            data-badge-type="medium-donut"
            data-doi="{{ $.Page.Params.doi }}"   
            data-condensed="true" 
            data-hide-no-mentions="true" 
            class="altmetric-embed">
            </div>
        </div>
        <div id="inner">
        <script type="text/javascript" src="//cdn.plu.mx/widget-details.js"></script>
            <a href="{{ print "https://plu.mx/plum/a/?doi=" $.Page.Params.doi }}" 
            class="plumx-details" 
            data-site="plum" 
            data-hide-when-empty="true">
        </a>
        </div>
    </section>
{{ end }}

You can then simply call the metrics within your publication .md using the shortcode {{< metrics >}}

Hope that's useful

JDLeongomez commented 1 year ago

@tomlincr thank you so much for creating this custom shortcode! I already use it for all my publications and it works great (sorry I only now had the time to check this)

HugoBlox / hugo-blox-builder

Suggestion: Add option for altmetric badges for publications #719