5 maneras fáciles de instalar tarjetas de Twitter en su sitio web

Entonces, ¿sabe cómo en Twitter, cuando alguien publica un enlace a su sitio web, Twitter crea un cuadro que tiene una imagen en miniatura, un título, una descripción y una URL para la página de destino? Es muy común. Hace que las publicaciones de enlaces estándar sean mucho más visibles en las líneas de tiempo, muestra un poco sobre el destino del enlace y fomenta una mayor interacción del usuario.

Esa es una tarjeta de Twitter. Específicamente, es la tarjeta de resumen del sitio web, uno de varios tipos de tarjetas de Twitter que se pueden integrar en un sitio web. ¿Qué otros tipos hay?

• La tarjeta de resumen, como se mencionó, es una vista previa de un sitio web. Es una imagen personalizada y un texto extraído de la metainformación que garantiza una buena vista previa de lo que verá un usuario cuando haga clic en su enlace.
• La ficha de resumen (con imagen grande) es… idéntica a una ficha de resumen. Sinceramente, no sé por qué hay una diferencia. Haga clic en cada uno de los enlaces y vea los tweets de vista previa y vea lo que quiero decir. Supongo que antes del último rediseño de Twitter podrían haberse visto diferentes, pero hoy todo parece una tarjeta de imagen grande.
• La tarjeta de jugador no debe confundirse con tarjetas de béisbol u otros deportes. Son esencialmente tarjetas de imágenes grandes, excepto que la imagen es una forma de medio animado. Dependiendo de cómo se muestren, pueden ser pequeños cuadros de vista previa y de descripción que se expanden a los medios, o simplemente los medios listos para reproducirse. Por lo general, estos son videos incrustados, como los videos de YouTube, aunque los webms son cada vez más populares.
• La tarjeta de la aplicación es un cuadro que extrae datos de una página de la tienda de aplicaciones para crear una ventana de promoción de aplicaciones personalizada. Muestra los detalles más destacados de la aplicación vinculada en el tweet, junto con un botón CTA para que los usuarios instalen la aplicación de inmediato.

Las tarjetas de Twitter solían ser mucho más complejas. Solía ​​haber tipos específicos de tarjetas para galerías de imágenes, productos y algunas otras opciones, pero desde entonces Twitter las eliminó. Si quieres un poco de nostalgia, puedes ver cómo se veían aquí, pero no te encariñes demasiado; no puedes hacerlos hoy.

Los fundamentos de las tarjetas de Twitter

Solo puede tener un tipo de tarjeta de Twitter por sitio web, o al menos por página web, si desea especificar un código individual para cada página. La mayoría de las personas eligen una tarjeta de resumen de imagen grande básica y colocan el código en el encabezado de la plantilla de su sitio, para que aparezca en todas las páginas. Algunos sitios, como YouTube, colocarán la tarjeta del jugador en su encabezado. La conclusión principal aquí es que solo puede tener un conjunto de información de tarjeta en los metadatos de su encabezado en una página determinada.

Las tarjetas son bastante robustas en los datos que pueden transmitir. Puede hacer que la tarjeta sepa automáticamente quién creó el contenido y quién es el propietario de la página, incluso ambos al mismo tiempo si son diferentes. Puede especificar los medios que se cargarán, puede especificar nombres y códigos de seguimiento, y mucho más. De hecho, puede leer esta página para tener una idea de los atributos que puede usar para las tarjetas específicamente. También puede vincular los atributos de Open Graph para obtener datos más sólidos.

Lo que voy a hacer aquí hoy es decirle cómo agregar tarjetas de Twitter a su sitio. No voy a repasar cada uno de los atributos, la documentación de Twitter es lo suficientemente buena, solo le daré un resumen de cómo hacerlo para varios CMS.

Antes de que comencemos; para cada método de instalación, necesita validación. Para asegurarte de que lo has hecho bien, una vez que tengas una tarjeta habilitada, copia la URL a este validador. Esto le dirá si la tarjeta realmente funciona o no.

1: WordPress

