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 ...
Collapse
 
aaronpeters profile image
Aaron Peters

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

Collapse
 
5t3ph profile image
Stephanie Eckles

Hey Aaron,

That's awesome to hear, thanks for letting me know! ๐Ÿ’ซ

Really nice image, too!

Collapse
 
emma profile image
Emma Goto ๐Ÿ™

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 ๐Ÿ˜

Collapse
 
5t3ph profile image
Stephanie Eckles

Cool! I use Gatsby at my day job, it was my intro to JAMstack ๐Ÿ˜Š

And thanks so much! ๐Ÿ’ซ

Collapse
 
5t3ph profile image
Stephanie Eckles

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"],
  });
Collapse
 
geshan profile image
Geshan Manandhar

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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!

Collapse
 
geshan profile image
Geshan Manandhar

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

Thread Thread
 
5t3ph profile image
Stephanie Eckles

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

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

Collapse
 
sm0ke profile image
Sm0ke

nice

Collapse
 
olafghanizadeh profile image
olafghanizadeh

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

Collapse
 
5t3ph profile image
Stephanie Eckles

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/