Enriching OJS/OMP with JavaScript, No Coding Required

By Alec Smecher

Journals frequently look for ways to make their content and websites more interactive, and the most common way to accomplish this is using Javascript to link the site with outside services.

We’ve recently released a general-purpose plugin called the “Custom Header Plugin” to help accomplish this. It’ll replace a variety of single-purpose plugins and allow for rich, flexible integration without requiring any skill in coding.

Introducing the Custom Header Plugin

Users of recent releases of OJS and OMP can install the plugin as a Site Administrator from the Plugin Gallery:

Once it’s installed and enabled, the plugin will offer a “Settings” area that can be used to set up integrations:

Clicking “Settings” will open the dialog.

Anything entered here will be added to the headers of any public part of the website.

Using the Custom Header Plugin to integrate Twitter feeds

The example in the screenshot above can be used to enable various kinds of integration with Twitter:

<script async src="https://platform.twitter.com/widgets.js"></script>

Save this in the Custom Header Plugin settings. You won’t see any visible changes, but now you can use the normal content management tools in new ways. Visit https://publish.twitter.com for an easy-to-use tool that generates markup that you can use to present timelines, Tweet buttons, etc.

For example, to place a Twitter timeline on a sidebar block, use the Custom Block Manager plugin…

…to add a new block…

Click the “<>” button to be able to paste the code directly…

Save the new block and go to your journal’s Appearance form and ensure that the new block is placed on the sidebar, and you’ll see your new Twitter feed:

Using the Custom Header Plugin to add MathJax

MathJax can be used to format mathematical formulas embedded in websites. To use MathJax, their “Getting Started” guide suggests adding the following Javascript inclusion into a website:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"></script>

Putting this into the Custom Header Plugin’s contents setting means that MathJax formulas can be added to the journal website. (Note: if you want to use MathJax in HTML galleys, you’ll also need to make sure that the MathJax Javascript is included in your HTML, separately from the Custom Header Plugin.) For example, in a static page:

More Possibilities

Plenty of modern tools allow embedding using this method — including videos using e.g. https://videojs.com, visitor tracking, your own homebrew Javascript, and much more. These are things that could be done with bespoke plugins or template modification before, but this puts much more control into the hands of the journal/site administrator without necessitating template modifications, plugin coding, or other potentially maintenance-imposing approaches.

Facebook
Twitter
LinkedIn