![[Facebook] Renderizar imagens na primeira ação de Curtir ou Compartilhar](https://www.codeblog.com.br/storage/images/cache/facebook-renderizar-imagens-na-primeira-acao-de-curtir-ou-compartilhar-1500475271-2a4dc78f70864dddb4439d12bf0994a2.jpg)
[Facebook] Renderizar imagens na primeira ação de Curtir ou Compartilhar
O rastreador precisa ver uma imagem pelo menos uma vez antes que ela possa ser renderizada. Isso significa que a primeira pessoa que compartilhar um conteúdo não verá uma imagem renderizada
8797 Whallysson Avelino
Ao tentar compartilhar seus posts no Facebook a imagem não aparece e não mostrava a imagem logo de imediato.
Fui pesquisar o assunto na documentação do facebook que diz o seguinte:
Armazenar a imagem em cache previamente
Quando o conteúdo for compartilhado pela primeira vez, o rastreador do Facebook extrairá e armazenará em cache os metadados do URL compartilhado. O rastreador precisa ver uma imagem pelo menos uma vez antes que ela possa ser renderizada. Isso significa que a primeira pessoa que compartilhar um conteúdo não verá uma imagem renderizada:
Há duas maneiras de evitar isso e renderizar imagens na primeira ação de Curtir ou Compartilhar:
1. Armazenar a imagem em cache previamente com o Depurador de compartilhamento
Execute o URL por meio do depurador de URL para localizar previamente metadados da página. Você também deverá fazer isso se atualizar a imagem de um conteúdo.
2. Usar as marcações do Open Graph og:image:width e og:image:height
O uso dessas marcações especificará as dimensões da imagem para o rastreador para que ele possa renderizá-la imediatamente sem ter que baixá-la e processá-la de maneira assíncrona.
Para nós, o melhor seria usar a dica 2, para não ter que ficar sempre usando a url do depurador para fazer isso, o que seria inviável para o site com muitos posts.
Então resolvi implementar um código com a dica número 2, e a principio funcionou perfeitamente. Segue o exemplo abaixo:
$OgImage = getimagesize('https://www.codeblog.com.br/themes/codeblog/images/default.jpg');
if ($OgImage['mime']) {
echo '';
}
if ($OgImage[0]) {
echo '';
}
if ($OgImage[1]) {
echo '';
}
?>
Logo após os meus novos posts renderizaram a imagem instantaneamente ao compartilhar o post pela primeira vez. =)
Faça a implementação em seu site e resolva esse probelma de vez!
Espero que essa dica tenha sido útil para você. Qualquer dúvida deixe nos comentários abaixo.
COMENTÁRIOS