Cómo añadir Twitter Cards a su sitio web (Guía paso a paso)
Inicio Blog Cómo añadir Twitter Cards a su sitio web (Guía paso a paso)

Cómo añadir Twitter Cards a su sitio web (Guía paso a paso)

añade twitter cards a tu sitio web

Si está trabajando para hacer crecer su negocio, blog o presencia en línea, probablemente esté utilizando las redes sociales, y Twitter probablemente forme parte de ellas.

Como profesional del marketing digital, sé que dar a conocer tus contenidos en plataformas como Twitter es un objetivo constante.

Cuando compartes un enlace a tu sitio web en Twitter, quieres que destaque y capte la atención de la gente. Ahí es donde entran en juego las Twitter Cards. Transforman los enlaces habituales de tus tweets en vistas previas enriquecidas, a menudo con imágenes, títulos y descripciones.

Si quieres que los enlaces de tu sitio web en Twitter sean más eficaces y visualmente atractivos, estás en el lugar adecuado.

En esta guía paso a paso, te mostraré exactamente cómo añadir Twitter Cards a tu sitio web. Compartiré el sencillo proceso que he utilizado para configurar Twitter Cards en WordPress, para que puedas hacer que cada enlace de sitio web que compartas en Twitter trabaje más para ti.

En este artículo

Por qué utilizar Twitter Cards en su sitio web

Si quieres llegar a mucha gente nueva para tu marca, Twitter puede ser un lugar fantástico.

Después de todo, según nuestra investigación sobre estadísticas de marketing en redes sociales, Twitter tiene más de 330 millones de usuarios, por lo que es una plataforma de redes sociales masiva con toneladas de clientes potenciales.

Pero empezar con Twitter puede ser difícil, sobre todo si tu marca no tiene ya muchos seguidores en las redes sociales.

Una forma sencilla y eficaz de hacerlo es añadir tarjetas de Twitter a su sitio web. Así, los visitantes de tu sitio web podrán consultar fácilmente tus tweets y seguirte.

Aquí tienes algunas formas más de empezar a utilizar las Twitter Cards en tu sitio web:

  • Mediante la inserción de tweets relevantes, puede captar la atención de la gente y mantenerla interesada en su sitio web.
  • Puede publicar tweets con las últimas noticias y anuncios sobre su marca e informar fácilmente a sus visitantes.
  • Mostrar tu cronología de Twitter también muestra a la gente que estás publicando activamente en Twitter, lo que significa que es probable que se pongan en contacto contigo allí. Esto también te ayuda a conseguir más retweets.
  • Si quieres conseguir más ventas, puedes utilizar las Twitter cards para incrustar reseñas de tus productos y convencer a más gente para que compre
ejemplo de feed de reseñas en twitter

Y eso es sólo el principio. Las tarjetas de Twitter pueden ser una forma fantástica de iniciarse en el marketing en redes sociales, atraer a tus seguidores y hacer crecer tu negocio.

Veamos la forma más sencilla de empezar a mostrar contenido de Twitter en tu sitio web.

Cómo añadir Twitter Cards a su sitio web (de forma sencilla)

Si desea mostrar tarjetas de Twitter a los visitantes de su sitio web, la mejor manera es utilizar un plugin de WordPress.

De esta forma, puedes incrustar todo el contenido de Twitter que quieras, sin necesidad de codificación.

Y el mejor plugin para mostrar tweets en su sitio web es Twitter Feed Pro.

twitter feed pro página de inicio

Usando este plugin, puedes añadir Twitter cards a tu sitio web con facilidad y empezar a atraer a tus visitantes en un abrir y cerrar de ojos.

Twitter Feed Pro es el mejor plugin de Twitter para WordPress. Está diseñado para que sea fácil de mostrar su contenido de Twitter atractivo y mantener a los visitantes de su sitio web interesado en su presencia en los medios sociales, trabajando mano a mano con sus esfuerzos para mejorar su estrategia de Twitter, como el uso de Twitter Cards.

Basta con unos pocos clics para crear, personalizar e incrustar un feed de tarjetas de Twitter en tu sitio web.

Al igual que configurar Twitter Cards es sencillo, empezar a utilizar Twitter Feed Pro es rápido y fácil. No es necesaria ninguna codificación complicada.

Es más, tienes montones de opciones en cuanto al tipo de contenido de Twitter que quieres mostrar.

