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:
- Ingresar a la cuenta,
- Seleccionar el tweet
- Clic en la flecha de opciones
- 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
- Ingresamos a la aplicación creada por Twitter
- Escribimos la url de la cuenta
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.
| 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:
<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:
Tweets by juksotoLimitar 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:
Tweets by juksotoConclusión
Este widget tiene muchas cosas interesantes, en artículos posteriores seguiremos hablando acerca de cómo podemos seguir sacando provecho a esta herramienta.