RefME Cite Button Widget

In this example below you will see how to do a RefME Cite Button Widget with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mike-tempest, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mike-tempest ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RefME Cite Button Widget</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div itemscope itemtype="http://schema.org/WebPage">
  <div class="col">
    <div id="refme-cite"></div>
    <script>(function(d, s, id) {
      var js, rjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//www.refme.com/refme-widget/scripts/refmeCite.js";
      rjs.parentNode.insertBefore(js, rjs);
    }(document, 'script', 'refme-cite-js'));</script>
  </div>
  <div class="col">
    <p><strong>Title:</strong> <span itemprop="headline">Cite Button Demo</span></p>
    <p><strong>Author:</strong> <span itemprop="author">RefME</span></p>
    <p><strong>Second Author:</strong> <span itemprop="author">Harry Referencing Styles</span></p>
    <div itemprop="datePublished" content="2015-04-12">Last updated April 12, 2015.</div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mike-tempest/refme-cite-button-widget-eNNVOb */
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

html, body {
  font-family: 'Droid Sans', sans-serif;
  font-size:16px;
}

p {
  margin:0 0 1rem;
}

.col {
  display:inline-block;
  margin-right: 30px;
  padding:5px 20px;
  vertical-align:top;
}

Comments