How to produce bibliographic metadata for your web page?

In an accompanying post I explain why to provide bibliographic metadata for your web entries could be beneficial.

Requirements

In this tutorial, I will show how to produce and embed bibliographic metadata into your web page. To follow this guide, I assume that:

1. you have installed the standalone version of Zotero.
2. you have installed the appropriate Zotero connector (plugin) for your browser.
3. you have a working knowledge how to use Zotero (There are many (video) instructions on the internet, see for instance the ‘official’ Zotero Quick Start Guide or the introduction by the Idaho State University).

Bibliographic metadata in 14 small steps

1. Start Zotero and your browser. Go to the page where you want to embed the metadata. You see the Zotero icon for web pages in the place where your web browsers shows the symbols for its installed extensions.

2. Click on the icon and download the rudimentary bibliographic information for the web page.

3. Change to Zotero and inspect the new downloaded entry. You will notice that many details are still missing.

4. Change the item type to an appropriate value: in my case “Blog Post”. You will see that the Zotero icon changes to reflect the new value. Different item types have different fields.

5. Add the relevant information as shown on the screenshot. Depending on the chosen item type, there are different fields to fill in. There is a list of item types, fields, and their meanings on a Zotero help page.

6. When you bibliographic entry is complete you can start the conversion and export procedure. Open the context menu (on MacOS is it a right mouse click).

7. From the appearing drop down menu choose the “COinS” translator.

8. Save the converted data in a file on your hard disk. The place is not essential as we only need the text inside the file. After we have copied the COinS data into our web site, we will delete our intermediary file.

9. File name and file extension are also irrelevant. Just check if your export format is “COinS”.

10. Open the exported file with your text editor and select the COinS HTML code. You will see the text of your bibliography record URL encoded in the COinS standard format. URL Encoding replaces unsafe ASCII characters with a “%” followed by two hexadecimal digits. But don’t worry, it is not necessary to understand the code snippet.

11. Copy and paste the code in the source code of your web page. Again, the place does not matter. On a life web page visitor do not see these code but only the result – the particular Zotero icon.

12. Now inspect you life web page. You will see that the Zotero icon has changed from “Web Page” to “Block Post”. Congratulation you made it!

13. We need to check if everything works as intended. Save the new generated bibliographic metadata into your zotero database.

14. Check if all the bibliographic metadata are imported correctly.

Wrapping up and additional information

You have learned to create, embed, and download bibliographic metadata from those web pages where you have access to the source code. There are further options in addition to what I have demonstrated in the tutorial:

• You are not limited to the item type “Block Post”: You can choose from all the 34 different types of bibliographic entries. But watch out: Every item type has its (slightly) different input form and Zotero icon. You need to know what kind of information each bibliographic record type needs.
• You are not limited to one COinS entry: You can generate and embed as many bibliographic entries you want. If your web page has a list of references, you can offer visitors of your web page to download the bibliographic information for the full bibliography. The Zotero icon changes to a folder if there is more than one bibliographic entry to download.
• You do not need to generate a COinS entry by yourself if the bibliographic entry has a DOI: I do not know how this works, but Zotero recognizes DOI entries. See as an example, my blog post about data science education.