In letzter Zeit wurde viel über automatisierte Social-Media-Bilder gesprochen. GitHub hat seine eigenen erstellt. Ein WordPress-Plugin wurde von Jetpack übernommen. Es gibt definitiv Interesse! Leute wie Ryan Filler und Zach Leatherman haben eigene Social-Media-Bilder implementiert. Sie mussten viele Dinge selbst programmieren. Aber die Landschaft verändert sich und Werkzeuge stehen zur Verfügung, um den Prozess zu vereinfachen.
In diesem Tutorial erstellen wir unsere eigenen automatisierten Social-Media-Bilder mit HTML und CSS, integrieren sie in einen Eleventy-Blog – hauptsächlich durch Konfiguration – und stellen unsere Website auf Netlify bereit.
Wenn Sie es wirklich, *wirklich* nicht erwarten können, schauen Sie sich das Ergebnis an oder stöbern Sie im Projekt!
Was sind Social-Media-Bilder noch mal?
Im <head>-Bereich von HTML fügen wir einige Open Graph Markups ein.
<meta property="og:title" content="The blue sky strategy" />
<meta property="og:description" content="Less clouds, more blue" />
<meta property="og:image" content="/sky-with-clouds.jpg" />Wenn wir diese Seite auf Facebook teilen, sehen wir und unsere Freunde das hier.
LinkedIn, Twitter, WhatsApp, Slack, Discord, iMessage... All diese Dienste verhalten sich so ziemlich gleich: Sie bieten eine visuelle „Karte“, die den Link begleitet und ihm mehr Platz und Kontext gibt.
Twitter hat seine eigenen Markups mit seinen Twitter Cards, aber sie sind sehr ähnlich. Und Twitter greift auf Open Graph zurück, wenn es diese nicht finden kann.
Es ist natürlich, dass unsere Seiten einen Titel und eine Beschreibung haben. Aber im obigen Screenshot sind diese recht klein im Vergleich zu dem Platz und der Aufmerksamkeit, die das Bild von Himmel und Wolken erhält – ganz zu schweigen von der Größe des klickbaren Bereichs. Das ist die Macht des Social-Media-Bildes. Es ist leicht, die Auswirkungen zu verstehen, die diese Bilder haben können, wenn ein Link geteilt wird.
Von Stufe 0 bis Stufe 3
Nicht alle Social-Media-Bilder sind gleich. Dies sind keine offiziellen Begriffe, aber betrachten wir nummerierte „Stufen“ für die Wirkung von Social-Media-Bildkarten.
Stufe 0
Das grundlegendste Social-Media-Bild ist kein Bild. Der Link geht möglicherweise in einem Meer von Inhalten mit dem kleinen Bereich und wenig visueller Darstellung unter.
Stufe 1
Eine klassische Technik ist die Erstellung eines **website-weiten** Social-Media-Bildes. Während diese Lösung ein gutes Verhältnis von Ergebnis zu Aufwand zu bieten scheint, könnte man argumentieren, dass sie schlechter ist als gar kein Bild. Sicher, wir bekommen etwas Aufmerksamkeit, aber die Reaktion könnte negativ sein, besonders wenn die Leute viele Links zu dieser Website sehen, die alle gleich aussehen. Es birgt die Gefahr, repetitiv und unnötig zu wirken.
Stufe 2
Die nächste Stufe ist Standard in Blogs und Nachrichtenseiten: das Social-Media-Bild eines Beitrags. Jeder Beitrag hat sein eigenes Beitragsbild, und sie unterscheiden sich von Beitrag zu Beitrag. Diese Praxis ist für eine Nachrichtenseite, bei der das Foto den Seiteninhalt ergänzt, absolut legitim. Der potenzielle Nachteil ist, dass die Suche und Erstellung von Grafiken für jeden einzelnen veröffentlichten Beitrag Aufwand erfordert.
Das kann zu etwas Faulheit führen. Wir haben alle Bilder gesehen, die offensichtlich Stockfotos sind. Es mag Aufmerksamkeit erregen, aber vielleicht nicht die Art von Aufmerksamkeit, die man sich tatsächlich wünscht.
Stufe 3
Die letzte Stufe: inhaltsreiche, aussagekräftige Social-Media-Bilder pro Seite. CSS-Tricks macht genau das. Die Social-Media-Bilder des Teams sind gebrandet. Sie teilen das gleiche Layout. Sie erwähnen den Titel des Beitrags zusammen mit dem Namen und Profilbild des Autors, etwas, das der reguläre Titel und die Beschreibung nicht zeigen konnten. Sie erregen Aufmerksamkeit und sind einprägsam.
Es gibt eine offensichtliche Anforderung an diesen Ansatz: Automatisierung. Es kommt nicht in Frage, für jeden möglichen Link einzigartige Bilder zu erstellen. Denken Sie nur an den Overhead. Wir bräuchten eine programmatische Lösung, die uns bei der Schwerstarbeit hilft.
Lassen Sie uns einen Blog mit Blog-Posts mit einzigartigen Social-Media-Bildern starten
Um uns eine schöne kleine Ausrede (und Sandbox) zu geben, um einzigartige Social-Media-Bilder zu erstellen, werden wir einen schnellen Blog zusammenstellen. Wenn ich einen Artikel für diesen Blog schreibe und veröffentliche, befolge ich einen schnellen zweistufigen Prozess:
- Schreiben und veröffentlichen des Artikels
- Posten der veröffentlichten URL in meine Social-Media-Konten.
Hier müssen Social-Media-Bilder glänzen. Wir wollen unserem Blog die beste Chance geben, bemerkt zu werden. Aber das ist nicht unser einziges Ziel. Dieser Blog soll unsere persönliche Marke etablieren. Wir wollen, dass unsere Freunde, Kollegen und Follower uns in Erinnerung behalten, wenn sie unsere Social-Media-Posts sehen. Wir wollen etwas Wiederholbares, Wiedererkennbares und Repräsentatives von uns selbst.
Einen Blog zu erstellen ist viel Arbeit. Obwohl automatisierte Social-Media-Bilder cool sind, ist es unklug, zu viel Zeit darauf zu verwenden. (Chris kam Ende 2020 zu demselben Schluss). Um also effizient zu sein, erstellen wir eine Eleventy-Website. Eleventy ist ein einfacher statischer Site-Generator. Anstatt bei Null anzufangen, verwenden wir eines der Starterprojekte. Tatsächlich wählen wir das erste: eleventy-base-blog.
Besuchen Sie die GitHub-Seite von eleventy-base-blog und verwenden Sie sie als Vorlage.
Erstellen wir das Repository und legen einen Repository-Namen und eine Beschreibung fest. Wir können es öffentlich oder privat machen, das spielt keine Rolle.
Als Nächstes klonen wir unser Repository lokal, installieren Pakete und führen die Website aus.
git clone [your repo URL]
cd my-demo-blog ### Or whatever you named it
npm install
npm run serveUnsere Website läuft unter https://:8080.
Jetzt lassen Sie uns sie bereitstellen. Netlify macht dies zu einer superschnellen (und kostenlosen!) Aufgabe. (Oh, und Spoiler-Alarm: Unsere Automatisierung von Social-Media-Bildern basiert auf einer Netlify-Funktion.)
Gehen wir also zu Netlify und erstellen Sie ein Konto, falls Sie noch keines haben. Egal, erstellen Sie eine neue Website.
Gehen Sie durch den Prozess, Netlify den Zugriff auf das Blog-Repository zu gestatten.
Netlify stellt unsere Website bereit.
Nach etwa einer Minute ist das Blog bereitgestellt.
Eine Bildvorlage für alle
Unsere Social-Media-Bilder werden auf einer Bildvorlage basieren. Um diese Vorlage zu entwerfen, werden wir die Technologien verwenden, die wir bereits kennen und lieben: HTML und CSS. HTML verwandelt sich nicht automatisch in Bilder, aber es gibt Werkzeuge dafür, das berühmteste ist headless Chrome mit Puppeteer.
Anstatt unseren Social-Media-Bild-Stack selbst zu bauen, verwenden wir jedoch das Resoc Image Template Development Kit. Vom Projektstamm aus können wir dies im Terminal ausführen:
npx itdk init resoc-templates/default -m title-descriptionDieser Befehl erstellt eine neue Bildvorlage im Verzeichnis resoc-templates/default. Er öffnet sich auch in einem neuen Browserfenster.
Wir könnten diese Vorlage so verwenden, wie sie ist, aber das bringt uns nur auf Stufe 2 auf dem „wirkungsvollen“ Spektrum. Was wir brauchen, um die volle Stufe 3 zu erreichen und die CSS-Tricks-Vorlage anzupassen, ist:
- der Titel der Seite, rechtsbündig ausgerichtet mit etwas negativem Raum links.
- ein Fußzeile unten, die einen Farbverlauf enthält, der aus zwei Farben besteht, die wir im gesamten Blog verwenden werden.
- der Name und das Profilbild des Autors des Beitrags.
Wenn wir zum Browser zurückkehren, sehen wir im Parameter-Panel des Vorlagen-Betrachters, dass die Vorlage zwei Parameter erwartet: einen Titel und eine Beschreibung. Das ist nur die Vorlage, die wir gewählt haben, als wir -m title-description im Terminal ausgeführt haben, als wir die Dinge eingerichtet haben. Aber wir können weitere Parameter hinzufügen, indem wir resoc-templates/default/resoc.manifest.json bearbeiten. Insbesondere können wir den zweiten Parameter entfernen, um Folgendes zu erhalten:
{
"partials": {
"content": "./content.html.mustache",
"styles": "./styles.css.mustache"
},
"parameters": [
{
"name": "title",
"type": "text",
"demoValue": "A picture is worth a thousand words"
}
]
}Der Betrachter spiegelt die Änderung im Browser wider.
Es ist Zeit, das Bild selbst zu gestalten, was wir in resoc-templates/default/content.html.mustache tun können.
<div class="wrapper">
<main>
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>Das ist nur normales HTML. Nun ja, außer {{ title }}. Das ist Mustache, das Templating-Framework, das Resoc verwendet, um Parameterwerte in die Vorlage einzufügen. Wir können sogar etwas Text in das Feld „Titel“ eingeben, um zu sehen, wie es funktioniert.
Wenn wir uns die Vorschauen ansehen, bemerken wir, dass uns ein Bild fehlt: profil-pic.jpg. Kopieren Sie Ihr bestes Profilbild nach resoc-templates/default/profil-pic.jpg.
Es ist Zeit, das CSS in resoc-templates/default/styles.css.mustache zu schreiben. Der Punkt dieses Beitrags ist nicht, *wie* die Vorlage gestaltet wird, aber hier ist, was ich verwendet habe:
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Raleway&display=swap');
.wrapper {
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
h1 {
text-align: right;
margin: 2vh 3vw 10vh 20vw;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
font-family: 'Anton';
font-size: 14vh;
text-transform: uppercase;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
h2 {
color: white;
margin: 0;
font-family: 'Raleway';
font-size: 10vh;
}
footer {
flex: 0 0;
min-height: 20vh;
display: flex;
align-items: center;
background: rgb(11,35,238);
background: linear-gradient(90deg, rgba(11,35,238,1) 0%, rgba(246,52,12,1) 100%);
padding: 2vh 3vw 2vh 3vw;
}
footer img {
width: auto;
height: 100%;
border-radius: 50%;
margin-right: 3vw;
}Die meisten Größen basieren auf vw und vh Einheiten, um verschiedene Kontexte zu antizipieren, in denen die Vorlage gerendert werden könnte. Wir werden die Empfehlungen von Facebook befolgen, die 1200×630 sind. Twitter Cards hingegen haben eine andere Größe. Wir könnten Bilder in niedriger Auflösung rendern, wie z. B. 600×315, aber wir entscheiden uns für 1200×630, sodass wir nur mit Pixeln arbeiten müssen.
Der Betrachter rendert die Facebook-Vorschau in 1200×630 und skaliert sie herunter, um auf den Bildschirm zu passen. Wenn die Vorschau Ihren Erwartungen entspricht, werden dies auch die tatsächlichen Open Graph-Bilder tun.
Bisher entspricht die Vorlage unseren Anforderungen.
Was ist mit dem Bild?
Es gibt noch eine Kleinigkeit, die wir hinzufügen müssen, bevor wir mit der Vorlage fertig sind. Einige unserer Blog-Posts werden Bilder haben, aber nicht alle. In Situationen, in denen ein Beitrag kein Bild hat, wäre es cool, das Bild zu verwenden, um den Platz links zu füllen.
Dies ist ein neuer Vorlagenparameter, also müssen wir resoc-templates/default/resoc.manifest.json erneut aktualisieren.
{
"partials": {
"content": "./content.html.mustache",
"styles": "./styles.css.mustache"
},
"parameters": [
{
"name": "title",
"type": "text",
"demoValue": "A picture is worth a thousand words"
},
{
"name": "sideImage",
"type": "imageUrl",
"demoValue": "https://resoc.io/assets/img/demo/photos/pexels-photo-371589.jpeg"
}
]
}Deklarieren wir ein zusätzliches div in resoc-templates/default/content.html.mustache.
<div class="wrapper">
<main>
{{#sideImage}}
<div class="sideImage"></div>
{{/sideImage}}
<h1>{{ title }}</h1>
</main>
<footer>
<img src="profil-pic.jpg" />
<h2>Philippe Bernard</h2>
</footer>
</div>Die neue Syntax {{#sideImage}} ... {{/sideImage}} ist ein Mustache-Abschnitt. Sie ist nur vorhanden, wenn der Parameter sideImage definiert ist.
Wir benötigen etwas zusätzliches CSS, um das Bild zu behandeln. Beachten Sie, dass wir die Mustache-Syntax hier verwenden können, um den Wert von background-image für einen bestimmten Beitrag einzufügen. So bin ich in der Datei resoc-templates/default/styles.css.mustache vorgegangen:
{{#sideImage}}
.sideImage {
position: absolute;
width: 100%;
height: 100%;
background-image: url({{{ sideImage }}});
background-repeat: no-repeat;
background-size: auto 150vh;
background-position: -35vw 0vh;
-webkit-mask-image: linear-gradient(45deg, rgba(0,0,0,0.5), transparent 40%);
}
{{/sideImage}}Unsere Vorlage sieht großartig aus!
Wir committen unsere Vorlage.
git add resoc-templates
git commit -m "Resoc image template"Bevor wir die Social-Media-Bilder automatisieren, generieren wir testweise ein manuelles Bild als Teaser. Der Betrachter stellt eine Befehlszeile zur Verfügung, um das entsprechende Bild für Testzwecke zu generieren.
Kopieren Sie es, führen Sie es in einem Terminal aus und öffnen Sie output-image.jpg.
Automatisierung von Social-Media-Bildern
Okay, wir haben ein Bild über die Befehlszeile erstellt. Was sollen wir jetzt tun? Es so oft aufrufen, wie es Seiten auf unserem Blog gibt? Das klingt nach einer langweiligen Aufgabe, und es gibt ein tieferes Problem mit diesem Ansatz: Zeit. Selbst wenn die Erstellung eines einzelnen Bildes etwa zwei Sekunden dauern würde, können wir es mit der Anzahl der Seiten multiplizieren und sehen leicht, wie der Aufwand wächst und wächst.
Die ursprüngliche Eleventy-Blog-Vorlage wird fast sofort generiert, aber wir sollen eine Minute für etwas so Randständiges wie Social-Media-Bilder warten? Das ist nicht akzeptabel.
Anstatt diese Aufgabe zur Build-Zeit auszuführen, werden wir sie aufschieben, im Lazy-Style, mit einer Netlify-Funktion und einem Netlify On-Demand Builder. Tatsächlich befassen wir uns nicht direkt mit einer Netlify-Funktion – ein Eleventy-Plugin wird sich darum kümmern.
Installieren wir das jetzt. Wir können das Resoc Social Image Plugin für Eleventy zusammen mit seinem Begleit-Netlify-Plugin mit diesem Befehl hinzufügen:
npm install --save-dev @resoc/eleventy-plugin-social-image @resoc/netlify-plugin-social-imageWarum zwei Plugins? Das erste ist für Eleventy bestimmt, während das zweite Framework-agnostisch ist (es kann zum Beispiel für Next.js verwendet werden).
Bearbeiten Sie .eleventy.js im Stammverzeichnis des Projekts, damit wir das Plugin importieren.
const pluginResoc = require("@resoc/eleventy-plugin-social-image");Konfigurieren Sie es nahe dem Anfang von .eleventy.js, direkt nach dem vorhandenen eleventyConfig.addPlugin.
eleventyConfig.addPlugin(pluginResoc, {
templatesDir: 'resoc-templates',
patchNetlifyToml: true
});templatesDir ist der Ort, an dem wir unsere Bildvorlage gespeichert haben. patchNetlifyToml bittet das Plugin, @resoc/netlify-plugin-social-image für uns in netlify.toml zu konfigurieren.
Wir möchten, dass alle unsere Seiten automatisierte Social-Media-Bilder haben. Öffnen wir also die Master-Vorlage _includes/layouts/base.njk und fügen Sie dies nahe dem Anfang der Datei hinzu:
{% set socialImageUrl %}
{%- resoc
template = "default",
slug = (title or metadata.title) | slug,
values = {
title: title or metadata.title,
sideImage: featuredImage
}
-%}
{% endset %}Dies deklariert eine neue Variable namens socialImageUrl. Der Inhalt dieser Variablen wird vom resoc Shortcode bereitgestellt, der drei Parameter entgegennimmt:
- Das
templateist das Unterverzeichnis unserer Vorlage (es befindet sich inresoc-templates/default). - Der
slugwird verwendet, um die Social-Media-Bild-URL zu erstellen (z. B./social-images/brand-new-post.jpg). Wir sluggen den Seitentitel, um eine eindeutige und teilbare URL bereitzustellen. - Die
valuessind der Inhalt, wie er inresoc-templates/default/resoc.manifest.jsondefiniert ist.titleist offensichtlich, da Seiten bereits einen Titel haben.sideImageist auf ein Meta namensfeaturedImagegesetzt, das wir für illustrierte Seiten definieren werden.
Jetzt können wir _includes/layouts/base.njk öffnen, den Cursor in den <head> setzen und einige neue Markups hinzufügen, um all das zu füllen:
<meta property="og:title" content="{{ title or metadata.title }}"/>
<meta property="og:description" content="{{ description or metadata.description }}"/>
<meta property="og:image" content="{{ socialImageUrl }}"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>Die Titel- und Beschreibungs-Markups ähneln dem vorhandenen <title> und <meta name="description">. Wir verwenden socialImageUrl unverändert für das og:image Meta. Wir geben auch die Abmessungen des Social-Media-Bildes an, um alles abzurunden.
Automatisierte Social-Media-Bilder sind fertig!
Lasst uns das bereitstellen
Wenn wir den Blog erneut bereitstellen, zeigen alle Seiten die reine Textversion unserer Vorlage. Um die Vollversion zu sehen, weisen wir einem vorhandenen Beitrag ein Bild zu. Dazu müssen wir einen der Beiträge bearbeiten – ich habe vier Beiträge erstellt und bearbeite den vierten, posts/fourthpost.md – sodass nach den vorhandenen Metadaten ein featuredImage-Eintrag vorhanden ist.
---
title: This is my fourth post.
description: This is a post on My Blog about touchpoints and circling wagons.
date: 2018-09-30
tags: second tag
layout: layouts/post.njk
featuredImage: https://resoc.io/assets/img/demo/photos/pexels-pixabay-459653.jpg
---Hier reicht die Verwendung einer externen URL aus, aber normalerweise legen wir Bilder in einem img-Verzeichnis ab und geben die Basis-URL einmalig in _includes/layouts/base.njk an.
Bauen Sie die Website erneut auf.
npm run buildWenn Sie git status ausführen, bemerken Sie möglicherweise zwei geänderte Dateien zusätzlich zu den von uns selbst bearbeiteten. In .gitignore hat das Plugin resoc-image-data.json hinzugefügt. Diese Datei speichert unsere Social-Media-Bilddaten, die intern vom Netlify-Plugin verwendet werden, und netlify.toml enthält nun die Konfiguration des Netlify-Plugins.
Zeit zur Bereitstellung!
git commit -a -m "Automated social images"
git pushNetlify wird benachrichtigt und stellt die Website bereit. Sobald die neueste Version online ist, teilen Sie die Homepage irgendwo (z. B. slacken Sie sie sich selbst oder verwenden Sie den Facebook Debugger). So sieht die Social-Media-Karte für die Homepage aus, die kein Bild enthält.
Und so sieht es für einen Beitrag aus, der ein Bild enthält.
Perfekt!
Fazit
Bisher waren automatisierte Social-Media-Bilder hauptsächlich eine Angelegenheit für Entwickler, die bereit waren, mit vielen verschiedenen Ideen und Ansätzen zu experimentieren, einige einfach und einige schwierig. Wir haben die Dinge relativ einfach gehalten.
Mit ein paar Codezeilen konnten wir schnell automatisierte Social-Media-Bilder auf einem Blog einrichten, der auf Eleventy basiert und auf Netlify gehostet wird. Der Teil, an dem wir die meiste Zeit verbracht haben, war die Bildvorlage, aber das ist kein Problem. Mit dem integrierten Betrachter und Mustache haben wir uns auf das konzentriert, was wir kennen, lieben und schätzen: Webdesign.
Hoffentlich helfen Tools wie das Resoc Image Template Dev Kit und seine zugehörigen Werkzeuge dabei, dass automatisierte Social-Media-Bilder von einem Nischenhobby zum Mainstream werden.
Toller Beitrag. Danke.
Danke, Raj!
Hallo, vielen Dank für Ihre großartige Arbeit. Ich hatte Probleme bei der Implementierung. Später stellte ich durch den FB-Debugger fest, dass og: meta als „property“ und nicht als „name“ definiert werden sollte. Das hat das Problem in meinem Fall behoben. Ich weiß nicht, ob die gleichen Konventionen von anderen sozialen Netzwerken verwendet werden.
Hallo Kuba, danke für die Meldung! Du hast völlig Recht, entschuldige diesen unglücklichen Fehler! Vor einer Minute behoben.
Das Seltsame ist, dass die Demowebsite dieses Problem hat, aber FB und Slack es trotzdem unterstützen. Das ist keine totale Überraschung: „Show must go on“ ist oft der Weg, den man im Web geht.
Hallo!
Vielen Dank für ein solch großartiges und zeiteffizientes Werkzeug.
Meine Frage ist, ist es möglich, eine weitere Vorschau für quadratische oder vertikale Abmessungen für andere Social-Media-Dienste hinzuzufügen?
Vielen Dank und einen fantastischen Tag noch!