Zotero on a webpage

From using the Zotero API Links to an external site.on a web page to using the Zotero API on a Canvas page

It is possible directly use the Zotero API on a web page to show one or more formatted bibliographic entries.

Using the Zotero API on a web page

Carlos Rotger, "Using the Zotero API to Render Formatted Bibliography on a Webpage" at http://library.brown.edu/cds/2015/06/29/zotero-api-web/ Links to an external site. and "Annotated Bibliography in Scalar using Zotero" at http://library.brown.edu/cds/2015/06/30/scalar-zotero/ Links to an external site.

For example, if one wanted to show the book:

https://www.zotero.org/groups/kth-ii2202/items/itemKey/CESPV4EW Links to an external site.

You would write:

<a href="https://api.zotero.org/groups/335743/items/CESPV4EW?format=bib">Justin Zobel. Writing for Computer Science</a>

Which yields:

Justin Zobel. Writing for Computer Science Links to an external site.

Note that use of the base URL https://api.zotero.org/ Links to an external site. to access the Zotero API and that one had to know that the group name "kth-ii202" has the group ID "335743" as well as knowing that this specific item's key was CESPV4EW.

will generate:

Olivecrona, Henrik, Gerald Q Maguire, Marilyn E. Noz, Michael P. Zeleznik, Uldis Kesteris, and Lars Weidenhielm. “A CT Method for Following Patients with Both Prosthetic Replacement and Implanted Tantalum Beads: Preliminary Analysis with a Pelvic Model and in Seven Patients.” Journal of Orthopaedic Surgery and Research 11, no. 1 (December 2016). doi:10.1186/s13018-016-0360-7.

However, in this case you have to know that the Zotero username gqmaguirejr was 683389 and that the key needed to access this collection is ydkHgvxj6R8YvPk27ZfMffqc, in addition to knowing that the collection ID was NFQ8METT and the item's key was GGAFD6P6.

Note that you can change the bibliographic style to use any of the styles from https://www.zotero.org/styles Links to an external site. by adding a &style= parameter. For example, the above reference

https://api.zotero.org/users/683389/collections/NFQ8METT/items?itemKey=GGAFD6P6&key=ydkHgvxj6R8YvPk27ZfMffqc&format=bib&style=ieee-with-url Links to an external site.

will generate:

[1] H. Olivecrona, G. Q. Maguire, M. E. Noz, M. P. Zeleznik, U. Kesteris, and L. Weidenhielm, “A CT method for following patients with both prosthetic replacement and implanted tantalum beads: preliminary analysis with a pelvic model and in seven patients,” Journal of Orthopaedic Surgery and Research, vol. 11, no. 1, Dec. 2016 [Online]. Available: http://josr-online.biomedcentral.com/articles/10.1186/s13018-016-0360-7. [Accessed: 18-May-2016]

Moreover, in all of the above, you did not see the formatted bibliographic result until you clicked the URL.

Zotero API on a Canvas page

On a normal web page the above problem could be solved by adding Javascript, such as described in Carlos Rotger, "Annotated Bibliography in Scalar using Zotero" at http://library.brown.edu/cds/2015/06/30/scalar-zotero/ Links to an external site. . However, the TinyMCE editor will strip out Javascript from any page that you enter manually . This leaves two alternatives: (1) get an institutional administrator to add suitable Javascript to the pages (which will be for all pages) or (2) to think about an editor extension that will get the relevant text and insert it into the page - but keep the Zotero information (perhaps as JSON) so that the editor extension (or other tool) could use it again. This later approach will be explored elsewhere. Note that this approach could actually combine the two approaches, by having the Javascript executed by the editor extension when the author is editing the page and leave behind the text to be show as well as hidden text that can be processed later (either by the editor extension or by some other tool).

Note that there is another set of additional problems in the previous section and that is how to know the user ID, group ID, itemKey, etc. A very easy way to learn all of this information is to simple use Word or OpenOffice/LibreOffice to insert the desired item into a blank page and then toggle the field to display the field. For example, after adding the citation for the book used in the first example and toggling the display of the field one gets (with some reformatting for display below)

ADDIN ZOTERO_ITEM CSL_CITATION
{"citationID":"HKOnU2tv",
 "properties":{
                "formattedCitation":"[1]",
		 "plainCitation":"[1]"
	      },
 "citationItems":[{"id":13043,
                   "uris":["http://zotero.org/groups/335743/items/CESPV4EW"],
                   "uri":["http://zotero.org/groups/335743/items/CESPV4EW"],
                   "itemData":{
                                "id":13043
                                "type":"book",
                                "title":"Writing for computer science",
                                "publisher":"Springer Berlin Heidelberg",
                                "publisher-place":"New York, NY",
                                "number-of-pages":"284",
                                "edition":"3rd edition",
                                "source":"Library of Congress ISBN",
                                "event-place":"New York, NY",
                                "ISBN":"978-1-4471-6638-2",
                                "author":[{"literal":"Justin Zobel"}],
                                "issued":{"date-parts":[["2015"]]}
                              }
                  }],
 "schema":"https://github.com/citation-style-language/schema/raw/master/csl-citation.json"}

I got the above text by saving the document as Justin_Zobel-document.docx, then creating a directory Justin_Zobel-document, then did a cp ../Justin_Zobel-document.docx Justin_Zobel-document.zip; unzip Justin_Zobel-document.zip. If you look in the file: Justin_Zobel-document/word/document.xml you can find the citation inside a element

<w:instrText xml:space="preserve">