Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
 
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

18
ENE.
2015
 
 
 

Cómo crear e implementar el widget de Twitter en tu web

Publicado por Elisa Bueno García | domingo, 18 de enero de 2015 a las 17:55 h.
5629  
 

El widget de Twitter nos va a permite incluir en nuestra web la típica caja que mostrará nuestros últimos Tweets. A través de este plugin, los usuarios de tu web o blog pueden hacerse seguidores de tu twitter e incluso pueden twittear directamente desde tu web sin necesidad de irse a la red social. Por eso se considera una de las mejores formas de promocionar nuestra cuenta de Twitter

Éste es el aspecto que suele tener:

Cómo consigo el widget de Twitter

Una vez logado en tu cuenta de Twitter haz clic sobre el icono de la imagen de tu perfil y luego sobre la opción "configuración":

En la columna izquierda nos salen una seríe de opciones. Nosotros vamos a picar en la  opción "Widgets". Y después en “Crear nuevo”

Ahora únicamente debemos personalizar varios datos de nuestro widget. Los más importantes son:

  • El nombre de usuario: Por defecto sale el de la cuenta que estemos usando pero si necesitas el widget para un cliente debes modificarlo y poner el de la cuenta de Twitter correspondiente.
  • Altura del widgets: Con un mínimo de 250 px. Por el ancho no debemos preocuparnos pues se adapta al espacio disponible de la web donde lo ubiquemos.
  • Color de la plantilla claro/oscuro: Por defecto viene claro, puedes cambiarlo y ver el efecto en la vista previa.
  • Color del enlace: El color predeterminado del texto de los enlaces de nuestros Tweets.

Una vez personalizados todas las opciones,  presionamos el botón "Crear widget" y copiamos el código que nos genera en nuestra web.

<a class="twitter-timeline" href="https://twitter.com/ElixaBueno" data-widget-id="556851731313999873">Tweets por el @ElixaBueno.</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/ˆhttp:/.test(d.location)?"http":"https";if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Personalizar el widget de Twitter

Tenemos más opciones  para personalizar nuestro widget de Twitter, pero todas ellas debemos implementarlas directamente en el código generadol. Todas las opciones se deben establecerse como atributos dentro de la etiqueta <a>.

  • data-theme: permite establecer el tema del widget, "dark" o "light".
  • data-link-color: permite establecer el color de los link.
  • width: permite establecer el ancho del widget.
  • height: permite establecer el alto del widget.
  • border-color: permite cambiar el color de los bordes que separan los Tweets.
  • data-tweet-limit: permite establecer el número máximo de Tweets que se muestran en el widget.
  • data-chrome: este atributo nos permitepersonalizar la forma del widgets:
    • noborders: elimina los bordes separatorios entre los Tweets.
    • noscrollbar: oculta la barra de scroll.
    • nofooter: evita que se muestre una área para enviar Tweets.
    • noheader: oculta la cabecera del widget.
    • transparent: elimina el color de fondo del widget.

 

Haz pruebas hasta que el plugin quede a tu gusto, como ves es muy sencillo.

Y aquí os dejo el widget que he generado para hacer este tutorial de mi cuenta de Twitter.  

 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post