Una de las múltiples funcionalidades que ofrece Twitter a usuarios con sed de exprimir esta red son las Twitter Cards o Tarjetas de Twitter, un formato de tweet enriquecido que permite previsualizar, del mismo modo que Facebook o también Pinterest, una serie de detalles al compartir un enlace.
Esta herramienta está pensada principalmente para editores de contenidos, desarrolladores de aplicaciones o tiendas online que quieran dar mayor presencia al contenido de su página web en la red de microblogging y de paso medir su impacto. De esta forma, cada vez que cualquier usuario comparte algún enlace del sitio web en Twitter, automáticamente se incluye información complementaria del contenido enlazado que posteriormente podemos analizar.
Las tarjetas funcionan tanto en la versión de escritorio como en la versión móvil de Twitter, y según el tipo de contenido que generemos desde nuestra página, existen diferentes tipos de Twitter cards que podemos configurar:
- Resumen
- Resumen con imagen grande
- Producto
- Aplicación
- Imagen
- Galería de imágenes
- Reproductor de video/audio
En Julio de 2015 varios tipos de Twitter Cards fueron eliminadas, recogiendo actualmente solo cuatro tipos de cards.
Las tarjetas pueden configurarse en cualquier página web añadiendo unas líneas de código o instalando un complemento dependiendo del gestor de contenidos utilizado. En esta entrada veremos las opciones para instalar las Twitter Cards en las dos principales plataformas de blogging: Blogger y WordPress.
En ambos casos, una vez implementamos las Twitter Cards en nuestra web, debemos comprobar que funcionan correctamente a través de la herramienta de validación que ofrece Twitter, para ello probaremos cualquier enlace de nuestra página web y por último solicitaremos a Twitter su uso para nuestra web lo que puede tardar entre 5 y 10 días.
Twitter Cards en WordPress
Si utilizamos la versión hospedada de WordPress (.org) tenemos dos opciones para incluir las tarjetas.
Plugin _ Dificultad baja
Uno de los plugins más recomendados para usar las tarjetas es JM Twitter Cards Plugin. A continuación detallo los pasos de instalación y configuración del plugin:
- Accede al panel de control de WordPress.
- En la barra lateral izquierda, selecciona «Plugins > Añadir nuevo».
- En el buscador escribimos «JM Twitter Cards» y pulsamos Buscar.
- Hacemos clic en Instalar en el resultado «JM Twitter Cards».
- Si has instalado correctamente el plugin, en la barra lateral izquierda aparecerá una nueva opción denominada «JM Twitter Cards».
- Al acceder al plugin, debemos completar los siguientes apartados:
- Tipo de Twitter Card.
- Usuario de Twitter personal.
- Usuario de Twitter del sitio web.
- Etiquetas meta asociadas a la cuenta de Twitter.
- Guarda los cambios.
- No olvides probar y validar tu blog en Twitter.
Manualmente _ Dificultad alta
Si tenemos conocimientos de código, podemos incluir las Tarjetas de Twitter en unos sencillos pasos para que funcionen correctamente al compartir una entrada, una página o una categoría.
- Accede al panel de control de WordPress.
- En la barra lateral izquierda, selecciona «Apariencia > Editor».
- Una vez en el editor HTML localiza el archivo «header.php» y dentro de él busca la etiqueta </head>.
- Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:
- Guarda los cambios.
- No olvides probar y validar tu blog en Twitter.
Twitter Cards en Blogger
En la plataforma Blogger, tenemos una única opción para incluir las tarjetas de Twitter que nos obligará a editar la plantilla HTML.
- Accede al panel de control de Blogger.
- En la barra lateral izquierda, selecciona «Plantilla > Editar HTML».
- Una vez en el editor HTML, buscamos la etiqueta </head>.
- Justo encima de esta etiqueta copiamos y pegamos el siguiente código, modificando únicamente los apartados en negrita por tus datos de Twitter y del blog:
- Guarda los cambios.
- No olvides probar y validar tu blog en Twitter.
Una vez hayas configurado correctamente las tarjetas y tu sitio web haya sido validado por Twitter, podrás medir el alcance de todos los tweets que compartan un enlace del sitio a través de analytics.twitter.com.
Si te pareció interesante esta entrada, también puedes aprender cómo implementar los pines enriquecidos en WordPress pulsando en el siguiente link.
Entradas sobre Redes sociales que pueden interesarte
Estrategia Social Media para ONG
Buenos dias;
He optado por la opcion facil para WP y he instalado el plugging sin problema, vinculandolo a mi perfil de Twitter. Hasta ahí todo bien, pero al intenta validar en el sitio de Twitter, me da error (invalid card type).
¿Sabeis a que se puede deber?
Muchas gracias
Hola Azucena, ¿Qué URL has introducido para validar, la página principal o una entrada? He probado una entrada de tu sitio web y funciona correctamente la validación. Saludos
Hola Javier;
Muchisimas gracias por tu pronta respuesta.
He probado con la pagina principal http://ebevidencia.com/
Entiendo con esto que hay que hacer un proceso de validación para cada entrada que quiera compartir en Twitter, ¿es asi?.
Gracias de nuevo. Saludos!
No es necesario Azucena, una vez valides una entrada cualquiera, Twitter reconocerá el dominio y lo aplicará al resto de entradas que se compartan.
Hola…. Ha sido de mucha ayuda vuestro post, ya que quería implementar las tarjetas sin pluging en WP. Queda todavía la validación de la cuenta por parte de Twitter. Pero por ahora, cuando pruebo las URL de la web, no salen la foto y he elegido el «Resumen con imagen» como tarjeta.
A que puede deberse?
Muchas gracias por vuestra aportación:)
Hola María José, en otras ocasiones a nosotros también nos ha producido ese error, sin embargo si la URL de la imagen es correcta en la previsualización, no tienes que preocuparte, puedes validarlo sin problemas.
Saludos!
He obtenido la validación pero no me funciona cuando tuiteo. ¿Qué tengo que poner en @enlaceimagenblog?
Hola Masteatro, en @enlaceimagenblog tienes que poner un link al logo de tu blog o a la cabecera, cuando no exista una imagen en el post o enlacen a la página principal Twitter usará esa imagen para mostrar
Saludos
Cuando tuiteo la imagen que se ve es del New york times ¿xq?
Hola, he optado por la implementación del código HTML, pero tengo un error, y una duda.
Dices que sólo hay que cambiar lo que está en negrita, pero no se si he realizado los cambios como debería.
He puesto en tipo de tarjeta: summary_large_image
Mi usuario de Twitter
Y finalmente, donde tienes puesto @EnlaceImagenBlog no entiendo que es lo que hay que poner, por que el @ me confunde un poco XD, asi que lo he dejado tal cual, esperando a que me digas que es exactamente lo que hay que poner ahí, si es la url de una imagen, he probado con ello, pero sigue sin funcionar.
Al validad la tarjeta me pone esto:
INFO: Page fetched successfully
INFO: 11 metatags were found
ERROR: No card found (Card error)
Hola Urko, en @EnlaceImagenBlog tienes que poner la URL de una imagen de tu blog, puede ser el logo o la cabcera, ya que será la imagen que se visualice cuando se comparta la página de incio.
Saludos
Hola,
Estoy intentando incorporarlos en blogger, consegui que lo muestre para la home … pero para las entradas me da el siguiente mensaje
INFO: Page fetched successfully
INFO: 4 metatags were found
ERROR: No card found (Card error)
Coloque todo el codigo que tu indicas sustiuyendo las negritas … pero no entiendo que sucede .-
¿podrias ayudarme ?
Saludos
Hola Ana, igual puede ser algún error temporal, por lo que indicas Twitter detecta las metas correctamente, puedes indicar tu URL?
Saludos
Hola Javier, tengo una pregunta para usted un poco sencilla pero que está acabando con mi paciencia… He instalado el plugin para WordPress "JM twitter cards" y hasta aquí todo bien. El problema me viene cuando paso al validador de twitter, me dice que todo está correcto, pero no me aparece el botón de validarlo y no entiendo por qué. Puede que sea una pregunta tonta pero no lo encuentro, ¿tiene un consejo de lo que pueda hacer?
Hola, al parecer Twitter ha actualizado la herramienta y ya no es necesario validarlo manualmente, si la Twitter Card está configurada y Twitter la reconoce correctamente debería aplicarla en cuestión de horas.
Muchísimas gracias por tu post, era justo lo que andaba buscando. Compartiendo!
Hola Javier, muchas gracias por este post.
Instalé el pluggin correctamente y completé el tipo de twit card y los otros datos solicitados. Hasta ahí todo parece ir bien pero al intentar validar me sale este mensaje:
"No se puede representar previsualización de la tarjeta
INFO: Page fetched successfully
WARN: No metatags found"
A qué puede deberse???