Dynamically Rendering Social Sharing Images

After getting inspired by dynamically generated social sharing images that I've seen on IndieHackers, I decided to roll-up my sleeves ship this feature for Fizbuz. Here's a quick recap of what I had to build:

1. I created a screenshot API that accepts a URL and uses chrome-aws-lambda & puppeteer to capture a screenshot and store it in S3.

2. I created a special webpage to render a tl;dr version of a user's Fizbuz profile. This is the webpage that the screenshot API will request. Here's an example: https://fizbuz.com/u/carter/share

3. When a Fizbuz user updates their profile, I invoke the /screenshot API:

await fetch(`/screenshot/${user.nickname}/share`)

4. When someone shares a Fizbuz profile URL on a social platform, there are meta tags in the header that point at the preview image that was stored in S3:

<meta property="og:image" content="${imageUrl}" />
<meta name="twitter:image" content="${imageUrl}" /> 

That's it! ✨

https://fizbuz.com/u/carter