Sígueme

R L E F G I

Buscar

Cargando

Lo último del blog

Hosting

Xitrus está alojado en:

Insertar widget de Twitter

Una de las mejores formas de promocionar nuestra web son las redes sociales, por ejemplo Twitter, que es un servicio de micro-blogging bastante útil para hacer llegar a mucha gente las novedades de nuestra web.
En este artículo os explicaré como añadir el widget de Twitter en vuestra web, para que aparezcan los últimos tweets (como en la barra de la derecha de esta página, la gris que esta torcida y pegada con celo).

Ejemplo del widget de Xitrus.es con el fondo transparente.

Conseguir el código

Twitter tiene unas herramientas de generación de widgets personalizados para búsquedas, usuarios y demás, ya que nos deja elegir el tipo de widget, simplemente lo tenemos que personalizar.
Y con el código que nos de lo único que tenemos que hacer es pegarlo en el sitio que nos haga falta.
Podéis escoger vuestro widget en la sección de desarrolladores de twitter.

Como personalizarlo

Para poner un ejemplo seguiré los pasos para generar un widget como el de esta web, que muestre los últimos tweets de @PedroXitrus.
El procedimiento sería el siguiente:

El primer paso es elegir que tipo de widget quieres, que en este caso sería de perfil, y posteriormente nos pide el nombre del perfil (suele tener por defecto el del usuario).
Tras saber que contenido mostrará el widget podemos empezar a personalizarlo en las distintas pestañas de la herramienta de Twitter.
En la segunda pestaña podemos elegir opciones de como se comportará el widget (nos deja elegir si es necesario confirmar que quieres ver los nuevos tweets o se muestren automáticamente, si quieres una barra de desplazamientos y cuantos tweets quieres que se vean) y en mi caso elegiré que quiero que se vean 2 widgets, que no haya barra de desplazamiento y que se actualicen solos.
En apariencia podemos elegir los colores del widget, y una opción que no nos permite hacer es poner el fondo transparente (pero más abajo explicaré como).
Y por último nos deja elegir el alto y el ancho, y en mi caso prefiero un ancho automático, que se ajuste al sitio en el que lo incruste.
Para finalizar pulsamos el botón de Finalizar y nos dará el código necesario.

Instalar el código

Twitter nos da dos scripts, uno externo (el primero) que es recomendable ponerlo en el <head> y otro interno que es el que nos genera el widget y es el que tenemos que pegar donde queramos usarlo.


						
							<!-- Este script debemos de ponerle en el <head> -->
							<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
							<script>
						
						
						
						
							new TWTR.Widget({
							  version: 2,
							  type: 'profile',
							  rpp: 2,
							  interval: 30000,
							  width: 'auto',
							  height: ,
							  theme: {
							    shell: {
							      background: '#000000', /* Cambiar por "transparent" si queremos el fondo transparente */
							      color: '#ffffff'
							    },
							    tweets: {
							      background: '#000000', /* Cambiar por "transparent" si queremos el fondo transparente */
							      color: '#ffffff',
							      links: '#ffffff'
							    }
							  },
							  features: {
							    scrollbar: false,
							    loop: false,
							    live: false,
							    behavior: 'all'
							  }
							}).render().setUser('PedroXitrus').start();
						
						
							</script>

Comentarios