Imagem personalizada para compartilhamento de links em redes sociais

[gabrnunes]

Depois da ISSUE https://github.com/filipedeschamps/tabnews.com.br/issues/337, surgiur a ideia de criar uma imagem personalizada para os posts e comentários sempre que alguém compartilhá-los nas redes sociais.

Essa é uma prática utilizada atualmente pelo GitHub, Dev.to, entre outras plataformas.

Eu criei duas imagens aqui e queria abrir pra discussão do que vocês acham delas:

Quando alguém compartilhar um post

Quando alguém compartilhar um comentário

[filipedeschamps]

Lindo demais! Fico realmente emocionado por essas melhorias estarem acontecendo no projeto.

Tenho apenas uma sugestão: na versão root (quando compartilha um post), deixar o brand versão minimizada igual na versão da resposta (um ícone na direita), e mover o título lá pra cima. Sugiro isso, pois o título é o que vai mais chamar a atenção e é uma informação que sempre irá variar. É a âncora principal da thumbnail e é a primeira informação que deveria ser lida (e possivelmente, a pessoa vai ler primeiro isso até antes do que a pessoa que compartilhou escreveu ao redor).

[tembra]

Meus dois centavos: Adicionar também na imagem da resposta a quantidade de respostas que a resposta tem.

[gabrnunes]

Oi @tembra @filipedeschamps, fiz os ajustes sugeridos e o Figma com o layout tá aqui: https://www.figma.com/file/5gdFx8Bzj4SN8rGZLhCxl6/TabNews?node-id=0%3A1

Se alguém quiser implementar fica a vontade!

Aqui tem dois tutoriais que mostram como criar essa imagem: https://www.youtube.com/watch?v=qvetoR6V5ic https://mediajams.dev/post/automate-social-images-next-puppeteer

[tembra]

@gabrnunes Apenas para informar: O link do Figma parece estar quebrado.

E eu esbarrei nesse vídeo da Rocketseat esta semana hehe. Na mesma hora lembrei desta issue :)

[gabrnunes]

Oi @tembra eu chequei as permissões do Figma e parece estar tudo ok. O que aconteceu ai quando tentou abrir?

[aprendendofelipe]

Oi @tembra eu chequei as permissões do Figma e parece estar tudo ok. O que aconteceu ai quando tentou abrir?

@gabrnunes, aqui está abrindo normalmente 👍

[tembra]

@gabrnunes agora abriu! não lembro exatamente o erro, mas salvo engano era uma mensagem sobre a inexistência do arquivo. 😕

[tashima42]

Lembrei de um post no tabnews em que alguém compartilhou um gerador de imagens usando o HTML Canvas. Não tenho ideia se isso pode ser aplicado nesse caso, mas aqui ta o post: https://www.tabnews.com.br/thi/meu-primeiro-projeto-open-source

[ErickCReis]

Estive trabalhando nessa issue nos últimos dias e queria compartilhar alguns detalhes.

Dei uma olhada nos tutoriais que o @gabrnunes recomendou e vi que a própria vercel tem um projeto sobre isso, o https://og-image.vercel.app/, e no repositório deles tem uma issue com o um problema dessa implementação, o tamanho das libs. Nessa issue já tinha algumas inciativas para solucionar o problema, e foi a partir daí que eu comecei alguns testes com o resvg-js.

Depois de fazer alguns ajustes no svg gerado pelo figma, que por sinal facilitou muito essa parte, a geração das imagens funcionou sem nenhum problema, só tive quebrar um pouco a cabeça para trabalhar com o Nextjs.

Tem algumas partes dessa implementação que ainda não sei se estão muito legais:

• Tive que subir o arquivo das fontes no projeto;
• Utilizei esse artigo para resolver o tamanho do espaço reservado para o nome do usuário, não fiz testes para tentar usar css no template da image;
• Modifiquei o next.config para fazer o rewrite para o rota da api.

[gabrielsozinho]

Fechado por #535