He vuelto a pensar en las imágenes de las redes sociales. 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 en la mesa sin ellos, porque convierten una publicación normal con un pequeño enlace 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 podría ser la imagen número 1 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 para hacerlo bien.
Creo que lo estoy pensando de nuevo 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 partido 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 a través de plantillas de alguna manera. He mencionado las opiniones de otras personas sobre esto en el pasado, pero recapitulemos:
- 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 girar y controlar una copia sin cabeza de Chrome. Tiene esta característica increíblemente útil de 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 hace las capturas de pantalla. La idea de la captura de pantalla es lo que hace que la gente se ponga en marcha. ¿Por qué no diseñar una plantilla de redes sociales en HTML y CSS, luego pedirle a Puppeteer que la capture y usarla como imagen de las redes sociales?
Me encanta esta idea, pero significa tener acceso a un servidor de Node (Puppeteer se ejecuta en Node) que se está ejecutando todo el tiempo o que puedes acceder 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á acostumbrada a hacer cosas como ejecutar procesos de compilación y aprovechar las 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 las imágenes de las redes sociales, en parte porque tiene coordenadas fijas para diseñar en su interior, lo que coincide con mi modelo mental de hacer las dimensiones exactas que necesitas para diseñar imágenes de redes sociales. Me gusta cómo SVG es tan componible.
George Francis escribió en su blog “Cree sus propias imágenes sociales SVG generativas”, que es un ejemplo maravilloso de cómo todo esto se combina muy bien, con un toque de aleatoriedad y fantasía. me gusta el contenteditable truco también, lo que lo convierte en una herramienta útil para la captura de pantalla única.
También he incursionado en la creación dinámica de SVG: consulte esta página de conferencias 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 usar en la tarjeta. Las imágenes deben tener un tamaño inferior a 5 MB. Se admiten los formatos JPG, PNG, WEBP y GIF. Solo se utilizará el primer fotograma de un GIF animado. SVG no es compatible.
Aún así, componer / crear plantillas en SVG puede ser genial. Lo convierte a otro formato para 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 pequeña tarea de Gulp que se ejecuta durante el proceso de compilación.
¿Y WordPress?
No tengo un proceso de compilación para mi sitio de WordPress, al menos no uno que se ejecute cada vez que publico o actualizo una publicación. Pero WordPress se beneficiaría más (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 y publicar automáticamente 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 solo es el camino a seguir (el de arriba podría ser un buen ejemplo de eso), pero quizás más a menudo una tarjeta con una bonita plantilla sea el camino a seguir.
Afortunadamente, me enteré de Social Image Generator para WordPress de Daniel Post. Mira que elegante:
¡Esto es exactamente lo que necesita WordPress!
El mismo 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 destacada, título y autor. Las imágenes se crean a partir de esos metadatos sobre la marcha:
Tan meta.
Esto no es Titiritero. Este ni siquiera es el svgtopng alimentado por PhantomJS. ¡Estas son imágenes generadas por PHP! Y ni siquiera ImageMagick, sino directamente GD, el dispositivo integrado en PHP. Por lo tanto, estas imágenes no se crean en ningún tipo de sintaxis que probablemente resultaría cómoda para un desarrollador de aplicaciones para el usuario. Probablemente sea mejor que use una de las plantillas, pero si quiere ver cómo se codificó mi personalizada (por Daniel), hágamelo 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. Eso está muy en el espíritu de WordPress. Pero me hace desear que la creación de las plantillas se pueda hacer de una manera más moderna. ¿No sería genial si la plantilla para tus imágenes de redes sociales fuera como social-image.php en la raíz del tema como cualquier otro archivo de plantilla? ¿Y tu plantilla y diseña esa página con todas las API normales de WordPress? ¿Casi como un bloque ACF? ¿Y obtiene una captura de pantalla y se usa? Responderé por ti: Sí, estaría bien.