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

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
Copyright mike-tempest ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



  <div itemscope itemtype="">
  <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); = id;
      js.src = "//";
      rjs.parentNode.insertBefore(js, rjs);
    }(document, 'script', 'refme-cite-js'));</script>
  <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>



/*Downloaded from */
@import url(,700);

html, body {
  font-family: 'Droid Sans', sans-serif;

p {
  margin:0 0 1rem;

.col {
  margin-right: 30px;
  padding:5px 20px;