En este artículo, vamos a discutir cómo agregar Facebook Open Graph y Twitter Cards a Joomla sin un complemento o módulo.
Si no ha vivido bajo una roca durante la última década, probablemente haya visto a personas compartiendo artículos en Facebook con una imagen y un título agradables, y algo similar en Twitter con tarjetas grandes y bonitas que muestran una gran imagen.
La mejor forma de controlar esto es implementar lo que se llama Open Graph protocolo. Este es un conjunto de etiquetas que dan pistas a Twitter, Facebook y otros rastreadores sobre qué contenido deben usar.
Puede hacer esto fácilmente en Joomla sin instalar ninguna extensión de terceros creando una anulación de plantilla.
He aquí cómo hacer esto:
Tarjetas de Twitter Joomla
Cuando implemente tarjetas de Twitter usando etiquetas de gráficos abiertos de Joomla, en lugar de mostrar una imagen al azar, o ninguna imagen, su artículo de Joomla sugerirá la mejor imagen para usar.
Vea el siguiente ejemplo del CollectiveRay feed de Twitter.
Ejemplo de Facebook Open Graph
Por otro lado, en Facebook, utilizando las etiquetas de Joomla Open Graph, sus publicaciones cuando se compartan se verán como se muestra a continuación.
Cómo habilitar las etiquetas Open Graph de Joomla
1. Cree una anulación de plantilla para artículos
Extensiones> Plantillas> Plantillas> (su plantilla) Detalles y archivos> Crear anulaciones> Componentes> com_content> artículo
Una vez que haya creado la anulación de la plantilla de artículo, puede agregar los metadatos a la anulación que se utilizará para mostrar su artículo. Esencialmente, deberá agregar el siguiente contenido al artículo de manera que los metadatos se obtengan de su artículo.
2. Agregue los metadatos para Facebook / Twitter Open Graph
Vaya a Extensiones> Plantillas> Plantillas> (su plantilla) Detalles y archivos> Editor> html> com_content> artículos> default.php
Agregue el siguiente código en la parte superior entre las etiquetas php: - tenga un poco de cuidado dónde agregar esto, podría romper su plantilla temporalmente si la agrega en el lugar equivocado ... así que haga una copia de seguridad completa del archivo, antes de realizar cualquiera de estas ediciones
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. Personalice las etiquetas de Open Graph según sus valores
El código anterior está personalizado para CollectiveRay, por lo que obviamente edite los valores de los elementos que desee para su propio sitio.
Estas son las líneas que necesita cambiar:
$timage= 'https://www.joomlawire.com/joomla3/images/joomla_logo_black.jpg';
Esta debe ser la ubicación de la imagen predeterminada, en caso de que su artículo no tenga una imagen de introducción o una imagen de texto completo.
<meta name="twitter:site" content="@DARTCreations"> <meta name="twitter:creator" content="@DARTCreations">
El valor @ anterior debe cambiarse para reflejar su nombre de usuario de Twitter.
<meta property="og:email" content="info@dart-creations.com";/>
La dirección de correo electrónico anterior debe actualizarse a su propia dirección de correo electrónico.
Lo anterior debe actualizarse con el nombre de su sitio.
En vez de xxxxxxxxxxx de la etiqueta fb: admins, deberá ingresar la identificación numérica del usuario de Facebook que realizará cosas como Page Insights. Para encontrar el número, es posible que desee mirar una herramienta como esta herramienta: encontrar mi ID de Facebook.
Sugerencia del lector:
Eddie sugirió que puede restringir la longitud de la descripción a un número específico de caracteres si usa el siguiente código:
Es posible que desee restringir la longitud de la descripción a c.45 caracteres utilizando mb_strimwidth o substr como este:
<meta name="twitter:description" content="'.mb_strimwidth(strip_tags ($ this-> item-> introtext), 0,45). '"/>
or
Ed también ha hecho una segunda sugerencia que en realidad le permite elegir los datos de la meta descripción del artículo, lo cual es una sugerencia bastante buena.
Modifiqué un poco el código y obtuve lo siguiente:
.
Esto es producido por este código (nota ">" es eliminado):
<meta property="og:description" content="'.mb_strimwidth(strip_tags ($ doc-> getMetaData ('descripción')), 0,45, "..."). '"=" "/>
Puede ver que obtengo la meta descripción, limitada a 45 caracteres, y agrego puntos suspensivos si la descripción está truncada. De esta manera puedo "hacer clic en cebo" mi descripción para un mejor CTR mientras mantengo mi texto de introducción legible de acuerdo con el "estilo" o "voz" de mi sitio web. ¡Al usar la meta descripción, también puedo agregar parte de este código a una anulación de categorías también!
Otro lector: Thomas Meredith comentó a continuación que el código
era vulnerable a las vulnerabilidades XSS y el código correcto debería ser:
<meta property="og:url" content="'.str_replace('" ','"',JURI::current()).'"
Hemos actualizado el código con esta corrección y usted debe hacer lo mismo.
Te ayudamos a administrar mejor tu Joomla
Más actualizaciones de nuestros visitantes
Si sigue la conversación a continuación, encontrará que incluso si el código anterior funciona para la mayoría de las situaciones, hay casos específicos en los que el código no funciona. Michael de N8 Solutions, se encargó de encontrar una solución para aquellos casos en los que esto no funcionaba.
En el espíritu de la comunidad Joomla de código abierto, compartieron el código con el resto de visitantes en los comentarios a continuación. Estoy reproduciendo el código y los comentarios de Michael textualmente, para mayor claridad:
Pude resolver el problema no solo para la página "Contacto" sino también para las páginas de elementos del menú "Blog" y "Destacados".
Primero, lo que escribí arriba para la página de contacto, para tomar el "Nombre", el contacto se guarda como funcionará. El "twitter: title" y "og: title" deberían verse así si quieres usar el nombre guardado del contacto.
<meta name="twitter:title" content="'.$this->escape($this->item->name).'" />
Sin embargo, si desea utilizar la información del menú, puede hacerlo con este nuevo código que también funcionará para las páginas de elementos del menú "Blog" y "Destacados".
Puede optar por utilizar el "Título del menú", el "Título de la página del navegador" o el "Encabezado de la página". Prefiero usar el Encabezado de página y configurar el menú para que no muestre el Encabezado de página. De esta manera, puedo utilizar el encabezado de página para Open Graph de la manera que desee, ya que no se mostrará en ningún otro lugar a diferencia del título del menú o el título de la página del navegador, que sí.
Para hacer esto, debe agregar el código a continuación entre "$ timage" y arriba "$ doc".
$active = JFactory::getApplication()->getMenu()->getActive();
$title = $active->title;
$browserpagetitle = $active->params->get('page_title');
$pageheading = $active->params->get('page_heading');
Luego, debe reemplazar el código de "twitter: title" y "og: title" con este código a continuación para usar el "Encabezado de página".
<meta name="twitter:title" content="'.$this->escape($pageheading).'" />
<meta property="og:title" content="'.$this->escape($pageheading).'" />
Si, en cambio, desea usar el "Título del menú" o el "Título de la página del navegador", en el código debe reemplazar "$ pageheading" con "$ title" para usar el título del menú o "$ browserpagetitle" para usar el navegador. Título de la página.
Puede crear las anulaciones aquí:
Crear anulaciones> Componentes> com_content> categoría
Crear anulaciones> Componentes> com_content> destacado
Crear anulaciones> Componentes> com_contact> contacto
Luego edite las anulaciones, agregando el código anterior, en sus respectivas ubicaciones:
Editor> html> com_content> categoría> blog.php
Editor> html> com_content> destacado> default.php
Editor> html> com_contact> contacto> default.php
También eliminé la declaración "si" para la imagen de Open Graph dejando solo la línea básica:
$timage= 'https://www.domain.com/custom-open-graph-image.jpg';
Hice esto porque la declaración "si" no es necesaria para estas páginas, ya que no hay una imagen de introducción ni una imagen de texto completo.
Otra cosa de importancia relativa a las "Descripciones".
Para CONTACTOS:
En el código de la página de contacto para "twitter: description" y "og: description", el "introtexto" debe reemplazarse por "metadesc" para obtener la meta descripción que se establece para el contacto. Si no establece una descripción para el contacto, no se mostrará nada para las etiquetas de descripción del gráfico abierto.
Para BLOG Y ARTÍCULOS DESTACADOS:
Al igual que arriba para los contactos, "twitter: description" y "og: description", el "introtexto" debe reemplazarse con el código de Eddie anterior para obtener la meta descripción que está configurada para el artículo del menú Blog o Artículo destacado. Nuevamente, si no establece una descripción allí, no se mostrará nada. Para que no tenga que buscarlo, aquí está el código que Eddie proporcionó anteriormente y cómo deberían verse las líneas descriptivas.
<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, " ...").'" />
Prefiero cambiar la longitud de los caracteres de 45 a 160, ya que no me interesan los visitantes potenciales del sitio "Bait Click".
¡Espero que esto sea útil para otros!
4. Prueba con el validador de Twitter y el Linter de Facebook.
Consulte el artículo de su sitio web con el validador de Twitter: https://cards-dev.twitter.com/validator
y
Linter de Facebook: https://developers.facebook.com/tools/debug/
Y así es como agregas metadatos de Open Graph a tus artículos de Joomla :)
Preguntas Frecuentes
¿Qué es el protocolo Open Graph?
El protocolo Open Graph es una forma de permitir que los sitios web controlen qué contenido se muestra cuando el contenido de su sitio web se comparte en Facebook, Twitter u otras plataformas compatibles con Open Graph. Si su sitio web no usa estas etiquetas, la plataforma puede decidir qué imagen mostrar y probablemente mostrará una imagen no relacionada.
¿Google usa Open Graph?
No Google no utiliza el protocolo Open Graph para las páginas de resultados del motor de búsqueda. En cambio, usa Datos estructurados, que es otro método que permite a los rastreadores comprender mejor el contenido de su sitio web. Aunque Google no utiliza etiquetas OG per se, el tráfico a su sitio web es una señal de clasificación, por lo que probablemente beneficiará a sus clasificaciones orgánicas tener un sitio web compatible con las redes sociales.
¿Cómo se configuran las etiquetas Open Graph en Joomla?
Para establecer etiquetas de gráficos abiertos en Joomla, puede usar una anulación de plantilla y completar las etiquetas del contenido de sus artículos como hemos descrito en el artículo anterior. Alternativamente, puede instalar un complemento que pueda generar estas etiquetas automáticamente a partir del contenido de su sitio web.
¿Cómo se comprueban las etiquetas de Open Graph?
Para verificar las etiquetas de Open Graph, puede usar Facebook Linter o Sharing Debugger, o usar el validador de tarjetas de Twitter.
Por favor, deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!
Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.
y muchos más ...