WordPress es quizás la plataforma más fácil para implementar tarjetas de Twitter, porque hay muchas formas diferentes de hacerlo, incluida la que está casi integrada.

La forma recomendada de implementar las tarjetas de Twitter es utilizar el complemento oficial de Twitter . Puedes instalarlo como cualquier otro complemento, y desde allí puedes generar tus tarjetas de Twitter automáticamente. También permite compartir y twittear/seguir botones, manejo de tweets integrados y códigos abreviados para el seguimiento de análisis. Puede leer la documentación aquí y descargar el complemento aquí.

Si no desea usar el complemento oficial de Twitter, o si está alojado en WordPress.com, puede usar Jetpack. En Jetpack, desea encontrar la sección Compartir y configurarla. Habrá una sección de Twitter, donde autorizas tu cuenta de Twitter a tu sitio web.

Una tercera opción es usar el complemento JM Twitter Cards. Este complemento, de Julien Maury, agrega compatibilidad con la tarjeta de Twitter con algunas configuraciones básicas. Puede elegir que use la primera imagen en su página en lugar de una imagen destacada, puede obtener una vista previa de la representación de su tarjeta de Twitter y puede personalizar la tarjeta para cada publicación cuando crea la publicación. Para configurar el complemento, vaya a la barra lateral y haga clic en el panel de complementos en su panel de administración. Elija el tipo de tarjeta y complete el resto de los cuadros con su cuenta de Twitter, la cuenta de su sitio, la longitud de la descripción y cualquier otra cosa que desee agregar.

Si ninguno de ellos se ajusta a sus necesidades, o si ya lo tiene, WordPress SEO by Yoast también maneja las tarjetas de Twitter. En su panel de administración, navegue hasta SEO y haga clic en la sección Social. Hay una pestaña de Twitter allí, donde puede agregar su nombre de usuario de Twitter al cuadro. Desafortunadamente, lo último que leí, Yoast solo admite tarjetas de resumen; necesita complementos más avanzados si desea otros tipos de tarjetas.

2: Tumblr

Tumblr es una plataforma de blogs sorprendentemente popular que muchas personas no saben que se ha vuelto tan prolífica como lo ha hecho. La red Tumblr se extiende más allá de los blogs marcados con .tumblr.com; de hecho, algunos sitios de renombre utilizan Tumblr como arquitectura base. Una vez que tiene un dominio personalizado, es como cualquier otra arquitectura de back-end. ¿O es eso?

El hecho es que la arquitectura de Tumblr no es expansiva ni tan personalizable como WordPress. Tendrá que usar algún código personalizado para implementar tarjetas de Twitter específicas y personalizadas en su blog. Puede leer el código y la descripción detrás de él aquí, en la respuesta dada por Dan Leveille en Quora.

Vale la pena señalar aquí que este código es necesario para personalizar sus tarjetas manualmente; no se requiere simplemente tener tarjetas de resumen. Twitter ya ha incluido Tumblr.com en la lista blanca para la generación automática de tarjetas en la publicación del enlace, por lo que, a menos que desee una tarjeta específica con datos específicos, o esté usando un dominio personalizado, puede usar lo que está implementado de manera predeterminada. Solo recurriría a su código si tiene un dominio personalizado para su sitio de Tumblr, o si desea datos que Twitter no está recopilando de forma natural.

3: bloguero

La instalación de tarjetas de Twitter en un blog de Blogger se reduce a su plantilla. Te daré instrucciones generales, pero si la plantilla de tu sitio difiere demasiado de la norma, tendrás que resolverlo tú mismo según las pistas que te dé.

Siempre se recomienda que haga una copia de seguridad de su plantilla antes de manipularla, por si acaso. Vaya a su tablero, haga clic en la plantilla y haga clic en el botón de copia de seguridad para guardar una copia para restaurarla más adelante.

