DEV Community

Automated Social Sharing Images with Puppeteer, 11ty, and Netlify

Stephanie Eckles on May 02, 2020

Learn how to leverage the powerfully flexible templating capabilities of 11ty to generate templates for automating social sharing screenshots with ...

Read full post

Aaron Peters • Jun 27 '20

Hi Stephanie,

After investigating various approaches to generate social images automatically, I settled on using yours as my starting point. This article has been very helpful in getting it implemented in my site (cdnplanet.com) and Eleventy setup. It's all done now, including a some optimizations that make sense for me, for example check with fs to not generate the image if it already exists.

cdnplanet.com/static/img/social/ge...

Bye!
Aaron

Stephanie Eckles • Jun 27 '20

Hey Aaron,

That's awesome to hear, thanks for letting me know! 💫

Really nice image, too!

Emma Goto 🍙 • May 2 '20

Nice! I use Gatsby and I do it semi-manually using a modified version of the script from this tutorial.

I run the script before I publish each post, and it uses some stuff that is stored in the frontmatter of the post (the title, an emoji and a link to an image from Unsplash) to generate two separate images for Twitter and DEV.

As a side note - your website looks amazing! I'm loving the the subtle rainbow / gradients 😍

Stephanie Eckles • May 2 '20

Cool! I use Gatsby at my day job, it was my intro to JAMstack 😊

And thanks so much! 💫

Stephanie Eckles • May 3 '20

Updated with a better solution if using webfonts. The change was:

await page.setContent(html, {
    // This was previously `domcontentloaded`
    // Now waits for 0 network connections presuming fonts down downloading
    waitUntil: ["networkidle0"],
  });

Geshan Manandhar • May 2 '20

Great post, are there any screenshot examples for the blog posts?

Stephanie Eckles • May 2 '20

Thanks! The ones I'm generating for the site mentioned are basically mini versions of the header that you see for posts. The wonderful part is that you can use CSS to achieve any design needed! Think of it as essentially an "iPhone in landscape mode" size canvas. You can populate the base HTML with something mimicking your real content to create the design, and start by allowing it to be picked up by 11ty for easier review, just shrink the viewport down to 600x315 👍🏻 Hope that helps!

Geshan Manandhar • May 3 '20

I was looking for a link to the jpg file :).

Stephanie Eckles • May 5 '20

Ha, ok! Here's one - I update only the title and the episode number:

moderncss.dev/img/animated-image-g...

Sm0ke • May 2 '20

nice

olafghanizadeh • May 28 '20

Do you have the whole script completed? I cannot get it to work and wonder if I have made a mistake somewhere

Stephanie Eckles • May 28 '20

The completed script is represented here, but you can also download the starter I created that uses this to explore what might be different: 11ty-netlify-jumpstart.netlify.app/