Cómo agregar tarjetas de Open Graph en Facebook y Twitter usando Joomla!
Estarás de acuerdo conmigo, que en las redes sociales, aparecen tarjetas con una bonita imagen, descripción y titulo, que son muy atractivas y “clickeables”, aunque tan sólo son un enlace que el usuario compartió en su timeline o en algún grupo.
La manera más sencilla, práctica y gratis de implementar las llamadas etiquetas Open Graph, en cualquier plantilla de Joomla!, es utilizando la extensión ITPMeta que proporciona la información a Facebook y Twitter sobre qué contenido deben usar en las tarjetas.
INTRODUCCIÓN.
Con ITPMeta puedes agregar “meta tags sociales” globalmente en la parte <head> de tu sitio web, o bien puedes ponerlas en páginas determinadas. Esta extensión dispone de una librería de meta-etiquetas del protocolo Open Graph que podrás colocarlas con solo un clic del mouse.
Facebook utiliza el protocolo Open Graph para extraer la descripción adecuada sobre los enlaces compartidos. Whatsapp es de propiedad de Facebook y utiliza la misma información. Google también usa la información de Facebook para indexar mejor sus publicaciones, así que mejorará la optimización del motor de búsqueda de su sitio y ayudará a aumentar su SEO y posición en los resultados de los motores de búsqueda.
DESCARGAR E INSTALAR.
Tienes que descargarte la extensión gratuita para Joomla! que aquí te dejo
y la librería necesaria para que funcione correctamente la extensión
Visita la página oficial del desarrollador ITPrism para obtener la versión más reciente de ambos archivos.
Sube e instala el archivo de la extensión ITPMeta y la Librería Prism. Si estás instalando la extensión por primera vez, verás una lista de bibliotecas, complementos y módulos instalados. También verás una lista de requisitos mínimos. Si Joomla! muestra indicadores rojos con requisitos no cumplidos, encuentra una manera de solucionarlo dependiendo de ese error.
Comprueba con el gestor de extensiones que está instalada y habilitada para poder utilizarla.
DASHBOARD (PANEL PRINCIPAL).
Dirígete a: Componentes>ITPMeta para ir a la interfaz de la extensión y empezar a trabajar en el panel.
El panel está dividido en tres partes. A la derecha, el menú para navegar entre las distintas opciones de la extensión. En zona central vemos la información básica y numérica de las URLs de nuestro sitio con las tags o scripts que hemos creado. Y a la izquierda la información proporcionada por el desarrollador de la extensión. Como veis, básico y sencillo.
URLs MANAGER (ADMINISTRADOR URLs).
Este es el administrador de URL donde aparecen las distintas direcciones de tu sitio en las que puedes añadir tags. Puedes crear, editar o eliminar estas direcciones utilizando los botones, que se encuentran en la parte superior del tablero del administrador como es habitual en Joomla!.
Utiliza el botón +Nuevo para crear un registro en el que podrás agregar etiquetas META PROPERTY a esa dirección. Estas etiquetas solo afectarán a esta página. Se agregarán al código fuente cuando se cargue la página en la parte <head>.
Una vez que ha clickeado en +Nuevo, escriba la URL elegida en el campo de texto “URl String” empezando siempre con el símbolo ( / ) por ejemplo: si tu URL es debes usar
IMPORTANTE: La URL tiene que empezar con una barra inclinada ( / )
Selecciona un ESTADO: Si eliges "Publicado", el sistema cargará los tags para esta URL. Si selecciona "No publicado ", eso significa que este registro estará inactivo y el sistema no colocará ninguna etiqueta en el código de la página.
Si habilitas la ACTUALIZACIÓN AUTOMÁTICA, el sistema recopilará datos del contenido y actualizará automáticamente el contenido de las etiquetas existentes. El sistema también actualizará las etiquetas actuales si los datos son diferentes de los actuales.
NOTA: Esta opción funciona para el plugin System - ITPMeta Tags, que recopila datos y genera etiquetas si está habilitado.
Ejemplo: Hay una etiqueta <og: title> asignada a la URL de un artículo. Si modifica el título de ese artículo posteriormente y la opción "AUTO UPDATE" está habilitada, el sistema obtendrá el nuevo título y lo almacenará en la etiqueta. Si por el contrario lo que deseas es utilizar un título personalizado, puede reemplazar el contenido de la etiqueta con el suyo y deshabilitar la opción "Actualización automática". Por lo tanto, evitará su actualización automática, porque así el sistema no actualiza el contenido si hay diferencia.
La ID es el número de registro en la base de datos se asigna automáticamente y no se puede modificar.
Pulsa el botón de GUARDAR y ya estarás en disposición de crear tags asociados a esa URL.
Crear una meta-etiqueta es tan sencillo como hacer clic en el botón de + NUEVO. Te aparece la interfaz de añadir etiqueta, con la clásica botonera en la parte superior y la zona de trabajo dividida en dos paneles. A la derecha una lista con desplegables, con la mayoría de las etiquetas disponibles. Cuando haces clic en una etiqueta, el sistema rellenará los campos de texto, que están en el lado izquierdo. Esos campos contienen el código de la etiqueta seleccionada.
En el cuadro de texto la estructura entre corchetes, como esta {PAGE_TITLE}, será reemplazada por la cadena de valor que ingreses en el cuadro de texto . El sistema colocará la etiqueta en el lugar correcto. Cuando hayas terminado, guarde los datos.
De esta manera podrás asociar tantas tags como necesites a la URL especifica. Evidentemente, no hace falta explicar para que sirven entonces los botones de EDITAR y ELIMINAR. También se pueden reordenar las meta etiquetas haciendo click en los puntos de la derecha, arrastrarlas y soltarlas en lugar de orden deseado.
GLOBAL TAGS (ETIQUETAS GLOBALES).
Hay etiquetas como og:site_name y fb:admins que deben agregarse en el <head> de la página principal o de inicio. Por lo tanto, las etiquetas creadas en la parte de se incluirán en cada página de su sitio web.
La forma de crearlas, editarlas o eliminar es igual a la descrita en el paso anterior con el URLs MANAGER.
PLUGIN "SYSTEM - ITPMeta".
Este complemento, una vez habilitado, es el que agrega etiquetas predefinidas al código de las páginas y coloca esquemas en la etiqueta <HTML>.
Posición de etiquetas: puedes seleccionar la posición de las etiquetas donde se agregarán.
- Posición estándar: el sistema sigue la cola de agregar metadatos.
- Después de la etiqueta
<head>: las etiquetas se agregarán inmediatamente después de abrir la etiqueta<head>. - Después de la etiqueta
<title>: las etiquetas se agregarán inmediatamente después de la etiqueta<title>.
Esquemas: Los esquemas describen el elemento en el código HTML. El navegador necesita estos esquemas para obtener más información sobre las etiquetas que están en el código. Por lo tanto, necesitamos poner un enlace a los esquemas de OpenGraph o Facebook en la etiqueta HTML. Puede agregar esos datos seleccionando una de las opciones: " Sí " o " No ", y el sistema colocará la cadena en el código de la página web.
CONSIDERACIONES FINALES.
Ya sabes como crear y añadir tags a tu sitio web, ahora debes de elegir cuales utilizas. Existe mucha información sobre ello en la red, por lo que debes analizar varias posibilidades y tener opciones de valores para tus atributos. Te dejo un ejemplo:
Puedes probar tus resultados en las herramientas que nos proporcionan las redes sociales y sacar tus propias conclusiones:
FACEBOOK (depurador de contenido compartido).
TWITTER (validator de tarjetas).
Aunque es una extensión longeva, para mí es práctica y válida. Puedes encontrar más actuales en el directorio de extensiones de Joomla!. Comprobarás que no todas interactúan bien con las plantillas y extensiones que tienes implementadas en tu sitio web, como ocurre con EasyBlog de Stackideas y Zoo de Yootheme.
HASTA PRONTO.