Puede mostrar los tweets de las líneas de tiempo de los usuarios, incrustar los hashtags de Twitter que elija, mostrar los resultados de las búsquedas en Twitter y mucho más.

¿Y lo mejor? Tus tarjetas de Twitter se adaptarán automáticamente al diseño de tu sitio web utilizando el plugin. De este modo, el contenido de Twitter se adaptará perfectamente a tu marca.

Una cosa que realmente aprecio de Twitter Feed Pro es su personalizador visual de feeds.

Te permite adaptar fácilmente el aspecto de tu feed de Twitter y el contenido que muestra, dándote el control sobre la integración de Twitter en tu sitio web, al igual que controlas el aspecto de tus enlaces con Twitter Cards.

En unos pocos clics, puedes configurar el diseño, la combinación de colores, el diseño de los botones, el estilo de la cabecera y mucho más.

Además, este plugin cuenta con un equipo de expertos en WordPress que siempre están dispuestos a ayudarte.

Como puede ver, Twitter Feed Pro es realmente el mejor plugin para ayudarle a incrustar contenido de Twitter en su sitio web.

De hecho, algunas de las marcas más importantes del mundo utilizan Smash Balloon para integrar contenidos de redes sociales en sus sitios web.

¿Listo para añadir Twitter Cards a tu sitio web? Obtenga su copia de Twitter Feed Pro aquí.

Con esto, vamos a ver cómo se puede utilizar el plugin para añadir tarjetas de Twitter a su sitio web.

Paso 1: Descargar el plugin Twitter Feed Pro

Para empezar, hazte con una copia del plugin Twitter Feed Pro y descárgatelo en tu ordenador.

Después de eso, sólo tiene que instalar y activar el plugin en su sitio web.

Si quieres un poco de ayuda con eso, echa un vistazo a este tutorial sobre cómo instalar un plugin de WordPress paso a paso.

Una vez que haya instalado y activado el plugin, puede continuar con el paso 2 a continuación.

Paso 2: Crear un nuevo feed de Twitter

Ahora que tu plugin está listo, puedes utilizarlo para crear un nuevo feed de Twitter en tu sitio web.

Usando ese feed, puedes mostrar toneladas de tarjetas de Twitter a la vez.

Desde tu panel de control, navega hasta el menú Twitter Feed " All Feeds para empezar.

Ahora cree un nuevo feed haciendo clic en el botón Añadir nuevo .

añadir nuevo feed personalizado de twitter

Después, puedes elegir el tipo de contenido de Twitter que quieres mostrar en tus tarjetas. Estas son las opciones que puedes elegir:

opciones de tipo de feed twitter

Seleccione la opción que prefiera de esta lista y pulse el botón Siguiente .

Para este ejemplo, utilizaremos un tipo de feed de línea de tiempo de usuario.

seleccione el tipo de feed twitterr

Como puedes ver, puedes crear un feed de Twitter en unos pocos clics con este plugin,

En el paso 3, puede conectar este feed a Twitter para que pueda mostrar tarjetas de Twitter en su sitio web.

Paso 3: Conecte su cuenta de Twitter

Para incrustar tarjetas de Twitter, puedes conectar este nuevo feed a tu cuenta de Twitter.

Para ello, haz clic en el botón Conectar para empezar.

conectar la cuenta de twitter a wordpress

El plugin abrirá Twitter para que puedas terminar de conectar tu cuenta. Para ello, puedes simplemente dar acceso de solo lectura al plugin.

De esta forma, tu cuenta de Twitter estará completamente a salvo, ya que el plugin sólo puede ver la información de Twitter y no podrá realizar ningún cambio.

Para conectar tu cuenta de Twitter, haz clic en Autorizar aplicación aquí.

autorizar twitter acceso solo lectura.jpg

Ahora que ya has conectado tu cuenta de Twitter, es hora de añadir la fuente.

La fuente puede ser el perfil de Twitter, el hashtag, la lista, el término de búsqueda y el contenido personalizado de Twitter que desee mostrar en su sitio web.

Aquí, hemos añadido el perfil de Twitter @starbucks como fuente. Esto mostrará las tarjetas de Twitter del perfil de ese usuario.

Tras introducir la fuente en la ventana emergente, pulse el botón Siguiente .

embed twitter feed user timeline

Una vez hecho esto, puedes pasar al paso 4 y personalizar el aspecto de tus tarjetas de Twitter en tu sitio web.

