Social Cards As A Service

Ich liebe die Idee von programmatisch generierten Bildern. Diese Leistung ist heutzutage für uns als Frontend-Entwickler in greifbarer Nähe, dank des Konzepts von Headless-Browsern. Nehmen wir Puppeteer, die Bibliothek zur Steuerung von Headless Chrome. Das Generieren von Bildern aus URLs ist deren Standardanwendungsfall.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

Das sollte die grauen Zellen in Wallung bringen. Was wäre, wenn wir URLs auf unserer Website hätten, die – mit der Kraft unserer HTML- und CSS-Kenntnisse – perfekte kleine Designs zum Teilen mit dynamischen Daten erstellen... dann in Bilder umwandeln und für unsere Meta-Tags verwenden?

Das erste Mal, dass ich diese Idee sah, war Drew McLellans Dynamic Social Sharing Images. Drew schrieb ein Skript, um Puppeteer zu starten und die Aufgabe zu erledigen.

Da der Designteil eine reine HTML/CSS-Angelegenheit ist, können Sie sich sicher eine Konfiguration vorstellen, bei der die URL Parameter übergibt, die Dinge wie Text und Typografie, Farben, Größen usw. festlegen. Zeit hat genau das gebaut!

Die URL sieht so aus.

https://og-image.now.sh/I%20am%20Chris%20and%20I%20am%20**cool**%20la%20tee%20ding%20dong%20da..png?theme=light&md=1&fontSize=100px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fhyper-color-logo.svg

Es ist ziemlich erstaunlich, dass man einen ganzen Browser in einer Cloud-Funktion starten kann! Netlify bietet ebenfalls Cloud-Funktionen an, und als ich Phil Hawksworth darauf ansprach, erzählte er mir, dass er dies bereits für seinen Blog macht!

Auf einem Blogbeitrag wie diesem hier wird automatisch ein Bild wie dieses generiert.

Welches als Meta eingefügt wird.

<meta property="og:image" content="https://www.hawksworx.com/card-image/-blog-find-that-at-card.png">

Ich habe mich natürlich durch Phils Repos durchgewühlt und seine kleine Maschine gefunden, die das erledigt.

Ich bin wahnsinnig neidisch auf all das und muss mir selbst so etwas einrichten.