¿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.

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:

  1. Ingresar  a la cuenta,
  2. Seleccionar el tweet
  3. Clic en la flecha de opciones
  4. Seleccionar la opción “Insertar tweet”

La siguiente pantalla, muestra la vista previa del tweet.

Copiamos el código html y lo pegamos en nuestro sitio web.

El resultado sería el siguiente:

Insertar línea de tiempo de Twitter

Visualice en su web, 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

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:

<a class="twitter-timeline" 
data-lang="es" data-width="420" data-height="500"
data-dnt="true"
data-link-color="#404099"
href="https://twitter.com/juksoto?ref_src=twsrc%5Etfw">Tweets by juksoto</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

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.

ElementoDescripción
noheaderOculta el encabezado de la línea de tiempo. Sin embargo, se debe tener en cuenta los siguientes requerimientos.
nofooterOculta el enlace del pie de la línea de tiempo del widget y los tweets.
nobordersRemueve todos los borders de la caja del widget incluidos los separadores de los tweets
noscrollbarRecorta y oculta la barra de desplazamiento del widget. Se debe tener cuidado con esta opción por qué puede afectar la accesibilidad del usuario.
transparentRemueve 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:

<a class="twitter-timeline" 
data-lang="es" 
data-width="420" 
data-height="500" 
data-theme="light" 
data-link-color="#E95F28" 
data-chrome="nofooter noborders noheader"
href="https://twitter.com/juksoto">Tweets by cubemediaco</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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:

<a class="twitter-timeline" 
data-lang="es" 
data-width="420" 
data-height="500" 
data-theme="light" 
data-link-color="#E95F28" 
data-tweet-limit="3"
href="https://twitter.com/juksoto">Tweets by cubemediaco</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

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.

Por favor espera...