En nuesro blog de WordPress nos puede interesar instalar un widget de Twitter para que nuestros usuarios puedan seguirnos, ver el timeline o enviarnos algún tuit. Con el paso de la API de Twitter a la versión 1.1 muchos plugins de quedaron obsoletos y no se podía acceder al timeline.
Twitter lo ha colocado mucho más fácil porque son ellos mismos los que nos proporcionan el widget con gran variedad de modificaciones el cual lo podemos personificar en cuanto a diseño, tamaño, timeline de tus tuits o de tus listas y más cosas.
Para empezar accedemos a nuestra cuenta de Twitter luego a configuración de cuenta y en el panel izquierdo encontraremos una opción de Widgets. Pinchamos en está opción y podremos crear un nuevo widget o editar uno ya creado. Vamos a crear un nuevo widget:
Al crear un nuevo widget tenemos estás opciones:
Podemos ver un ejemplo del widget de Twitter. Podemos ver las diferentes fuentes para las cronologías mostrándonos de primero la cronología de usuario, favoritos, listas donde seleccionaremos la lista que deseemos, la cronología de Buscar donde estableceremos la cuenta de búsqueda o hashtag que nos interese y luego la cronología personalizada.
Nos muestra para cada cado una vista previa del widget con el timeline para que nos hagamos una idea.
Para la configuración del widget debemos definir:
- El nombre de usuario del que estaremos creando el widget (@srintelligenius).
- En opciones pinchamos si deseamos excluir respuestas y expandir fotos en el widget.
- Definimos la altura del widget que por defecto nos lo define de 600 píxeles.
- Definimos la plantilla que vamos a aplicar al widget siendo clara u oscura dependiendo del color de fondo del tema de la plantilla de WordPress.
- Definimos el color para los enlaces de los tuits que por defecto son azules.
- Hay otra opción que nos permite deshabilitar la opción de poder personalizar el widget creado.
- Por último pinchar en el botón crear widget.
Nos genera un código del widget como este:
<a href=”https://twitter.comnombre_cuenta” data-widget-id=”id-widget_twitter”>Tweets por @nombre_cuenta</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>
Con este código nos vamos ya a nuestro blog de WordPress a la parte del backend (administración de nuestro blog) y en apariencia/widgets. Buscamos el widget de Texto o HTML personalizado y lo agragamos a sección de widgets de nuestra plantilla actual de WordPress y una vez allí podremos pegar el código que hemos copiado de Twitter, podemos ponerle un título como Twitter. Le damos a guardar y listo.
Refrescamos nuestro blog y debe aparecer nuestro Widget de Twitter con nuestro timeline.
Podemos configurar nuestro widget de Twitter con opciones personalizadas, estas son algunas de ellas:
Dimensiones: Podemos establecer las dimensiones del widget que necesitemos añadiendo al código el ancho y el largo en píxeles. Por ejemplo para un acho de 300 píxeles y una altura de 500 píxeles quedaría así:
<a class=”twitter-timeline” width=”300″ height=”500″ href=”https://twitter.com/twitterapi” data-widget-id=”YOUR-WIDGET-ID-HERE”>Tweets by @twitterapi</a>
El ancho mínimo para el timeline es de 180 píxeles y el máximo es de 520 píxeles. La altura mínima es 200 píxeles.
La configuración principal del widget se guarda en los servidores de Twitter y nosotros podemos configurar opciones específicas en el lado del cliente.
Otras opciones configurables:
- Tema: Agregas el atributo al código del widget
data-theme="dark". - Color del Enlace: Agregas al código
data-link-color="#cc0000". Algunos iconos del widget pueden aparecer con este color. - Ancho: (Width) Se configura usando el estandar de HTML donde la unidad es en píxeles.
- Alto: (Height) Se configura usando el estandar de HTML donde la unidad es en píxeles.
- Control de la forma del widget: Se configura que componentes del widget se mostrarán y su transparencia con el atributo
data-chrome="nofooter transparent"y puede tmabién modificar con las siguientes opciones:
- Sin encabezado:
noheader. Esconde el encabezado del timeline. - Sin pie de widget:
nofooter. Esconde el pie del timeline y la caja para tuitear, si la incluye. - Sin bordes:
noborders. Quita todos los borders del timeline (entre los tuits, alrededor del widget). - Sin barras de desplazamiento:
noscrollbar. Esconde las barras de desplazamiento, si están visibles. - Transparente: Quita el color del fondo del widget.
- Color del borde: Cambie el color del borde usado en el widget. el formato de color es hexadecimal como por ejemplo:
data-border-color="#cc0000"
- Idioma del widget: El lenguaje es detectado desde la página usando el atributo del lenguaje HTML
lang.
- Límite de tuits: Se puede delimitar el número de tuits a presentar en el widget, use el atributo
data-tweet-limit="5"donde este valor va desde 1 a 20 tuits. - Interactividad en tuits: Utilice el atributo
data-related="benward,endform"para permitir desde el mismo widget la interacción estando logueado en Twitter pudiendo responder un tuit, hacer retuit y marcarlo como favorito.
Espero que con está información de como crear widgets de Twitter para tu blog puedas ahora mismo colocarlo.
Tu blog debe enriquecerse con todas las herramientas de Redes Sociales de interacción con tu comunidad y que no te olvides que debes proporcionar valor a través de tu blog y verás como tu comunidad te recompensará.
CREAR WIDGET TWITTER WORDPRESS
Si te ha gustado este artículo puede compartirlo en Twitter y Facebook en los enlaces de abajo.
Escrito por Sr Intelligenius
Luis Alfonso Gómez es el autor de este blog y su marca personal Sr Intelligenius ayuda a empresas y emprendedores a conseguir sus objetivos de negocio empleando la tecnología, especializado en herramientas Informáticas y Online.
Emprendedor incansable creador de ecosistemas emprendedores.
