Create dynamic social share images using HTML + CSS via puppeteer. For a hosted solution, see awesome-social-share.
npm i puppeteer-social-image --save
import renderSocialImage from "puppeteer-social-image";
renderSocialImage({
template: "basic",
templateParams: {
backgroundImageUrl:
"https://images.unsplash.com/photo-1557958114-3d2440207108?w=1950&q=80",
title: "Hello, world"
},
output: "image.png",
size: "facebook"
});
import renderSocialImage from "puppeteer-social-image";
renderSocialImage({
templateBody: '<div class="Main">Hello, {{name}}!</div>',
templateStyles: ".Main { color: blue; }",
templateParams: {
name: "Jane"
},
output: "image.png",
size: "facebook"
});
Returns Promise<Buffer>
.
Type: function (opts): Promise
opts
(object) Configuration optionsopts.template
(string) Name of a prebuilt template. Valid values are:basic
(default)
opts.templateParams
(object) Params to be passed to the template. If using prebuilt templates, see below for APIs.opts.templateBody
(string?) Handlebars template to render in the body for a custom template. Populated with templateParams.opts.templateStyles
(string?) CSS to use for a custom template. Passed to the head.opts.customTemplates
(object?) Define multiple custom templatesopts.customTemplates[key]
(string) Name for the customTemplateopts.customTemplates[key].templateBody
(string) Handlebars template to render in the body for this custom template. Populated with templateParams.opts.customTemplates[key].templateStyles
(string) CSS to use for this custom template. Passed to the head
opts.output
(string?) Path to write imageopts.size
(string?) Preset size for the image. Valid values are:facebook
twitter
(default)
A basic template to show some short text overlaying an image.
title
(string) Title text for the imagebackgroundImageUrl
(string?) URL for the background imagebackgroundImageAnchor
(string?, default"C"
) Anchor point for the background image. Valid options areC
,N
,NE
,E
,SE
,S
,SW
,W
orNW
.backgroundImageOverlay
(boolean?, defaulttrue
) Add a dark overlay on top of the background imagebackground
(string?) CSS background prop. PreferbackgroundImageUrl
if using image.color
(string?, default"white"
) Color for the titlefontFamily
(string?, default'"Avenir Next", "Lato", "Helvetica Neue", sans-serif'
) Font familyfontSize
(string?, default"128px"
) Font size
MIT Β© Chris Villa