<p><em>Post updated: 22.03.2021</em></p>n<p><img src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/2ef6dad5c6ad1213618b4b8c2daa9b44/card.gif&quot; alt="Add GIFS for social sharing using Gatsby"></p>n<p>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 😅.</p>n<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Preview of my next upcoming post! 📢 ✍️<a href="https://t.co/tDhi9p1zo6">https://t.co/tDhi9p1zo6</a><br><br>&quot;How to automate the gif creation for social sharing cards&quot; <a href="https://t.co/YP7RTjs0lC">pic.twitter.com/YP7RTjs0lC</a></p>&mdash; Princiya 👧‍ (@princi_ya) <a href="https://twitter.com/princi_ya/status/1347585529408225280?ref_src=twsrc%5Etfw">January 8, 2021</a></blockquote>nn<p>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.</p>n<h2 id="useful-links"><a href="#useful-links" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Useful links</h2>n<ul>n<li><a href="https://github.com/princiya/blog/tree/master/plugins/social-cards&quot; target="_blank" rel="nofollow noopener noreferrer">Source code</a></li>n<li><a href="https://codeburst.io/how-to-automate-social-sharing-cards-on-your-gatsby-blog-77a356a58b38&quot; target="_blank" rel="nofollow noopener noreferrer">Tutorial reference</a></li>n</ul>n<h2 id="building-a-gatsby-plugin"><a href="#building-a-gatsby-plugin" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Building a Gatsby plugin</h2>n<blockquote>n<p>This was the first time I tried to build a Gatsby plugin.</p>n</blockquote>n<h3 id="1-setup"><a href="#1-setup" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>1. Setup</h3>n<p>I followed the above mentioned tutorial to setup a Gatsby plugin which would generate automated images; the tutorial was pretty straight forward. I used <a href="http://vectr.com/&quot; target="_blank" rel="nofollow noopener noreferrer">Vectr</a> to setup the below shown template which is the base GIF the plugin uses to print text.</p>n<p><img src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/9edca103e9f3c67bcb28f794f55158f5/banner.gif&quot; alt="Banner GIF"></p>n<p>It was the Christmas holiday season when I was working on this, and I picked the lights from this <a href="https://codepen.io/tobyj/pen/QjvEex&quot; target="_blank" rel="nofollow noopener noreferrer">Codepen</a>.</p>n<p>I used <a href="https://getwaves.io/&quot; target="_blank" rel="nofollow noopener noreferrer">getwaves.io</a> to generate the wave for the base GIF template.</p>n<h3 id="2-using-nodejs-library"><a href="#2-using-nodejs-library" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>2. Using Node.js library</h3>n<p>Once the base GIF template was ready, I needed a Node.js library which would generate a GIF programmatically. The tutorial post referred <code class="language-text">Jimp</code> but the GIF encoder was <a href="https://github.com/oliver-moran/jimp/tree/master/packages/type-gif&quot; target="_blank" rel="nofollow noopener noreferrer">unavailable</a>. I found <code class="language-text">gifwrap</code>, a <code class="language-text">Jimp</code> compatible <a href="https://github.com/jtlapp/gifwrap&quot; target="_blank" rel="nofollow noopener noreferrer">library</a> to work with GIFs.</p>n<p>The source <a href="https://github.com/princiya/blog/blob/master/plugins/social-cards/gif.js&quot; target="_blank" rel="nofollow noopener noreferrer">code</a> for generating a GIF file via Node.js explained 👇.</p>n<p>n <an class="gatsby-resp-image-link"n href="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/static/6fdecbd82347cef004d8d1b97cf32415/de766/explained.png"n style="display: block"n target="_blank"n rel="noopener"n >n n <spann class="gatsby-resp-image-wrapper"n style="position: relative; display: block; border: 1px solid #efefef max-width: 590px; margin-left: auto; margin-right: auto;"n >n <spann class="gatsby-resp-image-background-image"n style="padding-bottom: 87.16216216216216%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAACXBIWXMAABYlAAAWJQFJUiTwAAACkElEQVQ4y21UiU7rMBDk/38LxCXEfRUKvZukaeyc9RV7nnZT54GEpZGTqh7P7M7mpKwqQBvUUkIUFQpRomk7GGvgbIDWDtpYxLXb7bBer7HdbhlJkvC+2WwYJ2VZwhsDV5bo6gZOGThjYHQPrQ0OSuGgNLqDhjEWyXaLxWLB+Pz8xMfHB+bzOV9COJFlCXgPXQgsVmtU+R6myFCkDdJUYptkWCc5tplAVdd4fn7GxcUFrq+vcXZ2htPTUzw8PDD5QCglvPdoZIlCCFjrgOBhtIVWBsF79H0P6zxC8JhOp3h6emJiwuPjI2azGdseCWnJskVVNfi5nLNwzo3vIQQURYEsy7iWBHqmOv63zIQByjgYa+FDYMV975nEUH2dYzJ6JmtkkVSSure3N7y/v2O1Wg1NEULyn4lglrRIMoHpssBkKZHsO4QjKdmmi76+vvDy8oLX11fev7+/x6aMhKSwVRYHPRxyvQcJdKwyjEqVUmwzTVMG2aU9xoYtCzko1Nah9x4/CjbWjRZd1HUdlsslJpMJWyerBFI4NkUIwQeo2JvlHvP5AtO1RC7qX4S0W2u5y1Q7shsJqY500dHyQJjvC6wX+Ui4lw3bJaIIag4FmfJ3dXWFu7s7Vkshj9MzEtZViWJXIUv3SPIGVdP9ihDX1jm2enl5iZubGw44kcaJIWKODbkKRkGVFWqpIWSN7nCAs46DTiMXY0QHz8/PcXt7y2RETFNDXadaDoQ+QLcd2lKiaw6QVQttDM8yTYtSeiQkFff396yKIkSg3yjcXEMipGK3VY2mVcOX5diIv1ae5+OXJiJGZpwUa3tWEHhKfjciIi7KHk1FJIgYc0hS0yRDmqR8OyHO6V+IeYvfv5/PZPkfMaABXjm1IWMAAAAASUVORK5CYII='); background-size: cover; display: block;"n >n <imgn class="gatsby-resp-image-image"n style="width: 100%; height: 100%; margin: 0; vertical-align: middle; position: absolute; top: 0; left: 0; box-shadow: inset 0px 0px 0px 400px white;"n alt="Code explained"n title=""n src="https://atomic-temporary-42700218.wpcomstaging.com/blog/blog/static/6fdecbd82347cef004d8d1b97cf32415/fcda8/explained.png"n srcset="/blog/static/6fdecbd82347cef004d8d1b97cf32415/12f09/explained.png 148w,n/blog/static/6fdecbd82347cef004d8d1b97cf32415/e4a3f/explained.png 295w,n/blog/static/6fdecbd82347cef004d8d1b97cf32415/fcda8/explained.png 590w,n/blog/static/6fdecbd82347cef004d8d1b97cf32415/efc66/explained.png 885w,n/blog/static/6fdecbd82347cef004d8d1b97cf32415/c83ae/explained.png 1180w,n/blog/static/6fdecbd82347cef004d8d1b97cf32415/de766/explained.png 1838w"n sizes="(max-width: 590px) 100vw, 590px"n />n </span>n </span>n n </a>n </p>n<h3 id="3-add-plugin-to-the-gatsby-config"><a href="#3-add-plugin-to-the-gatsby-config" aria-hidden class="anchor"><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>3. Add plugin to the Gatsby config</h3>n<ul>n<li>I added the plugin to the <a href="https://github.com/princiya/blog/blob/master/gatsby-config.js#L32&quot; target="_blank" rel="nofollow noopener noreferrer">gatsby-config.js</a> file.</li>n<li>Run <code class="language-text">gatsby build</code> and the plugin will <a href="https://github.com/princiya/blog/blob/master/plugins/social-cards/index.js#L89&quot; target="_blank" rel="nofollow noopener noreferrer">create</a> a <code class="language-text">card.gif</code> for every post. <a href="https://github.com/princiya/blog/blob/gh-pages/are-you-a-new-tech-lead/card.gif&quot; target="_blank" rel="nofollow noopener noreferrer">Like this</a></li>n</ul>n <div style="margin-top=55px; font-style: italic;">(This is an article posted to my blog at princiya.com/blog. You can read it online by <a href="https://atomic-temporary-42700218.wpcomstaging.com/blog/gif-for-social-card-images-gatsby/">clicking here</a>.)</div>