Say you want Google Scholar to index your website, so other researchers can cite your work. To do this Google has provided extensive indexing guidelines for your web administrator to follow. The most important part is the use of meta tags for title, author, keywords and so on as seen in the example below:

  <!--Meta-data for Google Scholar-->
<meta name="citation_journal_title" content="Open Differential Psychology">
<meta name="citation_title" content="Ethnic/Race Differences in Aptitude by Generation in the United States: An Exploratory Meta-analysis">
<meta name='citation_author' content='Fuerst, John'>
<meta name='citation_keywords' content='immigrants'>
<meta name='citation_keywords' content='group differences'>
<meta name='citation_keywords' content='race'>
<meta name='citation_keywords' content='ethnicity'>
<meta name='citation_keywords' content='aptitude'>
<meta name='citation_keywords' content='national IQ'>
<meta name='citation_publication_date' content='2014/07/26'>

When you have implemented Google Scholar indexing it would be nice with a possibility to cite the work posted on your site. This is what I've built a script for. On your website simply include the list of scripts below:

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<strong><script src="./js/cite.js"></script></strong>

The first three lines are standard libraries for jQuery. The line in bold is the script I have written to display formatted citations on your site.

When the scripts have been included on your site the only thing you need is the html code below. The script will automatically fill in the dialog with the information from the meta tags above and the dialog will stay hidden until the button is clicked.

  <!-- CITATIONS DIALOG -->
<div id="dialog" title="Cite this paper" style="text-align:left">
  <p style="text-align: center">Copy and paste one of the formatted citations into your bibliography manager.</p>
  <table style="border-collapse:separate; border-spacing:2em">
    <tr style="vertical-align:top;">
      <td><strong>APA</strong></td>
      <td><span id="APA1"></span><span id="APA2"></span><span id="APA3"></span><span id="APA4" style="font-style: italic"></span></td>
    </tr>
    <tr style="vertical-align:top;">
      <td><strong>Bibtex</strong></td>
      <td>
        @article{<span id="bibtag"></span>,<br>
            title={<span id="bibtitle"></span>},<br>
            author={<span id="bibauthor"></span>},<br>
            journal={<span id="bibjournal"></span>},<br>
            year={<span id="bibyear"></span>},<br>
            url={<span id="biburl"></span>},<br>
        }
      </td>
    </tr>
  </table>
</div>

<button id="opener">Cite this paper</button>
<!-- END OF CITATIONS DIALOG -->

This script was made for the OpenPsych journals, where you can watch it in action. Look for the button Cite this paper in the bottom.

You can get a copy of the script here.

Below is a screenshot of the dialog with formatted citations ready to be copy-pasted to your bibliography manager.