Paso 4: Personaliza tu feed de Twitter

Para empezar, puedes optar por importar un diseño pre-construido para tus tarjetas de Twitter. Aquí tienes las 6 opciones entre las que puedes elegir:

  • Por defecto
  • Tarjetas de albañilería
  • Carrusel simple
  • Tarjetas sencillas
  • Carrusel de escaparates
  • Último Tweet
  • Widget

Después de seleccionar la plantilla, haga clic en Siguiente para continuar.

elija una plantilla de alimentación

Después de hacer eso, Twitter Feed Pro te enviará al editor de feed en vivo. Desde aquí, puedes cambiar el diseño, los colores, el diseño de los botones, el lightbox, el diseño de la cabecera y mucho más para tus Twitter cards.

Hacia la derecha, puedes encontrar una vista previa en vivo que muestra cómo se verán las tarjetas de Twitter para tu sitio web.

live feed editor twitter

Para empezar con la personalización, puedes cambiar el diseño de las tarjetas de Twitter en tu sitio web.

Para ello, haga clic en la opción Feed Layout.

feed layout option twitter

Después, puedes elegir entre 3 diseños para tus tarjetas de Twitter: Lista, Mampostería y Carrusel.

Veámoslos a continuación:

elige un diseño de feed twitter

Con el diseño de lista, puedes mostrar tus tarjetas de Twitter en una sola columna, igual que el diseño del sitio web oficial de Twitter.

De este modo, cada tarjeta de Twitter es claramente visible en su sitio web.

lista twitter feed layout

A continuación, tienes el diseño de mampostería que puede mostrar tarjetas de Twitter en varias columnas.

Es una forma estupenda de mostrar montones de tarjetas de Twitter a la vez.

ejemplo mamposteria twitter feed wordpress

También puedes elegir el diseño de carrusel e incrustar un pase de diapositivas de tarjetas de Twitter en tu sitio web.

Este diseño puede ayudarle a hacer que su sitio web sea aún más interactivo.

ejemplo de feed horizontal de twitter

Después de seleccionar el diseño de tu feed de Twitter, haz clic en el botón Guardar de la parte superior.

A continuación, puedes seguir configurando el diseño de tu feed de Twitter haciendo clic en el botón Personalizar de la parte superior.

volver a opciones de personalización twitter

Ahora, puedes utilizar el editor de feeds en directo para cambiar los colores de tu feed de Twitter.

Haga clic en la opción Combinación de colores de la izquierda para empezar.

opción de combinación de colores twitter feed pro

Para cambiar los colores, sólo tienes que elegir entre 4 esquemas de color diferentes aquí:

  • Heredar del tema: Copiar los colores de su tema de WordPress
  • Claro: Un fondo claro con un color de fuente oscuro
  • Oscuro: fondo oscuro sobre un color de fuente claro
  • Personalizados: Elige manualmente todos los colores

Una vez seleccionada la combinación de colores, haz clic en el botón Guardar.

elegir combinación de colores twitter

A continuación, puede utilizar el resto de opciones de personalización y cambiar la cabecera, el diseño de los botones, el tamaño de la fuente y mucho más con sólo unos clics.

Por último, haz clic en el botón Guardar para confirmar el nuevo diseño de tu feed de Twitter.

A continuación, puede ir al paso final y empezar a incrustar sus tarjetas de Twitter en su sitio web.

Paso 5: Insertar tus Twitter Cards en tu sitio web

Ahora que ha personalizado el aspecto de las tarjetas de Twitter, es el momento de integrarlas en su sitio web de WordPress.

Puede hacerlo de 2 maneras con este plugin:

  • Insertar tarjetas de Twitter en una página de WordPress
  • Insertar tarjetas de Twitter en la barra lateral o el pie de página de WordPress

Veamos ambos métodos a continuación.

Insertar Twitter Cards en una página de WordPress

Con el editor de feeds en directo, puedes incrustar fácilmente tus tarjetas de Twitter en unos pocos clics, sin necesidad de codificación.

Para empezar, haz clic en el botón Incrustar de la parte superior.

incrustar tu feed de twitter

Una vez hecho esto, verás una ventana emergente en la que podrás elegir la ubicación de tus tarjetas de Twitter.

Haga clic en Añadir a una página aquí para continuar.

añadir a una página

