The Altmetric embeddable badges are a highly configurable addition for any website with scholarly content. However, the number and combinations of configurations for the badges can be overwhelming. What do each of the badge types look like? What do they look like with details on the right? How about with the popover? I realised it would be much simpler if somebody could directly configure a badge so that they can see how each option affects the final result.
At Altmetric we have been trialling the idea of employee-driven projects on Thursday afternoons – called Hackternoons. I decided to have a go at creating an “Interactive embed” during our Hackternoons. Here is the result, a configurable, tweakable, toggle-able embed:
Here is the HTML you can put in your webpage for the above result:
We have included this DIY embedinator in our documentation pages for the embeds.
The technical stuff
I decided to try ReactJS (from Facebook) for this project because it looked useful for creating isolated components. This turned out to be a very good choice and ReactJS’s component design fits very well. There are three components that comprise the “Interactive embeds” – the form, the embed preview and the HTML code required to reproduce that embed configuration on a website. There is one state structure that all those components read from and only the form component modifies. This allows for seperation of each component, they don’t communicate with each other and don’t even need to be aware of each other.
The source code for these configurable badges is up on Github, called golden-kestrel.