Post updated: 22.03.2021

I wanted to have automated social sharing cards for my Gatsby blog and I developed this as a side-project during the December 2020 holidays. While working on this, I wondered why not make the cards GIFfy. I was quite excited and was able to achieve what I wanted, only to get disappointed when I shared on Twitter that the GIF did not render as expected; it rendered as a non-GIF version. Given that I could not recall seeing a single GIF as a social card on Twitter, I should have known what to expect 😅.

Preview of my next upcoming post! 📢 ✍️https://t.co/tDhi9p1zo6

"How to automate the gif creation for social sharing cards" pic.twitter.com/YP7RTjs0lC

— Princiya 👧‍ (@princi_ya) January 8, 2021

Since then, this post has been long overdue. Recently, when I shared my blog post link with someone over Discord, the GIF worked. It worked on LinkedIn, it worked on Slack too. This motivated me to get back to this post to finish it off.

Useful links

• Source code
• Tutorial reference

Building a Gatsby plugin

This was the first time I tried to build a Gatsby plugin.

1. Setup

I followed the above mentioned tutorial to setup a Gatsby plugin which would generate automated images; the tutorial was pretty straight forward. I used Vectr to setup the below shown template which is the base GIF the plugin uses to print text.

It was the Christmas holiday season when I was working on this, and I picked the lights from this Codepen.

I used getwaves.io to generate the wave for the base GIF template.

2. Using Node.js library

Once the base GIF template was ready, I needed a Node.js library which would generate a GIF programmatically. The tutorial post referred Jimp but the GIF encoder was unavailable. I found gifwrap, a Jimp compatible library to work with GIFs.

The source code for generating a GIF file via Node.js explained 👇.

3. Add plugin to the Gatsby config

• I added the plugin to the gatsby-config.js file.
• Run gatsby build and the plugin will create a card.gif for every post. Like this