A continuación, haga clic en el botón "editar HTML" debajo de la vista previa en vivo de la plantilla de su blog. Dentro de ese código, ejecute una búsqueda de “<b:includable id='post' var='post'>”. Mantenga esa línea donde está, pero pegue lo siguiente directamente debajo:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Obviamente, deberá editar los datos de arriba usted mismo. Cambia @tunombre por tu nombre de usuario de Twitter, cambia www.tusitio.com por la URL de tu sitio y asegúrate de que sea correcto.

Por supuesto, puede personalizar este código para sus necesidades. Si prefiere un tipo de tarjeta diferente, cambie la línea superior con algo que no sea "resumen" y adapte el resto del código a los datos que necesita.

En caso de que el código que pegué arriba no funcione, esta es la página de donde lo obtuve. Puede verificar dos veces para asegurarse de que lo copié correctamente, o que lo hizo, y puede verificar allí en caso de que se haya actualizado y mi publicación no refleje la actualización. Hablando de eso, si no funciona, házmelo saber. Haré todo lo posible para arreglarlo.

4: Joomla

Joomla tiene mucho en común con WordPress, en cuanto a ser un CMS con énfasis en la personalización a través de extensiones en lugar de una plataforma limitada con mejoras cosméticas como Tumblr o Blogger. Como tal, hay varias formas diferentes de implementar tarjetas de Twitter usando diferentes extensiones de Joomla.

Tweet Cards es una extensión que probablemente prefiera la mayoría de la gente. Es gratis para descargar y usar, y agrega tarjetas de Twitter a su sitio web basado en Joomla. Eso es todo; no hay nada sofisticado en la configuración, no hay nada excepcional con su funcionalidad o implementación, simplemente hace lo que dice en la lata.

Una segunda opción es la extensión profesional Open Graph y Twitter Card Tags. Es una extensión más robusta que agrega etiquetas tanto para Twitter como para Facebook. Tiene muchas opciones de personalización para elegir las imágenes y los datos específicos que desea para sus publicaciones. La integración con Facebook de Open Graph es excelente, además agrega metadatos adicionales tanto para Twitter como para Google cuando llaman a la puerta. El único inconveniente es que, como extensión profesional, te costará. Sin embargo, es barato; solo 7 euros por la licencia. Puede comprar soporte adicional si lo desea, pero seamos honestos; esto es solo metadatos, es un trabajo glorificado de copiar y pegar para personas que temen el código. No necesitas apoyo.

La tercera opción que tengo para usted es usar TEXTman, un editor de publicaciones de front-end para crear y publicar sus artículos en un sitio de Joomla. No necesita configurar nada para que funcionen las tarjetas de Twitter; solo use TEXTman como su editor y traerá la función automáticamente. La desventaja aquí es que también es una herramienta profesional, y mucho más costosa. Dado que es un editor de texto completo y herramientas asociadas, es una gran licencia con varias extensiones agregadas. Le costará $ 99 por una suscripción con todo, o $ 40 solo por TEXTman y una licencia limitada de soporte y actualización. Muy caro si lo único que quieres son tarjetas de Twitter.

Finalmente, por supuesto, puede usar el método a continuación o descrito en esta publicación para implementarlos manualmente.

5: Sistemas de gestión de contenidos personalizados

Ya he publicado un ejemplo de los metadatos en el código de arriba. Ese es básicamente el mismo código que pega en el encabezado de su sitio, independientemente de la arquitectura que esté usando. Modifique las cosas de acuerdo con las necesidades de su sitio y copie el código en el encabezado de su sitio. No importa específicamente dónde se encuentre, siempre que se encuentre entre las etiquetas <head> y </head> en la parte superior del sitio.

No olvides personalizar las etiquetas. Los principales a los que debe prestar atención son las etiquetas de tarjeta, sitio, creador y dominio. Deben completarse con el tipo de tarjeta que desea, el identificador de Twitter de su sitio y del creador del contenido, y la URL de su dominio. Luego valide la tarjeta una vez que haya implementado los cambios.

Si su tarjeta aún no funciona después de la validación, debe leer la guía de solución de problemas de Twitter. Lo más probable es que haya un error simple en alguna parte que puedas corregir en unos segundos.