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

  • 20 templates incríveis do WordPress com vídeos de fundo

    A página principal é na maioria das vezes a primeira coisa que uma pessoa vê quando chega no seu site. Assim, é uma das mais importantes, pois faz a primeira impressão sobre você e sua empresa.  Hoje eu vou mostrar 20 templates incríveis do WordPress com fundos de vídeo que você pode usar como base para o seu futuro projeto web.

  • 15 Plugins do WordPress que você precisa ter em 2014

    Aqui você encontrará plugins essenciais para SEO, Pinterest, comentários, acelerar o seu site na hora do carregamento, otimizar suas imagens, e muitos mais. Então, clique no leia mais e divirta-se!

Comentários  

 
Marco
#11 Marco 20-06-2017 18:50
Olá, parabéns pelo tópico. No meu caso as imagens do artigos funciona normal quando compartilho o artigo. Mas quando quero divulgar o url principal do meu site que é lignegocios.com aparece apenas uma foto que eu nao queria que aparecesse. Como faço para especificar uma imagem padrão na url principal e não nos artigos.
Citar
 
 
Alexandre Daniel
#10 Alexandre Daniel 23-02-2017 07:20
Olá, boa noite

Fiz o procedimento de colar o código no arquivo default.php que você forneceu, porém ao pesquisar código fonte da página não aparece as tags e quando tento compartilhar no face não puxa imagem, quanto atualizo ai puxa a imagem de intordução do site que não tem nada haver com apostagem
Citar
 
 
Rafael Fideles
#9 Rafael Fideles 10-06-2015 13:59
Citando Fernanda:
Ei Rafael, fiz no meu e deu quase certo, porém quando compartilho o post ele só pega a imagem que esta como o e não as imagens correspondente de cada post

Ola Fernanda! Me manda o link do seu site/blog que dou uma olhada.
Citar
 
 
Fernanda
#8 Fernanda 07-06-2015 20:50
Ei Rafael, fiz no meu e deu quase certo, porém quando compartilho o post ele só pega a imagem que esta como o e não as imagens correspondente de cada post
Citar
 
 
Rafael Fideles
#7 Rafael Fideles 25-03-2015 13:29
Citando Leonardo:
Oi rafa, cara reparei que o site possui os open graph automaticamente, porem ele nao puxa a imagem no open graph. Por que isso ocorre?
Na primeira pagina do meu site tem um meta que nao coloquei, foi automatico (Mas quero aprender a colocar o logo do site como imagem para o graph da primeira pagina) Porem quando eu copio o link do site para o status do face ele nao pega a imagem q ta no graph, e sim uma que nao tem nada a ver soh eh usada como modulo. Como arrumo isso?

Bom dia Leonardo!

Geralmente o Facebook armazena essas imagens para não ter que ficar buscando ela sempre que alguém curte o mesmo link que outros já curtiram. O modo mais fácil de "limpar o cache" do facebook do seu link, é utilizar a ferramenta Debugger do próprio Facebook: https://developers.facebook.com/tools/debug/

Passei seu link por ela, e agora a imagem que está puxando é a definida no og:image (panfleto-verso -copy.jpg)
Citar
 
 
Leonardo
#6 Leonardo 24-03-2015 19:58
estou usando joomla 3.4
Citar
 
 
Leonardo
#5 Leonardo 24-03-2015 19:57
Oi rafa, cara reparei que o site possui os open graph automaticamente , porem ele nao puxa a imagem no open graph. Por que isso ocorre?
Na primeira pagina do meu site tem um meta que nao coloquei, foi automatico (Mas quero aprender a colocar o logo do site como imagem para o graph da primeira pagina) Porem quando eu copio o link do site para o status do face ele nao pega a imagem q ta no graph, e sim uma que nao tem nada a ver soh eh usada como modulo. Como arrumo isso?
Citar
 
 
Rafael Fideles
#4 Rafael Fideles 19-11-2014 19:48
Citando Paulo Martins:
Sim, ficarei muito grato, pois o cliente já está para cancelar o serviço comigo.

Segue abaixo link:

http://portugalsempassaporte.com/cplp1/730-primeiro-ministro-portugues-avisa-timor-que-ha-regras-e-limites


Ola Paulo! Desculpe a demora. Dei uma olhada no seu link e percebi que no da matéria tem três declarações da metatag og:image.

Não sei exatamente como está configurado seu template, mas ele está puxando outras imagens junto com a que você quer. Se possível, mande a sua pasta de template zipada para meu email que dou uma olhada:
Citar
 
 
Paulo Martins
#3 Paulo Martins 07-11-2014 04:09
Sim, ficarei muito grato, pois o cliente já está para cancelar o serviço comigo.

Segue abaixo link:

http://portugalsempassaporte.com/cplp1/730-primeiro-ministro-portugues-avisa-timor-que-ha-regras-e-limites
Citar
 
 
Rafael Fideles
#2 Rafael Fideles 06-11-2014 16:18
Citando Paulo Martins:
No meu deu quase certo está faltando alguma coisa.

Ola Paulo! O que está acontecendo ao postar o link? Tem como me mandar o seu link para eu olhar e tentar te ajudar?
Citar
 

Adicionar comentário


Código de segurança
Atualizar

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