A continuación, verás una lista de todas las páginas de WordPress de tu sitio web. Ahora puede seleccionar la página en la que desea incrustar las tarjetas de Twitter.

Una vez hecho esto, haga clic en Añadir para continuar.

añadir el feed de twitter a una nueva página

Twitter Feed Pro abrirá ahora esa página en el editor de WordPress. Aquí, puedes añadir un nuevo bloque de contenido haciendo clic en el icono más (+).

añadir nuevo bloque bloque de contenido

Escribe "twitter feed" en la barra de búsqueda de la parte superior para buscar aquí el bloque de contenido adecuado.

A continuación, haz clic en el bloque Twitter Feed de las opciones que aparecen a continuación.

incrustar twitter feed en su sitio wordpress

Por último, haz clic en el botón Actualizar y tus tarjetas de Twitter estarán activas en tu sitio web.

Para ver cómo queda, sólo tiene que abrir su sitio web y comprobarlo usted mismo.

ejemplo de feed de twitter en el sitio web

Ahora vamos a ver otra manera de añadir tarjetas de Twitter para su sitio web utilizando Twitter Feed Pro.

Insertar feeds de Twitter en la barra lateral o el pie de página de WordPress

Utilizando este método, puede incrustar tarjetas de Twitter en su barra lateral o pie de página de WordPress como un widget de Twitter.

También puedes utilizar el editor de vídeo en directo.

En primer lugar, vaya al menú Twitter Feed " All Feeds desde el panel de control de WordPress.

Verás una lista de todos los feeds de Twitter de tu sitio web. Ahora haz clic en el feed de Twitter que quieras incrustar.

abrir todos los feeds página twitter feed

Al hacerlo, se abrirá de nuevo el editor de transmisiones en directo. Solo tienes que hacer clic en el botón Incrustar para empezar a incrustar tus tarjetas de Twitter.

incrustar botón de feed de twitter

En la ventana emergente, haga clic en Añadir a un widget para continuar.

Esto te enviará a la página de widgets de WordPress para que puedas añadir tu widget de Twitter.

añadir feed de twitter al widget

Desde aquí, puedes elegir entre la barra lateral y el pie de página para tus tarjetas de Twitter.

¿Quieres mostrar tarjetas de Twitter en la barra lateral de tu sitio web?

Basta con hacer clic en el panel Sidebar .

abrir el panel de la barra lateral

También puede optar por mostrar las tarjetas de Twitter en el pie de página.

Para ello, haga clic en el panel Pie de página.

abrir panel de pie de página

Ahora puedes añadir un nuevo widget haciendo clic en el icono más (+) de la parte inferior.

A continuación, selecciona el widget Twitter Feed entre las opciones.

añade un widget de twitter a wordpress

Por último, puede hacer clic en Actualizar para guardar los cambios.

Así de fácil, habrás añadido las Twitter cards a las áreas preparadas para widgets de tu sitio web. Puedes echar un vistazo abriendo tu sitio web.

incrustar widget de twitter en el sitio web

En definitiva, Twitter Feed Pro es el mejor plugin si desea añadir contenido de Twitter a su sitio web con facilidad.

Ahora vamos a ver cómo se puede incrustar tarjetas de Twitter sin necesidad de utilizar un plugin.

Añadir manualmente Twitter Cards para su sitio web

También puede agregar tarjetas de Twitter para su sitio web utilizando la forma manual sin necesidad de utilizar ningún plugin en absoluto.

Como resultado, puede llevar mucho más tiempo si eliges este método. Después de todo, tendrás que generar manualmente el código de inserción de Twitter y añadirlo a tu sitio web.

Además, no dispondrás de opciones de personalización, por lo que es posible que tus tarjetas de Twitter no se ajusten a tu imagen de marca.

Si quieres cambiar el aspecto de las tarjetas de Twitter, tendrás que modificar el código tú mismo o gastarte dinero en un desarrollador.

Además, no tendrás un equipo de soporte como con Twitter Feed Pro. Si al añadir el código incrustado a tu sitio se produce algún error, no podrás pedir ayuda a un equipo de soporte.

Con eso, vamos a empezar y ver cómo se puede agregar manualmente tarjetas de Twitter para su sitio.

Paso 1: Visitar Twitter Publicar

twitter publicar página de inicio

Para empezar, abre publish.twitter.com en tu navegador para ir al sitio web de Twitter Publish.

