¿Cómo insertar Twitter en mi web?

Incluir las herramientas de Twitter en tu web puede brindarte muchas ventajas en tu sitio web, por destacar algunas:

  • Te ayuda a conseguir más seguidores
  • Aumenta el tiempo de permanencia en tu web
  • Permite interacción del usuario en tus redes sociales.

Sin embargo, en otro artículo, explicaré qué redes sociales debemos usar para el perfil de nuestro negocio o empresa y cómo sacarle el máximo provecho.

Pero, regresemos al tema principal ¿Cómo usar las herramientas de Twitter?

La documentación esta en la web de desarrolladores twitter (Developers Twitter)

Incluir un solo Tweet

Puede traer el contenido de un tweet, esto incluye texto, imágenes o videos o vistas previas de enlaces interactivos. 

Para insertar el Tweet, debemos:

Ingresar  a la cuenta ,seleccionar el tweet , damos clic en la flecha de opciones y seleccionamos la opción “Insertar tweet”

Podemos ver la vista previa de cómo se vería el tweet, copiamos el código que se nos indica el cuadro de dialogo y pegamos en nuestro sitio web.

El resultado sería el siguiente:

 

Insertar línea de tiempo de Twitter

Permite visualizar toda la línea de tiempo de los tweets de su cuenta, ordenados desde el más nuevo al más antiguo. Incluye en el encabezado el botón de Seguirme y los enlaces a la cuenta en twitter.

Para insertar la línea de tiempo, ingresamos a la aplicación creada porTwitter. Nos carga la siguiente pantalla donde ingresamos la url de la cuenta de twitter que vamos a crear la línea de tiempo.

Seleccionamos la opción Embebed Timeline, es decir,  Insertar línea de tiempo.

La aplicación va a genera una vista previa, sin embargo, debemos personalizarla y para ello damos clic en set customization options

En esta caja modificamos el tamaño, la altura, colores de la caja y enlaces, finalmente damos clic en Update.

Y como ultimo paso, finalmente seleccionamos el código, copiamos y lo pegamos en nuestra web.

El código que genera es el siguiente:

Personaliza el widger de Twitter

La aplicación creada por Twitter, nos permite personalizar un poco más el widget, escribo a continuación algunos puntos que podemos personalizar.

Elemento Descripción
noheader Oculta el encabezado de la línea de tiempo. Sin embargo, se debe tener en cuenta los siguientes requerimientos.
nofooter Oculta el enlace del pie de la línea de tiempo del widget y los tweets.
noborders Remueve todos los borders de la caja del widget incluidos los separadores de los tweets
noscrollbar Recorta y oculta la barra de desplazamiento del widget. Se debe tener cuidado con esta opción por qué puede afectar la accesibilidad del usuario.
transparent Remueve los colores de fondo del widget

Para agregar estas funcionalidades, en el enlace que genera la aplicación de twitter, agregamos el atributo data-chrome con las respectivas funcionalidades que necesitamos separadas por un espacio. Escribo un ejemplo a continuación:

La previsualización es:

Limitar la cantidad de tweets a mostrar

Muestra un numero limitado de tweets entre un rango de 1 a 20. Agreguemos el atributo  data-tweet-limit en nuestro código.  El widget se ajusta al tamaño de los tweets que escogimos. Ejemplo:

La previsualización es:

Conclusión

Este widget tiene muchas cosas interesantes, en artículos posteriores seguiremos hablando acerca de cómo podemos seguir sacando provecho a esta herramienta.

No olvides compartir este artículo y síguenos en Twiter @juksoto@cubemediaco

"Trackback" Enlace desde tu web.

Deja tu comentario

¿Necesitas asesoría en algún proyecto o trabajo?

Muestrános tu trabajo

¿Quieres aportar tus conocimientos a la comunidad?

¡Haz parte de Cubemedia!
Ayudamos a demás profesionales

¿Te ha servido algun artículo?
Ayudános a que llegue a más personas.
Compartir en