Mi primer Twitter Card desde Joomla

En realidad habia estado buscando la manera de realizar esto donde estoy trabajando (Canal Capital) pero siempre el problema habia sido la verificación de parte de Twitter del código que se debe insertar en Joomla.

Paso a paso
Lo importante es que sepan que el código que permitirá una Twitter Card debe estar en el artículo de Joomla.

1er Paso: Ir a https://dev.twitter.com/docs/cards/validation/validator

Elegir que tipo de "card" es la que se quiere usar. En mi caso fue Summary

2do Paso: Insertar los datos
Los items minimos para generar una Preview de una Twitter Card son:

• twitter:title (pueden usar el título del articulo que desean mostrar)
• twitter:description (Este será el texto que suma contenido al trino)
• twitter:image:src (Es una imagen de apoyo al Twitter Card)

3er Paso: Darle clic a "Update Preview"

Una vez hagan esto veran una versión beta de como se veria el trino.

(No pongo una imagen por que con el paso del tiempo puede cambiar y les generaría confusión)

Aqui hago un ALTO para mostrarles una solución en el caso de que en el momento de generar  el preview no les muestre la imagen. El problema es de Joomla, pues por alguna razon evita que Twitter acceda a la carpeta de "images" del CMS. Asi que la solucion para que una Twitter Card carge una imagen hospedada en Joomla es hacer lo siguiente.

Modifiquen el archivo robots.txt que se encuentra en el root de su servidor y hagan un comentario en la siguiente linea:

Antes: Disallow: /images/ Despues: # Disallow: /images/

 Graben su archivo y subanlo a su servidor reemplazando el antiguo.

4to Paso: Copiar el código que Twitter les genera y pegarlo en su articulo (aquí está la magia)
El código tiene estas generalidades
<meta name="twitter:card" content="PLACEHOLDER">
<meta name="twitter:site" content="@site_username">
<meta name="twitter:title" content="Top 10 Things Ever">
<meta name="twitter:description" content="Up than 200 characters.">
<meta name="twitter:creator" content="@creator_username">
<meta name="twitter:image:src" content="http://placekitten.com/250/250">
Obviamente los datos serán distinto ya que tendrán los datos que ustedes le generaron en los pasos anteriores. 
Llegamos a Joomla Abrimos nuestro artículo y damos clic en el botón "Insert Code"

 y procederemos a pegar el codigo:



Este es el código que Twitter ve en el momento en que trinamos la URL del artículo que vamos a insertar en la Twitter Card, por eso es importante embeberlo en el artículo mismo. 
Finalizamos con "Insert" y grabamos el articulo.
5to Paso: Volvemos a la página de Twitter Cards y damos clic en "Validate & Apply", colocamos la dirección del artículo

Si todo salió bien verán:


ACHTUM: SI Y SOLO SI... es la primera vez que generan una Twitter Card, le solicitará unos datos fáciles: La @ de su cuenta, una cuenta de Correo Electrónico y una descripción de su sitio.
Recibirán un correo que dice:


ULTIMO PASO: Inicien su trino con un Call to Action, trinen la URL de su artículo y veran:
Asi se verá su linea de tiempo

El título de ver resumen es lo que hace la diferencia


Después de dar clic veran la magia....



En la version movil lo verán asi:

Si tienen preguntas pueden hacerlo a @alexhidrobo