P`s Blog


How to create automated GIF social sharing cards

January 8, 2021 • ☕️ 3 min read

Post updated: 22.03.2021

Add GIFS for social sharing using Gatsby

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 😅.

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.

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.

Banner GIF

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 👇.

Code explained

3. Add plugin to the Gatsby config