Aquí, puede utilizar el generador de tarjetas de Twitter para crear un código HTML incrustado para el contenido de Twitter.

Paso 2: Elija su tipo de incrustación

Si se desplaza hacia abajo, encontrará 3 opciones de incrustación diferentes:

  • Twitter integrado: Añade una única tarjeta de Twitter a tu sitio web
  • Línea de tiempo incrustada: Mostrar tarjetas de Twitter de una línea de tiempo específica
  • Botones de Twitter: Insertar botones de Twitter
opciones para publicar en twitter

Para nuestro ejemplo, utilizaremos la opción de línea de tiempo incrustada.

Paso 3: Pegue su URL de Twitter

Después de eso, verás una ventana emergente del generador de tarjetas de Twitter. Allí, sólo tiene que introducir la URL de la línea de tiempo de Twitter que desea incrustar.

añadir url de twitter timeline

Después de pegar la URL de la línea de tiempo de Twitter en la ventana emergente, haz clic en el botón Vista previa para continuar.

Paso 4: Copiar el código HTML

Por último, puedes ver el código HTML de tus Twitter cards. También puedes ver una vista previa de cómo se verán las Twitter cards en tu sitio web.

Para continuar, haga clic en el botón Copiar código .

copia el código para insertar el feed de twitter

Por último, puede utilizar este código para incrustar las tarjetas de Twitter en el siguiente paso.

Paso 5: Añadir el código HTML a WordPress

Ahora puede pegar el código HTML incrustado en su página o entrada de WordPress.

Para utilizar una página de WordPress, haga clic en el menú Páginas " Añadir nueva desde su panel de control.

añadir nueva página wordpress

O puedes abrir el menú Entradas " Añadir nueva desde tu panel de control para utilizar la entrada de WordPress.

Para este ejemplo, utilizaremos una página de WordPress.

añadir nuevo post wordpress

Ahora añade un bloque de contenido en la página o entrada haciendo clic en el icono más (+).

añadir nuevo bloque wordpress

Por último, busca la barra de búsqueda en la parte superior y escribe "custom html" en ella.

A continuación, seleccione el bloque HTML personalizado de las opciones siguientes.

añadir widget html personalizado al sitio wordpress

Ahora puedes pegar el código de inserción de Twitter copiado en el bloque HTML.

Al hacerlo, las tarjetas de Twitter se incrustarán en su sitio web.

incrustar widget de twitter manualmente.jpg

Por último, haz clic en Publicar para guardar los cambios y las tarjetas de Twitter estarán en línea.

Sólo tienes que abrir tu sitio web para ver el aspecto de las tarjetas de Twitter.

ejemplo de incrustación manual del widget de twitter

Pero si quieres incrustar una sola tarjeta de Twitter, es un poco más fácil.

En primer lugar, copia la URL de Twitter y vuelve a tu sitio web de WordPress. Después, simplemente pega tu URL en tu post o página.

incrustar twitter card en su sitio web

Como antes, haz clic en Publicar para confirmar los cambios y tu nueva tarjeta de Twitter estará en línea.

¡Y ahí lo tienes!

Como puedes ver, es super fácil añadir tarjetas de Twitter para tu sitio web utilizando un plugin de WordPress. Con Twitter Feed Pro, puedes empezar a mostrar contenido de Twitter con unos pocos clics, incluso si eres un novato en WordPress.

Así podrá aumentar su número de seguidores en las redes sociales, atraer a los visitantes de su sitio web y aumentar sus ventas.

Si quieres empezar a sacar el máximo partido de Twitter para tu marca, consulta nuestra lista de las mejores formas de ganar dinero en Twitter.

¿Tienes un sitio web Elementor? Aquí te explicamos cómo puedes incrustar un feed de Twitter en tu sitio Elementor.

Si este tutorial te ha ayudado, síguenos en Facebook y Twitter para obtener más consejos útiles sobre marketing en redes sociales.

avatar de autor
Sajjan Sharma Redactor jefe
Sajjan lleva más de 10 años escribiendo sobre WordPress, marketing en redes sociales y negocios online. Sus intereses profesionales se extienden al marketing de influencers, la curación de contenidos y las estrategias de marketing digital.

Añadir un comentario

Nos alegra que haya decidido dejar un comentario. Por favor, tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestra política de privacidad, y todos los enlaces son nofollow. NO utilice palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.