El widget de Monitter (JQuery) ¿Qué te parece la manera de mostrar los Tweets en Monitter? ¿lo quieres en tu web o blog?
Como lo prometido es deuda, voy a explicar cómo instalar el widget de Monitter para mostrar cualquier Tweet en tu web o blog.
Si eres un manitas, tan sólo tienes que ir a la página del widget (aquí), descargarlo y seguir las instrucciones para instalarlo.
Si no lo eres sigue leyendo y juntos le daremos un repaso al widget...
Como ya comenté en la entrada anterior, se trata de una aplicación basada en JQuery, por lo que primero que debemos tener instalado es el enlace para cargar la librería utilizando la Api de Google por ejemplo, si no disponemos de alojamiento propio. A continuación el script de Monitter propiamente dicho, bien sea alojando el archivo en nuestro servidor, o directamente insertado en la plantilla (es muy lijero). Por supuesto, todo esto antes de </head>:
Antes de colocar el widget en nuestro blog o web, vamos a aplicarle un poco de estilo:
El resultado sería el siguiente:
Aunque a mi me gusta más con las esquinas redondeadas (sólo Firefox), éste en gris:
Y se vería:
Para mostrar el widget donde queramos, tan sólo tenemos que colocar una etiqueta con la clase "monitter" de la siguiente manera:
Donde title define el término a buscar (usuario, término, frase...), y lang el idioma de la búsqueda.
Si queremos mostrar varias búsquedas tan sólo tendremos que diferenciar la id de cada etiqueta y por supuestop, el title que define la búsqueda:
Puedes colocarlo como un elemento HTML/javascript en tu sidebar, en tu footer.... tan sólo debes controlar la altura en la clase .monitter para seleccionar cuántos Tweets mostrar.
Si eres un manitas, tan sólo tienes que ir a la página del widget (aquí), descargarlo y seguir las instrucciones para instalarlo.
Si no lo eres sigue leyendo y juntos le daremos un repaso al widget...
Como ya comenté en la entrada anterior, se trata de una aplicación basada en JQuery, por lo que primero que debemos tener instalado es el enlace para cargar la librería utilizando la Api de Google por ejemplo, si no disponemos de alojamiento propio. A continuación el script de Monitter propiamente dicho, bien sea alojando el archivo en nuestro servidor, o directamente insertado en la plantilla (es muy lijero). Por supuesto, todo esto antes de </head>:
Antes de colocar el widget en nuestro blog o web, vamos a aplicarle un poco de estilo:
.tweet {
color:#333333;
display: block;
background: #CCFFFF;
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
}
.tweet img {
float: left;
margin-right: 1em;
border: 2px solid #009999;
background: #444;
}
.tweet p.text {
margin: 0;
padding: 0;
padding-left: 70px;
}
.monitter {
float: left;
width: 99%;
height: 200px;
margin: 5px;
border: 4px solid #009999;
background: #66FFFF;
overflow:hidden;
}
El resultado sería el siguiente:
Aunque a mi me gusta más con las esquinas redondeadas (sólo Firefox), éste en gris:
.tweet {
color:#333333;
display: block;
background: #CCCCCC;
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
.tweet img {
float: left;
margin-right: 1em;
border: 2px solid #666666;
background: #444;
}
.tweet p.text {
margin: 0;
padding: 0;
padding-left: 70px;
}
.monitter {
float: left;
width: 99%;
height: 200px;
margin: 5px;
border: 4px solid #666666;
background: #999999;
overflow:hidden;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;;
-moz-border-radius-bottomright:10px;;
-webkit-border-bottom-right-radius:10px;
}
Y se vería:
Para mostrar el widget donde queramos, tan sólo tenemos que colocar una etiqueta con la clase "monitter" de la siguiente manera:
<div class="monitter" id="tweets" title="twittboy" lang="es"></div>
Donde title define el término a buscar (usuario, término, frase...), y lang el idioma de la búsqueda.
Si queremos mostrar varias búsquedas tan sólo tendremos que diferenciar la id de cada etiqueta y por supuestop, el title que define la búsqueda:
<div class="monitter" id="tweets" title="twitter" lang="es"></div>
<div class="monitter" id="tweets2" title="en mi blog" lang="es"></div>
<div class="monitter" id="tweets3" title="web" lang="es"></div>
Puedes colocarlo como un elemento HTML/javascript en tu sidebar, en tu footer.... tan sólo debes controlar la altura en la clase .monitter para seleccionar cuántos Tweets mostrar.
