How to generate social share images

It’s now posible to generate preview images for social networks (Twitter, Slack, LinkedIn…).

This great idea come from a conversation I had with Luciano Mammino (aka @Loige). I basically took 85% of his code. Thanks Luciano 😊

How to do it?

1. Open 2 terminals:

   # Terminal 1
   npm run dev
   
   # Terminal 2
   npm run generatePostPreviewImages
   # ..you can also specify the url (if different from http://localhost:8000/)
   npm run generatePostPreviewImages http://localhost:1234/

2. In the post’s header, add the generated images:

   title: My blog post
   # ...
   imageShare: ./social-media-card-generator-share.png

Gatsby will first create extra url suffixed by /image_share (i.e. http://localhost:8000/gatsby-starter-morning-dew-v1-1/image_share). Then, Pupetter will take a snapshot and add it to your post folder.

💡Quick tip: If you want to recreate this pictures

# delete all share images
find ./content -name "*-share.png" -type f -delete

If you want to skip the file generation for some posts, add generate-card: false to the post’s header.

---
title: My blog post
# ...
generate-card: false
---