2010Vistas 4Comentarios

Widget Twitter personalizado

by on 4 Mayo, 2013
 

Widget Twitter personalizado que podremos usar en Blogger o WordPress, este widget nos permite elegir el color de fondo, el color de los links el color del fondo de los Tweets, el color del texto del Tweet, tambien podremos elegir el ancho y el alto. El widget twitter pertenece a uno de los viejos widget que podiamos generar desde la plataforma de la red social, el mismo ya no esta disponible dentro de la plataforma de Twitter pero el codigo .js siguen funcionando.

{adinserter TEXTO IN POST}

El widget que compartimos no posee scroll a diferencia del que podemos crear actualmente desde nuestra cuenta en twitter llendo a la parte de configuracion.


En cuanto a Blogger el widget lo podemos insertar tanto en las barras laterales o tambien en una entrada Ver Demo, mientras que en WordPress tenemos la limitacion de poder insertarlo unicamente a traves de un widget en el lugar que el Theme nos lo permita, existen algunas maneras de insertar el widget en una entrada de wordpress y de eso hablaremos mas adelante.

Codigo del widget Twitter personalizado

[sociallocker id=”1228″]

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="446363696776753153" data-theme="LIGHT" data-chrome="nofooter noscrollbar" data-border-color="#16A085" data-link-color="#cc0000" data-aria-polite="assertive" width="300" height="300" lang="ES">Tweets by @twitterapi</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>

[/sociallocker]

Configuracion del Widget Twitter

Para que el widget pueda funcionar correctamente, primero debemos crear un widget. Luego seguimos los pasos que se indican debajo.

Usuario

Remplazamos por nuestro ID del widget en

  • data-widget-id=”446363696776753153″

Tamaño

Remplazamos por el ancho que elegimos en

  • width: 600

Remplazamos por el alto que elegimos en

  • height: 300

Fondo

Seleccionamos en data-theme=””

  • light
  • dark

Fondo Transparente

Buscamos la linea data-chrome=”nofooter noscrollbar” y agregamos “transparent” de manera que nos quede…

  • data-chrome=”nofooter noscrollbar transparent”

Color del borde

Remplazamos en…

  • data-border-color=”#16A085″

Color del enlace

Remplazamos en…

  • data-link-color=”#cc0000″

Elimiar Scrollbar

El widget esta cofigurado por defecto para no mostrar la scrollbar, en caso de querer que se muestre debemos buscar la siguiente linea y eliminar “noscrollbar”

  • data-chrome=”nofooter noscrollbar”

Eliminar Footer

El widget esta cofigurado por defecto para no mostrar el footer, en caso de querer que se muestre debemos buscar la siguiente linea y eliminar “nofootter”

  • data-chrome=”nofooter noscrollbar”

Codigo HTML de colores

Para tomar referencias de colores necesitamos el codigo HTML del color, para esto nos vamos al sitio html-color-codes en donde resulta muy facil la eleccion de colores y este nos arroja el codigo HTML.

Ultima version 19/03/2014

Comentarios
 
Leave a reply »

 

Deja un comentario