Neste artigo, vamos discutir como adicionar Facebook Open Graph e Twitter Cards ao Joomla sem um plugin ou módulo.
Se você não vive sob uma rocha há uma década ou mais, provavelmente já viu pessoas compartilhando artigos no Facebook com uma imagem e um título bonitos, e algo semelhante no Twitter com grandes e bonitos cartões mostrando um grande imagem.
A melhor maneira de controlar isso é implementar o que é chamado de Open Graph protocolo. Este é um conjunto de tags que dão dicas ao Twitter, Facebook e outros rastreadores sobre o conteúdo que devem usar.
Você pode fazer isso facilmente no Joomla sem instalar nenhuma extensão de terceiros, criando uma substituição de modelo.
Veja como fazer isso:
Cartões do Twitter Joomla
Ao implementar cartões do Twitter usando tags de gráfico aberto do Joomla - ao invés de ter uma imagem aparecendo aleatoriamente, ou nenhuma imagem, seu artigo Joomla estará sugerindo a melhor imagem a ser usada.
Veja o exemplo abaixo do CollectiveRay feed do Twitter.
Exemplo de Open Graph do Facebook
Por outro lado - no Facebook, usando as tags Joomla Open Graph, suas postagens quando compartilhadas terão a aparência abaixo.
Como habilitar tags Joomla Open Graph
1. Crie uma substituição de modelo para artigos
Extensões> Modelos> Modelos> (seu modelo) Detalhes e arquivos> Criar substituições> Componentes> com_content> artigo
Depois de criar a substituição do modelo do artigo, você pode adicionar os metadados à substituição que será usada para exibir seu artigo. Essencialmente, você precisará adicionar o seguinte conteúdo ao artigo, de forma que os metadados sejam coletados de seu artigo.
2. Adicione os metadados para Facebook / Twitter Open Graph
Vá para Extensões> Modelos> Modelos> (seu modelo) Detalhes e arquivos> Editor> html> com_content> artigos> default.php
Adicione o código abaixo no topo entre as tags php: - tome um pouco de cuidado ao adicionar isso, você pode quebrar seu modelo temporariamente se adicioná-lo no lugar errado ... então faça um backup completo do arquivo, antes de realizar qualquer uma dessas edições
if (isset($images->image_intro) and !empty($images->image_intro)){ $timage= htmlspecialchars(JURI::root().$images->image_intro); } elseif (isset($images->image_fulltext) and !empty($images->image_fulltext)){ $timage= htmlspecialchars(JURI::root().$images->image_fulltext);}else{ $timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';}$doc =& JFactory::getDocument();$doc->addCustomTag( ' <meta name="twitter:title" content="'.$this->escape($this->item->title).'"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations"> <meta name="twitter:url" content="'.str_replace('" ','"',JURI::current()).'" <meta name="twitter:description" content="'.strip_tags($this->item->introtext).'"> <meta name="twitter:image" content="'.$timage.'"> <meta property="og:title" content="'.$this->escape($this->item->title).'"/> <meta property="og:type" content="article"/> <meta property="og:email" content="info@dart-creations.com";/> <meta property="og:url" content="'.str_replace('" ','"',juri::current()).'" <meta property="og:image" content="'.$timage.'"/> <meta property="og:site_name" content="DARTCreations"/> <meta property="fb:admins" content="xxxxxxxxxxx"/> <meta property="og:description" content="'.strip_tags($this->item->introtext).'"/>');
3. Personalize as tags do Open Graph de acordo com seus valores
O código acima é personalizado para CollectiveRay, então, obviamente, edite os valores para os itens que você deseja para seu próprio site.
Estas são as linhas que você precisa alterar:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Este deve ser o local da imagem padrão, caso seu artigo não tenha uma imagem de introdução ou uma imagem de texto completo.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
O valor @ acima deve ser alterado para refletir seu nome de usuário do Twitter.
<meta property="og:email" content="info@dart-creations.com";/>
O endereço de e-mail acima deve ser atualizado para o seu próprio endereço de e-mail.
O acima deve ser atualizado para o nome do seu site.
Ao invés de xxxxxxxxxxx da tag fb: admins, você precisará inserir o id numérico do usuário do Facebook que realizará atividades como o Page Insights. Para encontrar o número, você pode querer olhar para uma ferramenta como esta ferramenta - encontre meu ID do Facebook.
Sugestão do leitor:
Eddie sugeriu que você pode restringir o comprimento da descrição a um número especificado de caracteres se usar o código abaixo:
Você pode querer restringir o comprimento da descrição a c.45 caracteres usando mb_strimwidth ou substr como este:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtexto), 0,45). '"/>
or
Ed também fez uma segunda sugestão que realmente permite que você escolha os dados da meta descrição do artigo, o que é uma ótima sugestão.
Ajustei um pouco o código e obtive o seguinte:
.
Isso é produzido por este código (nota ">" é eliminado):
<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('descrição')), 0,45, "..."). '"=" "/>
Você pode ver que estou recebendo a meta descrição, limitada a 45 caracteres, e adicionando reticências se a descrição estiver truncada. Dessa forma, posso "iscar" minha descrição para um melhor CTR, enquanto mantenho meu texto de introdução legível de acordo com o "estilo" ou "voz" do meu site. Ao usar a meta descrição, também posso adicionar parte desse código a uma substituição de categorias!
Outro leitor: Thomas Meredith comentou abaixo que o código
estava vulnerável a vulnerabilidades XSS e o código correto deveria ser:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Atualizamos o código com essa correção e você deve fazer o mesmo.
Vamos ajudá-lo a gerenciar melhor seu Joomla
Mais atualizações de nossos visitantes
Se você acompanhar a conversa abaixo, verá que, mesmo que o código acima funcione para a maioria das situações, há casos específicos em que o código não funciona. Michael, da N8 Solutions, se encarregou de encontrar uma solução para os casos em que isso não estava funcionando.
No espírito da comunidade Joomla de código aberto, eles compartilharam o código com o resto dos visitantes nos comentários abaixo. Estou reproduzindo o código e os comentários de Michael na íntegra, para maior clareza:
Consegui resolver o problema não apenas para a página "Contato", mas também para as páginas de itens de menu "Blog" e "Em destaque".
Em primeiro lugar, o que escrevi acima para a página de contato, para pegar o "Nome" o contato é salvo como funcionará. O "twitter: title" e "og: title" devem ser semelhantes a este se você quiser usar o nome salvo do contato.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
No entanto, se desejar usar as informações do menu, você pode fazer isso com este novo código, que também funcionará para as páginas de itens de menu "Blog" e "Em destaque".
Você pode escolher usar o "Título do Menu", "Título da Página do Navegador" ou "Título da Página". Eu prefiro usar o Título da Página e definir o menu para não mostrar o Título da Página. Desta forma, posso utilizar o Título da Página para o Open Graph da maneira que eu quiser, pois ele não aparecerá em nenhum outro lugar diferente do Título do Menu ou do Título da Página do Navegador que aparecerá.
Para fazer isso, você precisa adicionar o código abaixo entre "$ timage" e acima de "$ doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Em seguida, você deve substituir o código para "twitter: title" e "og: title" por este código abaixo para usar o "Título da página".
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Se, em vez disso, você quiser usar o "Título do Menu" ou o "Título da Página do Navegador", no código você deve substituir "$ pageheading" por "$ title" para usar o Título do Menu ou "$ browserpagetitle" para usar o Navegador Título da página.
Você pode criar as substituições aqui:
Criar substituições> Componentes> com_content> categoria
Criar substituições> Componentes> com_content> destaque
Criar substituições> Componentes> com_contact> contato
Em seguida, edite as substituições, adicionando o código acima, em seus respectivos locais:
Editor> html> com_content> categoria> blog.php
Editor> html> com_content> destaque> default.php
Editor> html> com_contact> contato> default.php
Também removi a instrução "if" da imagem Open Graph, deixando apenas a linha básica:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
Fiz isso porque a instrução "if" não é necessária para essas páginas, pois não há imagem de introdução ou imagem de texto completo.
Outra coisa importante a respeito das "Descrições".
Para CONTATOS:
No código da página de contato para "twitter: description" & "og: description", o "introtexto" precisa ser substituído por "metadesc" para obter a meta descrição definida para o contato. Se você não definir uma descrição para o contato, nada será exibido para as tags de descrição do gráfico aberto.
Para BLOG & Artigos EM DESTAQUE:
Assim como para os contatos, o "twitter: description" & "og: description" o "introtexto" precisam ser substituídos pelo código de Eddie acima para obter a meta descrição que está definida para o item de menu do blog ou do artigo em destaque. Novamente, se você não definir uma descrição lá, nada será exibido. Para que você não precise procurá-lo, aqui está o código que Eddie forneceu acima e como devem ser as linhas de descrição.
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
<meta property="og:description" content="'.mb_strimwidth(strip_tags($doc->getMetaData( 'description' )),0,45, " ...").'" />
Prefiro alterar o comprimento dos caracteres de 45 para 160, pois não estou interessado em visitantes em potencial do site "Clique na isca".
Espero que isso seja útil para outras pessoas!
4. Teste o validador do Twitter e o Facebook Linter
Verifique o artigo em seu site com o validador do Twitter: https://cards-dev.twitter.com/validator
e a
linter do Facebook: https://developers.facebook.com/tools/debug/
E é assim que você adiciona metadados Open Graph aos seus artigos Joomla :)
Perguntas Frequentes
O que é o protocolo Open Graph?
O protocolo Open Graph é uma forma de permitir que os sites controlem qual conteúdo é mostrado quando o conteúdo do site é compartilhado no Facebook, Twitter ou outras plataformas compatíveis com Open Graph. Se o seu site não usa essas tags, a plataforma pode decidir qual imagem mostrar e provavelmente mostrará uma imagem não relacionada.
O Google usa Open Graph?
Não O Google não usa o protocolo Open Graph para as páginas de resultados do mecanismo de pesquisa. Em vez disso, ele usa Dados estruturados, que é outro método para permitir que os rastreadores entendam melhor o conteúdo do seu site. Mesmo que o Google não use tags OG per se, o tráfego para o seu site é um sinal de classificação, portanto, provavelmente será benéfico para suas classificações orgânicas ter um site amigável para mídia social.
Como você define tags Open Graph no Joomla?
Para definir tags de gráfico aberto no Joomla, você pode usar uma substituição de modelo e preencher as tags do conteúdo de seus artigos, conforme descrito no artigo acima. Como alternativa, você pode instalar um plugin que é capaz de gerar essas tags automaticamente a partir do conteúdo do seu site.
Como você verifica as tags do Open Graph?
Para verificar as tags Open Graph, você pode usar o Facebook Linter ou Sharing Debugger, ou usar o validador de cartão do Twitter.
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!
Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.
e muitos mais ...