Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Imagem personalizada para compartilhamento de links em redes sociais #395

Closed
gabrnunes opened this issue May 26, 2022 · 10 comments
Closed

Comments

@gabrnunes
Copy link
Contributor

Depois da ISSUE #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

image

Quando alguém compartilhar um comentário

image

@filipedeschamps
Copy link
Owner

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
Copy link
Contributor

tembra commented May 27, 2022

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

@gabrnunes
Copy link
Contributor Author

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
Copy link
Contributor

tembra commented Jun 3, 2022

@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
Copy link
Contributor Author

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

@aprendendofelipe
Copy link
Collaborator

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
Copy link
Contributor

tembra commented Jun 3, 2022

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

@tashima42
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

Fechado por #535

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants