Sunday, 4 October 2009

Keep your publication list up to date with Javascript and Google Spreadsheet

Adding a new publication to a HTML page is a fiddly business, especially if you want to add some markup or links. This might explain why there are so many websites of scientists whose last publication appears to be four years ago. If only adding a new publication were as easy as, oh, let's say...as easy as adding a row to a spreadsheet.

Well, you're in luck. The following procedure makes it as easy as just that. You can maintain the same list of publications on several web sites all of which will automatically be kept up-to-date. If you're familiar with Javascript and CSS, you can also easily change the markup used and its appearance. The result should look something like the following image:

Here's how it's done:
(1) Create a google spreadsheet, and use the same column names as shown in this spreadsheet.
(2) Add some information on your papers. Again, see the example spreadsheet for the format (note especially the author list format).
(3) Click on Share/Publish as Web Page, and make note of the key (i.e. the text between "key=" and "&single").
(4) Download addpapers.js, edit the line 'me = "N. M. O'Boyle";', and the line with the email address baoilleach@gmail.com, and put it in the same directory as a HTML page, papers.html (for example).
(5) Edit papers.html to load addpapers.js in its HEAD ("<script type='text/javascript' src='addpapers.js'></script>")
(6) Download publishious.css, and put it in the same directory as papers.html.
(7) Edit papers.html to apply publishious.css in its HEAD ("<link rel='stylesheet' media='all' type='text/css' href='publishious.css' />").
(8) Add the following to papers.html after replacing MYKEY by the value of the key for your spreadsheet:
<div id="paperentries"></div>
<script src="http://spreadsheets.google.com/feeds/list/MYKEY/od6/public/values?alt=json-in-script&callback=handlejson"
type="text/javascript"></script>

Hopefully that works. If it doesn't, check your browser's error console (in Firefox Tools/Error console) for some idea of the problem.

It's probably not a good idea to rely totally on Google spreadsheets, so what I do is view the generated HTML code using the Web Developer plugin and paste it into the HTML page as the content of the paperentries div. That way, even if Google spreadsheets goes down (or changes its API), a couple of papers will still appear.

Feel free to adapt this code for your own use, although I'd appreciate if you could add a comment below with a link to the resulting webpage.

8 comments:

  1. That's a neat hack, Noel, but you're a little in danger of being clever for cleverness' sake. Citation managers usually give you a way of marking papers of which you're an author. Mendeley even gives you an embed code.

    ReplyDelete
  2. Some time ago I requested this feature from Mendeley. Do they provide JSON or just HTML?

    ReplyDelete
  3. @mrgunn: Sorry - I realise that I misunderstood your point. For sure, any citation manager could be used to simply keep track of your papers. However, here the goal is to keep up-to-date the publication list on your webpage. I'd like to see a citation manager that could do this (really!).

    ReplyDelete
  4. Very clever. I'll try and make use of it. Can't link the results as I don't have a webpage. Not anymore. But thanks a lot all the same.

    ReplyDelete
  5. timely post, as I'm considering a major redesign of our group's homepage (of which I'm the amateur webmaster). The way we do our pubs page is clunky code wise, but modular and easy to update. Each entry looks like this. () are of course angle brackets:

    (p)
    (span class="style3") "TITLE"(/span)
    (span class="style2")AUTHORS(/span)
    (span class="style2")(i)JOURNAL(/i)(/span)
    (span class="style3") YR,(/span)
    (span class="pgs")(i) ISSUE,(/i) PGS.(/span)
    (span class="style2")(a href="")Full Article-PDF(/a)
    (a href="")(Supporting Information)(/a).(/span)
    (span class="style2")DOI:(a href="http://dx.doi.org/")(DOI)(/a)(/span)
    (/p)

    and when it's time to update the page, I just copy and paste that block of code... then update the fields.

    When I dig in to the redesign more seriously, I'll give your code a try. I'll let you know how it works.

    BTW, here's the outcome of our code on our pubs page: http://tinyurl.com/yzyyggj

    ReplyDelete
  6. @azmanam: Looks good. One advantage of generating the HTML with Javascript is that you can add HTML elements to all of the papers at the same time, e.g. I have a drop-down box for the abstract. Or you could filter by tag, depending on what tags the user chooses in a drop-down box, etc, etc. It's also useful for when you need to list your papers in your CV or grant application. You can just write some code to grab it from the google spreadsheet and format it nicely.

    ReplyDelete
  7. Finally got around to using this! One tiny thing I noticed is your email address is hard coded in addpapers.js

    Easy to change, but easy to miss!

    Very slick way to organise ones publications.

    ReplyDelete
  8. Hey Craig. It just happened that I was updating addpapers.js today, hence the email address etc. I'll update the instructions above to point this out.

    ReplyDelete