Blog Joomla! e WordPress

Facebook OG:IMAGE

Como definir a imagem padrão no Joomla para links curtidos, compartilhados e comentados no Facebook

É importante ter controle sobre as imagens que o Facebook define exibir referente a cada URL do seu site ou blog. Já vi várias vezes uma pessoa curtir um link e aparecer uma imagem de alguma outra parte da página que não tem nada a ver com o conteúdo principal. No Joomla é super fácil definir essas imagens, já que ele te permite escolher as imagens de introdução e imagem principal de cada post.

Caso você não saiba extamente onde fica essa área de cadastro de imagem, entre no adminsitrador do Joomla em qualquer site em que você estiver trabalhando, e crie um novo artigo. Na coluna da direita existem várias opções, clique na área chamada Imagens e Links.

joomla imagens e links

Aqui você define qual imagem será exibida na listagem dos artigos (Blog Layout) e a imagem principal da página quando aberta (Article Layout). Nós vamos utilizar a informação salva no campo "Imagem do Artigo" para forçar nosso template a escrever uma meta tag específica do Facebook, no <head> de nossas páginas.

O Facebook recomenda utilizar imagens do tamanho 1200 x 630 pixels para que as prévias apareçam grandes e em alta qualidade. O tamanho mínimo para uma imagem aparecer grande no feed é de 600 x 315 pixels. Caso as imagens utilizadas sejam menor que 600x315 pixels, a prévia pequena será utilizada como pode ver abaixo:

   

O Facebook criou há alguns anos o protocolo Open Graph, que permite que a rede social pegue informações mais precisas para exibir conteúdo dinâmico em seu site. Existem dezenas de tags, mas a que vamos focar hoje é a og:image, que define a imagem do post, caso a url for, compartilhada, curtida ou comentada.

Se você ainda não tem um artigo cadastrado com uma imagem principal, crie um agora antes de executar os próximos passos.

No seu template, abra o arquivo padrão que exibe as páginas dos artigos (templates/meutemplate/html/com_content/article/default.php).

Se você não estiver acostumado em modificar os códigos padrões do Joomla, sempre faça uma cópia do arquivo que for editar. Um simples underline na cópia já é o suficiente para você  ter um backup caso tudo dê errado.

No final da página, depois do fechamento do php insira o seguinte código:

<?php 
/*Variáveis para definir imagem*/ $imagemfb = 'og:image'; //define que tipo de metatag
$content = 'http://SEUDOMINIO.COM.BR'.htmlspecialchars($images->image_fulltext); //define o conteúdo dessa metatag, no nosso caso o item image_fulltext se refere a imagem principal do post
$doc = &JFactory::getDocument(); //define a index.php do seu template como referência de onde colocar essa nova metatag

/*Comando para escrever a metatag no head da página index.php do seu template*/
$doc->setMetaData($imagemfb,$content);
?>

Agora acesse a pagina pelo seu navegador favorito, visualize o código fonte e procure og:image. Se a meta tag estiver definida assim:

<meta name="og:image" content="http://SEUDOMINIO.COM.BR/SUAIMAGEM.jpg" />

Sua página está pronta para exibir corretamente suas imagens no Facebook. Faça um teste compartilhando um link e veja se a imagem correta foi postada.

Caso tenha alguma dúvida sobre como implementar essa função, deixe um comentário abaixo.

Posts Relacionados

© 2017 iDesigns Studio. Todos Direitos Reservados.
Design Gráfico e Web Design - Centro, Vitória, ES