Immagini di social media generate automaticamente

Ho pensato alle immagini dei social media ancora. Sai, le immagini che (possono) apparire quando condividi un link in posti come Twitter, Facebook o iMessage. Stai essenzialmente lasciando i soldi sul tavolo senza di loro, perché trasformano un normale post con un piccolo link in un post con una grande immagine che attira l'attenzione su di esso, con un'enorme area cliccabile. Di qualsiasi immagine su un sito Web, l'immagine dei social media potrebbe essere l'immagine n. 1 più visualizzata, più ricordata e più richiesta dalla rete sul sito.

È essenzialmente questo bit di HTML che li fa accadere:

<meta property="og:image" content="/images/social-media-image.jpg" />

Ma assicurati di farlo leggere su di esso poiché ci sono un sacco di altri tag HTML da correggere.

Penso che ci sto pensando di nuovo perché GitHub sembra avere nuove schede di social media. Questi sono nuovi, vero?

Quelle immagini dei social media di GitHub sono chiaramente generate in modo programmatico. Check-out un URL di esempio.

Automazione

Anche se penso che tu possa ottenere un sacco di successo da un'immagine di social media progettata su misura completamente artigianale, non è pratico per i siti con molte pagine: blog, eCommerce ... sai cosa intendo. Il trucco per siti del genere è automatizzare la loro creazione tramite la creazione di modelli in qualche modo. Ho menzionato le opinioni di altre persone su questo in passato, ma ricapitoliamo:

Sai cos'hanno in comune tutti questi? burattinaio.

Puppeteer è un modo per avviare e controllare una copia senza testa di Chrome. Ha questo caratteristica incredibilmente utile di poter acquisire uno screenshot della finestra del browser: await page.screenshot({path: 'screenshot.png'});. Ecco come il nostro sito web sui font di codifica fa gli screenshot. L'idea dello screenshot è ciò che fa andare avanti la mente delle persone. Perché non progettare un modello di social media in HTML e CSS, quindi chiedere a Puppeteer di eseguirne uno screenshot e utilizzarlo che come l'immagine dei social media?

Adoro questa idea, ma significa avere accesso a un server Node (Puppeteer gira su Node) che è sempre in esecuzione o che puoi premere come una funzione serverless. Quindi non c'è da meravigliarsi che questa idea abbia risuonato con la folla di Jamstack che è già abituata a fare cose come eseguire processi di compilazione e sfruttare le funzioni serverless.

Penso che anche l'idea di "ospitare" la funzione serverless su un URL e passargli i valori dinamici di cosa includere nello screenshot tramite il parametro URL sia intelligente.

Il percorso SVG

Mi piace l'idea di utilizzare SVG come elemento da modellare per le immagini dei social media, in parte perché ha coordinate così fisse da progettare all'interno, che corrispondono al mio modello mentale di creare le dimensioni esatte necessarie per progettare le immagini dei social media. mi piace come SVG è così componibile.

George Francis ha scritto sul blog "Crea le tue immagini social SVG generative" che è un meraviglioso esempio di tutto questo che si combina bene, con un tocco di casualità e fantasia. mi piace il contenteditable trucco, rendendolo uno strumento utile per screenshot una tantum.

Mi sono anche dilettato nella creazione dinamica di SVG: dai un'occhiata questa pagina della conferenza sul nostro sito Conferenze.

Sfortunatamente, SVG non è un formato immagine supportato per le immagini dei social media. Ecco Twitter in particolare:

URL dell'immagine da utilizzare nella scheda. Le immagini devono avere una dimensione inferiore a 5 MB. Sono supportati i formati JPG, PNG, WEBP e GIF. Verrà utilizzato solo il primo fotogramma di una GIF animata. SVG non è supportato.

Documenti di Twitter

Tuttavia, la composizione / creazione di modelli in SVG può essere interessante. Lo converti in un altro formato per l'utilizzo finale. Una volta che tu avere un SVG, la conversione da SVG a PNG è quasi banalmente facile. Nel mio caso, ho usato svg2png ed un compito molto piccolo di Gulp che viene eseguito durante il processo di compilazione.

Che mi dici di WordPress?

Non ho un processo di compilazione per il mio sito WordPress, almeno non uno che viene eseguito ogni volta che pubblico o aggiorno un post. Ma WordPress ne trarrebbe vantaggio il più (nel mio mondo) dalle immagini dinamiche dei social media.

Non è che non li abbia adesso. Jetpack fa molta strada nel fare questo lavoro bene. Rende l '"immagine in primo piano" del post l'immagine dei social media, mi consente di visualizzarla in anteprima e di postare automaticamente sui social network. Ecco un video che ho fatto su questo. Questo mi porterà in un posto in cui le immagini in primo piano sono allegate e vengono visualizzate bene.

Ma non automatizza la loro creazione. A volte una grafica su misura da sola è la strada da percorrere (quella sopra potrebbe essere un buon esempio di ciò), ma forse più spesso una carta ben modellata è la strada da percorrere.

Per fortuna ne ho sentito parlare Generatore di immagini sociali per WordPress da Daniel Post. Guarda che fantasia:

Questo è esattamente ciò di cui ha bisogno WordPress!

Daniel stesso mi ha aiutato a creare un modello personalizzato solo per CSS-Tricks. Avevo grandi sogni di avere un sacco di modelli tra cui scegliere che incorporassero il titolo, l'autore, le citazioni scelte, le immagini in primo piano e altre cose. Finora ne abbiamo scelti solo due, un modello con titolo e autore e un modello con immagine, titolo e autore in primo piano. Le immagini vengono create da quei metadati al volo:

Questo non è Burattinaio. Questo non è nemmeno lo svgtopng alimentato da PhantomJS. Queste sono immagini generate da PHP! E nemmeno ImageMagick, ma verso l'alto GD, la cosa incorporata direttamente in PHP. Quindi queste immagini non vengono create in alcun tipo di sintassi che probabilmente sarebbe comodo per uno sviluppatore front-end. Probabilmente faresti meglio a usare uno dei modelli, ma se vuoi vedere come è stato codificato il mio personalizzato (da Daniel), fammelo sapere e posso pubblicare il codice da qualche parte pubblico.

Risultato piuttosto interessante, vero?

Capisco perché è stato necessario costruirlo in questo modo: utilizza una tecnologia che funzionerà letteralmente ovunque possa essere eseguito WordPress. Questo è molto nello spirito di WordPress. Ma mi fa desiderare che la creazione dei modelli possa essere eseguita in un modo più moderno. Come non sarebbe bello se il modello per le tue immagini sui social media fosse proprio come social-image.php alla radice del tema come qualsiasi altro file modello? E modelli e progetti quella pagina con tutte le normali API di WordPress? Come un Blocco ACF quasi? E ottiene screenshot e viene utilizzato? Rispondo per te: sì, sarebbe bello.

Fonte: https://css-tricks.com/auto-generated-social-media-images/