(2da Parte) Integra Twitter a tu blog o sitio web como nunca antes con Anywere
por Roroland
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.
Tags: Diseño, empresas, javascript, productividad, redes sociales, twitter
View Comments to “(2da Parte) Integra Twitter a tu blog o sitio web como nunca antes con Anywere”
|Leave a Reply
Hola, use tus codigos como referencia y al parecer suele mostrarlo bien sin problemas, pero al darle al boton de “Tweet” obviamente abre una nueva ventana donde debo autentificarme para que termine de enviar el comentario. Pero una vez autenficado me sale este mensaje de error: “Sorry, something went wrong. Small_robot The provided callback url (el url en cuestion) does not appear to be a valid url.” Y el API KEY esta correcto.
Saludos amigo, he intentado colocar esta interesante aplicación pero no se con exactitud como hacerlo, y me refiero específicamente al “div”
<div class=”tu_box”></div>
¿Donde debe colocarse esto? Como controlo en que lugar de la Sidebar puede estar el elemento?
Muchas Gracias por tu apoyo amigo.
Hola Wolfgang, perdón la demora en contestarte, si no has resuelto aún tu problema, si lo deseas copia el codigo que estas utilizando aquí mismo y lo reviso. Saludos
Hola Nelson, si te refieres a WordPress, debes ir al administrador de WordPress e ingresar en “Apariencia” y luego haz click en “Editor”. A la derecha verás todas los archivos que componen tu WordPress, hay uno que se llama “Barra Lateral (sidebar.php)”, haz click en él y el editor te mostrará su contenido.
Lo que incluyas ahí aparecerá en tu sidebar, puedes utilizar el código div de ejemplo para probar, pero recuerda que el código que dispara la acción de Twitter debe ser agregado entre tus tags <head></head> en la cabecera de Wordpress. Accedes a ella nuevamente desde “Apariencia / Editor”, y busca el archivo “Cabecera (header.php)”.
Espero te sirva de ayuda, cualquier duda comenta aquí. Saludos
Saludos mi buen amigo, agradezco mucho la gentileza de tu respuesta, y entiendo que la instrucción que das es para Wordpress, pero los blog's que administro están en Blogger. Seguí las instrucciones que das en el artículo anterior a este y pude instalar con éxito la función de HoverdCards. Si existe la posibilidad de implementar esta caja en Blogger y conoces la manera te agradezco me comentes amigo. Un abrazo venezolano y mis mejores deseos para usted.
Hola Nelson, por lo que tengo entendido, debes usar una herramienta como esta para convertir el código y hacerlo compatible con Blogger (sirve para cualquier tipo de bloque de código para Blogger, no solo para esto, como Adwords de Google por ejemplo):
http://blogcrowds.com/resources/parse_html.php
Ingresa el código en ese formulario y presiona el botón “Parse”, y me cuentas si te funciona.
Saludos
Saludos mi buen amigo Rodrigo, le agradezco mucho mi estimado sus respuestas, un cordial abrazo y buenos deseos desde Venezuela. Te comento que realice el intento pero no tuve mucho éxito, aunque para ser honestos no soy muy diestro en el manejo de códigos de plantilla, estaré atento a que la manera indicada se libere para blogger, y agradeceré por supuesto si la encuentra usted y la comparte por acá. ¡Éxitos!!!