Imagens de mídia social geradas automaticamente

Tenho pensado em imagens de mídia social novamente. Você sabe, as imagens que (podem) aparecer quando você compartilha um link em lugares como Twitter, Facebook ou iMessage. Você está essencialmente deixando dinheiro na mesa sem eles, porque eles transformam uma postagem normal com um pequeno link em uma postagem com uma grande imagem que chama a atenção, com uma enorme área clicável. De qualquer imagem em um site, a imagem de mídia social pode ser a imagem mais vista, mais lembrada e mais solicitada pela rede no site.

É essencialmente esse pedaço de HTML que faz com que isso aconteça:

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

Mas certifique-se de leia sobre isso pois existem várias outras tags HTML para acertar.

Acho que estou pensando nisso novamente porque o GitHub parece ter novos cartões de mídia social. São novos, certo?

Essas imagens de mídia social do GitHub são claramente geradas de forma programática. Confira um exemplo de URL.

Automação

Embora eu ache que você pode obter muito sucesso com uma imagem de mídia social totalmente feita à mão e sob medida, isso não é prático para sites com muitas páginas: blogs, comércio eletrônico… você sabe o que quero dizer. O truque para sites como esse é automatizar sua criação por meio de modelos de alguma forma. Mencionei a opinião de outras pessoas sobre isso no passado, mas vamos recapitular:

Você sabe o que todos eles têm em comum? Marionetista.

Puppeteer é uma maneira de ativar e controlar uma cópia sem cabeça do Chrome. Tem isso recurso incrivelmente útil de poder tirar uma captura de tela da janela do navegador: await page.screenshot({path: 'screenshot.png'});. É assim que nosso site de fontes de codificação faz as capturas de tela. A ideia da captura de tela é o que faz as pessoas pensarem. Por que não criar um modelo de mídia social em HTML e CSS, depois pedir ao Puppeteer para fazer uma captura de tela e usá-lo? que como a imagem da mídia social?

Adoro essa ideia, mas significa ter acesso a um servidor Node (o Puppeteer roda no Node) que está rodando o tempo todo ou que você pode acessar como quiser. uma função sem servidor. Portanto, não é de admirar que essa ideia tenha repercutido no público do Jamstack, que já está acostumado a fazer coisas como executar processos de construção e aproveitar funções sem servidor.

Acho que a ideia de “hospedar” a função serverless em uma URL – e passar a ela os valores dinâmicos do que incluir na captura de tela por meio do parâmetro URL também é inteligente.

A rota SVG

Eu meio que adoro a ideia de usar SVG como o modelo para imagens de mídia social, em parte porque ele tem coordenadas fixas para projetar, o que corresponde ao meu modelo mental de criar as dimensões exatas necessárias para projetar imagens de mídia social. Eu gosto como o SVG é tão combinável.

George Francis blogou “Crie suas próprias imagens sociais SVG generativas” que é um exemplo maravilhoso de tudo isso funcionando perfeitamente, com um toque de randomização e capricho. eu gosto de contenteditable truque também, tornando-o uma ferramenta útil para capturas de tela únicas.

Também me envolvi com a criação dinâmica de SVG: confira esta página da conferência em nosso site de Conferências.

Infelizmente, SVG não é um formato de imagem compatível com imagens de mídia social. Aqui está o Twitter especificamente:

URL da imagem a ser usada no cartão. As imagens devem ter menos de 5 MB. Os formatos JPG, PNG, WEBP e GIF são suportados. Somente o primeiro quadro de um GIF animado será utilizado. SVG não é compatível.

Documentos do Twitter

Ainda assim, compor/modelar em SVG pode ser legal. Você o converte para outro formato para uso final. Uma vez que você um SVG, a conversão de SVG para PNG é quase trivialmente fácil. No meu caso, usei svg2png e uma tarefa Gulp muito pequena que é executado durante o processo de construção.

E o WordPress?

Não tenho um processo de construção para meu site WordPress – pelo menos não um que seja executado sempre que publico ou atualizo uma postagem. Mas o WordPress se beneficiaria a maioria (no meu mundo) a partir de imagens dinâmicas de mídia social.

Não é que eu não os tenha agora. Jetpack percorre um longo caminho em fazer isso funcionar bem. Ele transforma a “imagem em destaque” da postagem na imagem da mídia social, permite visualizá-la e postar automaticamente nas redes sociais. Aqui está um vídeo que fiz sobre isso. Isso me levará a um lugar onde as imagens em destaque serão anexadas e exibidas bem.

Mas isso não automatiza sua criação. Às vezes, um gráfico personalizado por si só é a melhor opção (o acima pode ser um bom exemplo disso), mas talvez mais frequentemente um cartão bem modelado seja a melhor opção.

Felizmente eu percebi Gerador de imagens sociais para WordPress de Daniel Post. Olha que chique:

Isso é exatamente o que o WordPress precisa!

O próprio Daniel me ajudou a criar um modelo personalizado apenas para CSS-Tricks. Eu sonhava muito em ter vários modelos para escolher que incorporassem título, autor, citações escolhidas, imagens em destaque e outras coisas. Até agora, decidimos por apenas dois, um modelo com título e autor e um modelo com imagem em destaque, título e autor. As imagens são criadas a partir desses metadados instantaneamente:

Este não é o Titereiro. Este nem é o svgtopng com tecnologia PhantomJS. Estas são imagens geradas por PHP! E nem mesmo ImageMagick, mas direto GD, aquilo que está embutido no PHP. Portanto, essas imagens não são criadas em nenhum tipo de sintaxe que provavelmente seria confortável para um desenvolvedor front-end. Provavelmente é melhor usar um dos modelos, mas se quiser ver como meu modelo personalizado foi codificado (por Daniel), deixe-me saber e posso postar o código em algum lugar público.

Resultado bem legal, né?

Entendo por que ele teve que ser construído desta forma: está usando uma tecnologia que funcionará literalmente em qualquer lugar que o WordPress possa rodar. Isso está muito dentro do espírito do WordPress. Mas isso me faz desejar que a criação dos modelos pudesse ser feita de uma forma mais moderna. Não seria legal se o modelo para suas imagens de mídia social fosse exatamente como social-image.php na raiz do tema como qualquer outro arquivo de modelo? E você modela e projeta essa página com todas as APIs normais do WordPress? Como um Bloco ACF quase? E ele obtém uma captura de tela e é usado? Vou responder para você: Sim, seria legal.

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