Imágenes de redes sociales generadas automáticamente

He estado pensando en las imágenes de las redes sociales nuevamente. Ya sabes, las imágenes que (pueden) aparecer cuando compartes un enlace en lugares como Twitter, Facebook o iMessage. Básicamente, estás dejando dinero sobre la mesa sin ellos, porque convierte una publicación normal con un pequeño enlace antiguo en una publicación con una gran imagen que llama la atención, con un área enorme en la que se puede hacer clic. De cualquier imagen en un sitio web, la imagen de las redes sociales puede ser la imagen número uno más vista, más recordada y más solicitada por la red en el sitio.

Es esencialmente este fragmento de HTML lo que hace que sucedan:

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

Pero asegúrese de leerlo, ya que hay muchas otras etiquetas HTML que deben corregir.

Creo que estoy pensando en ello nuevamente porque GitHub parece tener nuevas tarjetas de redes sociales. Estos son nuevos, ¿verdad?

Esas imágenes de redes sociales de GitHub se generan claramente mediante programación. Consulte una URL de ejemplo.

Automatización

Si bien creo que se puede sacar mucho provecho de una imagen de redes sociales totalmente hecha a mano y diseñada a medida, eso no es práctico para sitios con muchas páginas: blogs, comercio electrónico… ya sabes a lo que me refiero. El truco para sitios como ese es automatizar su creación mediante plantillas de alguna manera. Mencionó las opiniones de otras personas sobre esto en el pasado, pero recapitulamos:

• Drew McLellan: imágenes dinámicas para compartir en redes sociales
• Vercel: Imagen de gráfico abierto como servicio
• Phil Hawksworth: generador de imágenes sociales
• Ryan Filler: Imágenes automáticas para compartir en redes sociales

¿Sabes qué tienen todos esos en común? Titiritero.

Puppeteer es una forma de activar y controlar una copia sin cabeza de Chrome. Tiene esta característica increíblemente útil para poder tomar una captura de pantalla de la ventana del navegador: await page.screenshot({path: 'screenshot.png'});. Así es como nuestro sitio web de fuentes de codificación realiza las capturas de pantalla. La idea de hacer capturas de pantalla es lo que hace que la gente se ponga a pensar. ¿Por qué no diseñar una plantilla de redes sociales en HTML y CSS, luego pedirle a Puppeteer que haga una captura de pantalla y usarla como imagen de redes sociales?

Me encanta esta idea, pero significa tener acceso a un servidor Node (Puppeteer se ejecuta en Node) que se ejecuta todo el tiempo o que puedes utilizar como una función sin servidor. Por lo tanto, no es de extrañar que esta idea haya resonado entre la multitud de Jamstack que ya está acostumbrado a hacer cosas como ejecutar procesos de compilación y aprovechar funciones sin servidor.

Creo que la idea de “alojar” la función sin servidor en una URL y pasarle los valores dinámicos de qué incluir en la captura de pantalla a través del parámetro URL también es inteligente.

La ruta SVG

Me gusta un poco la idea de usar SVG como la plantilla para imágenes de redes sociales, en parte porque tiene coordenadas fijas para diseñar en su interior, lo que coincide con mi modelo mental de crear las dimensiones exactas que necesitas para diseñar imágenes de redes sociales. . Me gusta cómo SVG es tan compatible.

George Francis escribió en su blog “Crea tus propias imágenes sociales SVG generativas”, que es un maravilloso ejemplo de cómo todo esto se combina muy bien, con un toque de aleatorización y fantasía. También me gusta el contenteditabletruco, lo que lo convierte en una herramienta útil para realizar capturas de pantalla únicas.

También he incursionado en la creación dinámica de SVG: consulte esta página de la conferencia en nuestro sitio de conferencias.

Desafortunadamente, SVG no es un formato de imagen compatible con imágenes de redes sociales. Aquí está Twitter específicamente:

URL de la imagen para utilizar en la tarjeta. Las imágenes deben tener un tamaño inferior a 5 MB. Se admiten los formatos JPG, PNG, WEBP y GIF. Sólo se utilizará el primer fotograma de un GIF animado. SVG no es compatible.

Documentos de Twitter

Aún así, componer/crear plantillas en SVG puede ser genial. Lo convierte a otro formato para su uso final. Una vez que tenga un SVG, la conversión de SVG a PNG es casi trivialmente fácil. En mi caso, utilicé svg2png y una tarea Gulp muy pequeña que se ejecuta durante el proceso de compilación.

¿Qué pasa con WordPress?

No tengo un proceso de creación para mi sitio de WordPress, al menos no uno que se ejecute cada vez que publico o actualiza una entrada. Pero WordPress sería el que más se beneficiaría (en mi mundo) de las imágenes dinámicas de las redes sociales.

No es que no los tenga ahora. Jetpack contribuye en gran medida a que esto funcione bien. Hace que la “imagen destacada” de la publicación sea la imagen de las redes sociales, me permite obtener una vista previa de ella y realizar publicaciones automáticas en las redes sociales. Aquí hay un video que hice sobre eso. Eso me llevará a un lugar donde las imágenes destacadas se adjuntan y se muestran muy bien.

Pero no automatiza su creación. A veces, un gráfico personalizado por sí solo es el camino a seguir (el de arriba podría ser un buen ejemplo de ello), pero quizás más a menudo una tarjeta con una bonita plantilla sea el camino a seguir.

Afortunadamente, entré en el Social Image Generator para WordPress de Daniel Post. Mira que elegante:

¡Esto es exactamente lo que WordPress necesita!

El propio Daniel me ayudó a crear una plantilla personalizada solo para CSS-Tricks. Tenía grandes sueños de tener un montón de plantillas para elegir que incorporaran el título, el autor, las citas elegidas, las imágenes destacadas y otras cosas. Hasta ahora, nos hemos decidido por solo dos, una plantilla con el título y el autor, y una plantilla con una imagen, título y autor destacados. Las imágenes se crean a partir de esos metadatos sobre la marcha:

Esto no es Titiritero. Este ni siquiera es el svgtopng con tecnología PhantomJS. ¡Estas son imágenes generadas en PHP! Y ni siquiera ImageMagick, sino directamente GD, lo integrado directamente en PHP. Por lo tanto, estas imágenes no se crean con ningún tipo de sintaxis que pueda resultar cómoda para un desarrollador front-end. Probablemente sea mejor que uses una de las plantillas, pero si quieres ver cómo se codificó mi plantilla personalizada (por Daniel), déjamelo saber y puedo publicar el código en algún lugar público.

Resultado bastante bueno, ¿verdad?

Entiendo por qué tuvo que construirse de esta manera: está utilizando tecnología que funcionará literalmente en cualquier lugar donde se pueda ejecutar WordPress. Esto está muy en el espíritu de WordPress. Pero me hace desear que la creación de plantillas se pudiera hacer de una manera más moderna. ¿No sería genial si la plantilla para las imágenes de tus redes sociales estuviera social-image.phpen la raíz del tema como cualquier otro archivo de plantilla? ¿Y creas una plantilla y diseñas esa página con todas las API normales de WordPress? ¿Casi como un bloque ACF? ¿Y se obtiene una captura de pantalla y se utiliza? Responderé por ti: Sí, eso sería genial.