¿Buscas una forma sencilla de mostrar contenido X (Twitter) en tu sitio web?
Añadir un widget de Twitter es una de las formas más efectivas de ofrecer a tus visitantes contenido fresco y atractivo de Twitter. Con tantos métodos para añadir widgets a WordPress, es difícil saber por dónde empezar.
En este artículo, vamos a mostrarte cómo añadir un widget de Twitter en WordPress utilizando 2 métodos diferentes:
- Añadir widgets de Twitter a WordPress con un plugin
- Insertar widgets de Twitter en WordPress con Twitter Publish
Antes de entrar en materia, aclaremos a qué nos referimos cuando hablamos de "widget de Twitter".
¿Qué es un widget X (Twitter) de WordPress?
Un "widget" es simplemente un bloque de contenido que puede añadir a la barra lateral de su sitio, pies de página y otras áreas.
¿Alguna vez has visitado un blog y has visto un formulario de registro o botones sociales en la barra lateral? Ambos son widgets. Cada widget añade una característica o función a tu sitio sin necesidad de escribir ningún código.
Así pues, un widget de Twitter es un bloque de contenido de Twitter que puedes añadir a las zonas de tu barra lateral.
Con un widget de Twitter, puedes mostrar contenido de Twitter en tu sitio web y atraer a tus visitantes. Para añadir manualmente un widget de Twitter, tendrás que lidiar con códigos de incrustación que pueden resultar confusos.
Para hacerlo más fácil, puede utilizar los plugins de WordPress, que eliminan la necesidad de complicarse con el código.
¿Debería utilizar un plugin X (Twitter) para WordPress?
Si no te sientes cómodo trabajando con códigos incrustados y quieres una forma sencilla de personalizar tu widget, utilizar un plugin de Twitter es una decisión inteligente.
De esta forma, puedes mostrar fácilmente toneladas de contenido de Twitter en tu sitio web sin tocar una sola línea de código ni contratar a un diseñador.
Con un plugin puedes incluso modificar el diseño de tu widget de Twitter. Por ejemplo, puedes hacer clic en algunos ajustes para adaptar el widget al tema y la marca de tu sitio.
También te ayudan a mostrar ejemplos específicos de widgets de Twitter, como feeds de hashtags, búsquedas personalizadas y cronologías de usuarios.
Como puedes ver, un plugin de Twitter para WordPress hará que sea mucho más fácil crear widgets de Twitter con el aspecto que desees.
Métodos para añadir un widget X (Twitter) en WordPress
Ahora es el momento de ver los diferentes métodos para añadir un widget de Twitter en WordPress.
Hay dos formas de añadir un widget de Twitter a tu sitio de WordPress:
- Añade tu widget de Twitter mediante un plugin de WordPress
- Añade tu widget de Twitter manualmente
Veamos ambos métodos a continuación:
Cómo añadir widgets de Twitter a WordPress con un plugin
Para añadir un widget de Twitter a las entradas y páginas de WordPress, tendrás que descargar el plugin Twitter Feed Pro de Smash Balloon.
Es el plugin de Twitter para WordPress mejor valorado y te permite integrar a la perfección el contenido de Twitter en tu sitio web.
Para ayudarle a crear hermosos feeds de Twitter, incluso tiene un editor de feeds en vivo para ayudarle a personalizar todo con facilidad. Puedes configurar la cabecera, el diseño del feed, la combinación de colores y mucho más.
Además, el plugin es ligero, por lo que puedes incrustar tantos tweets como quieras, y tu sitio seguirá cargando tan rápido como siempre. Con un sitio más rápido, puedes mejorar el SEO y posicionarte mejor en los resultados de los motores de búsqueda.
Dispondrá de feeds limpios, personalizables y con capacidad de respuesta que aumentarán la participación en su sitio y añadirán una valiosa prueba social.
Como resultado, Twitter Feed Pro tiene una valoración de 4,9/5 estrellas y más de 150.000 usuarios activos de todo el mundo.
Haga clic aquí para empezar a utilizar Twitter Feed Pro.
Ahora, sigamos adelante y veamos cómo puedes añadir widgets de Twitter a tu sitio usando este plugin.
Paso 1: Instalar el plugin Twitter Feed Pro
En primer lugar, obtener su copia de Twitter Feed Pro aquí e instalarlo en su sitio web.
¿No sabes cómo? Sólo tienes que seguir estas instrucciones para instalar un plugin de WordPress en tu sitio web.
Paso 2: Crear un nuevo widget de Twitter
Es hora de crear tu widget de Twitter utilizando el plugin.
Desde el panel de control de WordPress, vaya al menú Twitter Feed " Todas las fuentes y haga clic en el botón Añadir nuevo.
Ahora, Twitter Feed Pro le pedirá que seleccione el tipo de widget de Twitter que desea en su sitio web.
Puede elegir entre estas opciones:
- Cronología del usuario: Elige un perfil específico de Twitter y muestra sus tweets
- Hashtag: Feeds de contenidos filtrados a hashtags públicos específicos.
- Búsqueda: Los resultados de una búsqueda avanzada en Twitter se muestran en un widget de Twitter
- Listas: Selecciona una lista de Twitter e incrusta los tuits disponibles.
También puede seleccionar varias opciones aquí para combinar diferentes tipos de feeds de Twitter en un único widget.
Para continuar, selecciona tu tipo de feed de Twitter y haz clic en Siguiente.
Para este tutorial, vamos a mostrar un widget de Twitter hashtag.
Paso 3: Conecte su cuenta de Twitter
Twitter Feed Pro hace que sea muy fácil conectar tu cuenta de Twitter a WordPress para que tu widget se actualice automáticamente.
Para empezar, haz clic en el botón Conectar de la ventana emergente.
Una vez hecho esto, el plugin abrirá Twitter, donde te pedirá acceso de sólo lectura a tu cuenta.
Usando este acceso, Twitter Feed Pro sólo verá tu información y no podrá hacer ningún cambio.
Esto significa que es totalmente seguro utilizar este plugin.
Sólo tienes que hacer clic aquí en el botón Autorizar aplicación y podrás confirmar el acceso de sólo lectura.
Una vez hecho esto, Twitter Feed Pro le enviará de nuevo a su sitio web.
Ahora puedes seleccionar qué mostrar en tu widget de Twitter añadiendo el hashtag, la cronología del usuario, la lista de Twitter y el término de búsqueda.
Para esta guía, añadiremos nuestro hashtag al widget.
Una vez que hayas añadido tu fuente, haz clic en Siguiente.
Paso 4: Personaliza tu nuevo widget de Twitter
Para que la personalización sea superfácil, sólo tienes que seleccionar una plantilla para tu nuevo widget de Twitter.
Hay 7 plantillas de alimentación entre las que puedes elegir, y cada una tiene un diseño único:
- Por defecto
- Albañilería
- Carrusel simple
- Tarjetas sencillas
- Carrusel de escaparates
- Últimos Tweets
- Widget
Una vez que elijas una opción que se adapte a tu widget de Twitter, haz clic en Siguiente para continuar.
Ahora, puedes utilizar el editor de feeds en directo para personalizar el diseño de tu nuevo widget de feeds de Twitter.
Hacia la izquierda, puedes encontrar las opciones de personalización para configurar el diseño de tu feed, los colores, el diseño de la cabecera, el estilo de la caja de tweets, las opciones de lightbox y mucho más.
Para ayudarte a seguir tus cambios, a la derecha tienes una vista previa en directo de tu feed de Twitter.
Empecemos con la personalización y establezcamos el diseño de tu widget de Twitter.
Para ello, basta con seleccionar a la izquierda la opción Feed Layout .
Con Twitter Feed Pro, puedes elegir entre 3 opciones de diseño de feed:
- Lista
- Albañilería
- y Carrusel
En primer lugar, tienes la opción Lista que muestra tus tweets en una sola columna. Así, tus tuits tendrán mucho más espacio.
¿Quieres mostrar toneladas de tweets a la vez en tu widget de Twitter?
Puedes optar por el diseño Masonry , que muestra los tweets en varias columnas.
También puedes elegir el diseño Carrusel y mostrar tus tweets en un bonito carrusel de diapositivas.
De este modo, tus visitantes podrán interactuar con tu widget de Twitter para consultar más contenidos.
Una vez que hayas seleccionado el diseño de fuente que se adapte a tu widget de Twitter, haz clic en el botón Guardar .
Desde aquí, puede volver a las opciones principales haciendo clic en el pequeño botón Personalizar de la parte superior.
¿Quieres elegir los colores de tu nuevo widget de Twitter?
A continuación, haga clic en la opción Combinación de colores de la izquierda.
Para seleccionar los colores de tu widget, sólo tienes que elegir una combinación de colores.
Con Twitter Feed Pro, hay 4 opciones para su combinación de colores:
- Heredar del tema: Copia automáticamente los colores de tu tema
- Luminoso: Elige un aspecto luminoso para tu widget de Twitter
- Oscuro: utilice colores oscuros y fuentes claras
- Personalizado: Seleccionar todos los colores manualmente
Seleccione la combinación de colores que prefiera y vuelva a pulsar el botón Guardar para confirmar los cambios.
Con el editor de feeds en directo, ahora puedes personalizar el estilo del recuadro del tuit, la cabecera de Twitter, el botón de cargar más, el tamaño del feed y mucho más.
Cuando estés satisfecho con el aspecto de tu widget de Twitter, recuerda volver a hacer clic en Guardar .
Paso 5: Añadir el widget de Twitter a WordPress
Es superfácil incrustar el widget de Twitter utilizando el editor de noticias en directo. Además, hay dos formas de incrustar el widget:
- Añadir el widget de Twitter a una página de WordPress
- Añadir el widget de Twitter a la barra lateral o al pie de página
A continuación analizaremos ambos métodos.
En el editor de retransmisiones en directo, haz clic en el botón Incrustar de la parte superior para empezar.
Se abrirá una ventana emergente que te preguntará dónde quieres incrustar tu widget de Twitter.
Basta con hacer clic en la opción Añadir a una página para incrustarlo en una página de WordPress.
En la ventana emergente, seleccione la página en la que desea mostrar el widget.
A continuación, haga clic en en el botón Añadir .
Ahora puedes ver esa página abierta en el editor de bloques de WordPress, donde puedes incrustar el widget de Twitter.
Para ello, en primer lugar, haga clic en el icono más (+) del editor para añadir un bloque de contenido.
Utilizando la barra de búsqueda, busque "twitter feed" y, a continuación, haga clic en el widget Twitter Feed que aparece a continuación.
Con esto, habrás añadido el widget de Twitter a tu página.
Por último, haz clic en el botón Publicar o Actualizar y tu widget de Twitter estará disponible para todo el mundo.
De hecho, puede abrir su sitio web para comprobar su aspecto.
¿Quieres añadir tu widget a la barra lateral o al pie de página?
Puedes hacerlo fácilmente desde el editor de imágenes en directo.
En el panel de control del administrador, vaya al menú Twitter Feed " All Feeds y haga clic en el widget de Twitter Feed.
Esto te mostrará el widget de Twitter en el editor de live feed.
Para empezar a incrustar tu widget, haz clic en el botón Incrustar de la esquina superior derecha.
En la ventana emergente, esta vez puede hacer clic en el botón Añadir a un widget .
Al hacerlo, accederá a la página de widgets de su sitio web WordPress.
En esta página, puedes elegir dónde quieres incrustar el widget de Twitter.
Para incrustarlo en tu barra lateral, sólo tienes que hacer clic en el panel Sidebar .
¿Desea utilizar el pie de página? Entonces haga clic en un panel de pie de página aquí.
Para añadir un nuevo widget de WordPress, haga clic en el icono más (+) en la parte inferior del panel.
A continuación, selecciona el widget Twitter Feed entre todas las opciones.
Por último, puedes hacer clic en el botón Actualizar y tu widget de Twitter aparecerá en la barra lateral de tu sitio web.
Y si en cambio eliges el pie de página, entonces podrás encontrar el widget de Twitter en la parte inferior de tu sitio web.
Con eso, vamos a echar un vistazo a la antigua forma de incrustar widgets de Twitter en su sitio web.
Cómo añadir tus widgets de Twitter manualmente
Nuestro último método utiliza la herramienta X Publish para añadir tu widget en WordPress. El inconveniente de utilizar este método es que tienes menos control sobre el aspecto del widget en tu sitio.
Para añadir un feed de Twitter utilizando este método, dirígete al sitio web de X Publish y elige el tipo de contenido que deseas incrustar.
Utilizaremos la opción Perfil.
A continuación, pegue la URL del perfil que desea visualizar y haga clic en el icono Siguiente .
Si ahora te desplazas hacia abajo, podrás elegir la forma de mostrar este widget de Twitter.
Puede elegir un diseño de botón si lo desea. Por ahora, vamos a ir con la opción de línea de tiempo incrustado .
El siguiente paso es copiar el código que puede insertar en su sitio de WordPress.
Haga clic en el botón Copiar código de la derecha para continuar.
A continuación, puede seguir adelante y crear una nueva entrada o página en WordPress.
Para incrustar el código, añada un nuevo bloque de contenido haciendo clic en el icono más (+) del editor.
Ahora busque "custom html" en la barra de búsqueda de la parte superior y, a continuación, haga clic en el bloque Custom HTML para continuar.
A continuación, pegue el código de inserción directamente en el bloque.
Ahora, cuando previsualices tu nueva página, tu widget de Twitter tendrá un aspecto similar al del ejemplo siguiente:
Es posible incrustar tu feed en un widget en tu barra lateral utilizando este método.
En primer lugar, vaya a Apariencia " Widgets para empezar a gestionar los widgets de su sitio web.
Una vez hecho esto, haz clic en el panel Sidebar para incrustar allí tu widget.
¿Quieres añadir tu widget de Twitter al pie de página? Entonces haz clic en Pie de página .
Por último, haz clic en el icono más (+) para añadir un widget y, a continuación, haz clic en el widget HTML personalizado.
A continuación, pegue el código de inserción en el widget como antes.
Por último, haz clic en el botón Actualizar de la parte superior.
Cuando navegue a la portada de su sitio web, su feed tendrá un aspecto similar al del ejemplo siguiente:
Y ahí lo tienen.
Ahora ya sabes cómo añadir un widget de Twitter en WordPress. Lo más importante que debes recordar es que con el tercer método tendrás menos control sobre el diseño, la disposición y el contenido de tu feed de Twitter.
Con el plugin Twitter Feed Pro, puede hacer todo eso en unos pocos clics - sin necesidad de HTML, Javascript, CSS, o cualquier tipo de codificación.
¿Listo para incrustar widgets de Twitter? Consigue tu copia de Twitter Feed Pro hoy mismo.
Para conocer más formas de promocionar su marca en las plataformas de medios sociales, siga esta guía sobre cómo mejorar su marketing en los medios sociales.
Si te ha gustado este artículo, no dudes en seguirnos en Twitter y Facebook para ver más tutoriales sobre marketing en redes sociales.
