Blog de sonicbyte
Opinión y tendencias sobre negocios, diseño y avances en Internet
(2da Parte) Integra Twitter a tu blog o sitio web como nunca antes con Anywere
Continuando con el hilo de mi post anterior sobre este tema (recomiendo que lo leas para entender las bases ), hoy mostraremos como utilizar en tu sitio o blog otra alternativa mas de esta nueva forma de integración que nos facilita Twitter.
Tweet Box:
Es una caja idéntica a la que existe en el cliente oficial para redactar tus tweets o posts pero integrada en tu sitio.
Qué necesitas ?
Como explicábamos en el post anterior, primero debes adjuntar tu API KEY entre las etiquetas <head></head> de tu sitio o blog:
<script src="http://platform.twitter.com/anywhere.js?id=TU_NUMERO_DE_API_KEY&amp;v=1 "></script>
Bien, entonces ahora podemos agregar nuestro Tweet Box sin problemas, la forma mas simple es la siguiente. Debajo de la linea de codigo anterior, entre los tags de <head></head> escribimos:
<script>
twttr.anywhere(function(twitter) {
twitter(".tu_box").tweetBox();
});
</script>
Luego creamos un div en donde queramos mostrar el Tweet Box, y le damos un class, que en este caso se llama “.tu_box”
<div class="tu_box"></div>
Listo. Deberías ver algo como esto:
Pero como se ve, el primer problema es que se ve el texto sobre la caja en inglés.
Afortunadamente mediante una simple función se puede utilizar un parámetro para que escriba lo que nosotros queramos:
El parámetro es LABEL y la función quedaría asi:
twttr.anywhere(function(twitter) {
twitter(".tu_box").tweetBox({
label: 'Escribe tus opiniones sobre este articulo:'
});
});
Nuestro tweet box se ve asi:
Bien, vamos mejorando…
Hasta el momento ésta es la lista de parámetros que están disponibles para utilizar con el Tweet box:
- counter (booleano, ‘true’ por defecto – verdadero- )
Este parámetro permite mostrar o ocultar el contador de caracteres.
- height (valor entero, por defecto: ’65′)
Altura de la caja en pixels.
- width ( valor entero, Por defecto: ’515′)
Ancho de la caja en pixels.
- label (cadena, el texto por defecto es: “What’s happening?”)
El texto que se muestra sobre la caja
- defaultContent (cadena, vacío por defecto)
El valor que aparece por defecto escrito dentro del Tweet Box, puede ser una URL, @mención, #hashtag, etc.
- onTweet (función)
Es llamada después de que el botón de envío es presionado. Recibe 2 argumentos: Tweet de texto plano y Tweet HTML
Aquí entonces un ejemplo mas completo utilizando algunos de estos parámetros:
<script>
twttr.anywhere(function(twitter) {
twitter(".tu_box").tweetBox({
label: 'Escribe tus opiniones sobre este articulo:',
defaultContent: '#sonicbyte ',
width: '250px',
height:'40px',
onTweet: function(plain, html){
// Acciones luego de que el tweet fue enviado
}
});
});
</script>
Y el resultado final es:
No ha sido tan dificil, no ?
Ah por cierto, aprovecho este post para mostrarles un tip rápido para agregar un botón de “Sígueme”, sin imágenes ni nada, solo código:
Entre las etiquetas <head></head> agregan esto:
<script>
twttr.anywhere(function(twitter) {
twitter("#tu_div").followButton("sonicbyte");
});
</script>
Y luego crean un div en donde lo quieran mostrar, en este ejemplo sería:
<p>Deberías seguirnos en Twitter:</p>
<div id="tu_div"></div>
El resultado es este:
Nada mal…
Los botones de “Anywere” son inteligentes y el botón muestra si el usuario de esa cuenta ya es seguido o no.
Un saludo y hasta la próxima.
-
http://www.e-lecciones.net/opinion Wolfgang
-
http://www.sonicbyte.com/ Rodrigo
-
http://www.e-lecciones.net/opinion Wolfgang
-
http://nelsondiazblog.blogspot.com/ Nelson Diaz
-
http://www.sonicbyte.com/ Rodrigo
-
http://nelsondiazblog.blogspot.com/ Nelson Díaz
-
http://www.sonicbyte.com/ Rodrigo
-
http://todolopuedeslograr.blogspot.com/ Nelson Díaz
-
http://nelsondiazblog.blogspot.com/ Nelson Diaz
-
http://www.sonicbyte.com/ Rodrigo
-
http://www.sonicbyte.com/ Rodrigo
-
http://nelsondiazblog.blogspot.com/ Nelson Díaz
-
http://www.sonicbyte.com/ Rodrigo
-
http://todolopuedeslograr.blogspot.com/ Nelson Díaz
-
andres
