awesome-social-share

An HTTP API for creating dynamic social share images using HTML + CSS. puppeteer-social-image as a service.

• Make social sharing more engaging: add a dynamic visual to each page.
• Custom templates: built using HTML & CSS.
• Perfect for large data sets: like jobs boards, real estate platforms and more.
• Minimal config: just add an image URL to your page, and let us handle the rest.

This README is a proposal. No code has currently been written.

Example

https://awesomesocialshare.com/image.png?template=basic&~title=Hello%20twitter%2C%20%40chrisvxd

Using public templates

Call awesomesocialshare.com/image.jpg with the query params

• template (string) Name of the template
• size (string? Default twitter) Size of the image (facebook, twitter, 400x400).
• ~* (string) Template params, prefixed with ~, i.e. ~title

These query params are based on the puppeteer-social-image API.

Using private templates

Node.js

Registering a template

import { registerTemplate } from "awesome-social-share";

registerTemplate(API_KEY, SECRET_KEY, {
  templateBody: "",
  templateStyles: ""
});

Generating a URL

On the client

On the client, we use domain whitelisting to verify the generation. The library will make a request to API to get generate the URL.

import awesomeSocialShare from "awesome-social-share";

const url = awesomeSocialShare(API_KEY, {
  template: "basic",
  templateParams: {
    title: "Hello, World"
  }
});

On the server

On the server, we use a secret to generate the URL without having to make an additional call to the API.

import awesomeSocialShare from "awesome-social-share";

const url = awesomeSocialShare(API_KEY, SECRET_KEY, {
  template: "basic",
  templateParams: {
    title: "Hello, World"
  }
});

Outside of Node.js

The awesome-social-share library for Node is a simple library that creates a URL by encrypting the payload in AES-256. The URL ends up looking like:

https://www.awesomesocialshare.com/image?apiKey=1ef2fesgv5sg4g54&data=awfsdgsdcvfgtrhgsefdgse

Here’s an example of the JavaScript code without the awesome-social-share library, which should help you to implement it in other languages

const crypto = require("crypto");
const cipher = crypto.createCipher("aes256", SECRET_KEY);

const data = {
  template: "basic",
  templateParams: {
    title: "Hello, World"
  }
};

const dataEncrypted =
  cipher.update(JSON.stringify(data), "utf8", "hex") + cipher.final("hex");

const url = `https://awesomesocialshare.com/image?apiKey=${awesomeApiKey}&data=${dataEncrypted}`;

License

MIT © Chris Villa