lunes, 14 de junio de 2010

Colocar un botón para Tweetmeme

Consultar para mas informacion El Escaparate de Rosa




Tweetmeme es una especie de agregador de noticias de Twitter.

Este servicio rastrea y optiene la información de los tweets que comparten los usuarios de Twitter entre si (RT), en su web podemos ver una portada principal donde aparecen los tweets más destacados.



En Blogger podemos añadir un botón que permita a nuestros usuarios enviar la información a Tweetmeme de las entradas de nuestro blog, cuantos más usuarios envien la entrada, más posibilidad tendrá esta de posicionarse en Tweetmeme.





Vamos a ver como colocar el botón al lado derecho del título de nuestras entradas.




[1] Desde "Edición HTML" en nuestro panel y marcando la opción de "Expandir las plantillas de artilugios" localizamos el código que está en negrita y añadimos el que he resaltado en color rojo:



<b:if cond='data:post.title'>

<div id="tweetmeme" style="float: right;"> <script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>


<h3 class='post-title entry-title'>


[2] Usamos vista previa y tendremos que ver nuestro botón a la derecha del título de la entrada:



Botón grande Tweetmeme


[3] Guardamos cambios.



Si en lugar de ese botón, queremos usar el otro modelo disponible de botón (más pequeño), el código (que colocaríamos en el mismo lugar) sería este:




<div id="tweetmeme" style="float: right;">

<script type="text/javascript">

tweetmeme_url = &#39;<data:post.url/>&#39;;tweetmeme_style = 'compact';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

</div>
Botón pequeño Tweetmeme





Podemos colocarlo también al final de las entradas, justo antes del comienzo de los comentarios, de esta manera solo será visible cuando entramos a una entrada concreta.

Para hacer esto tendríamos que incluir el código así:



<b:includable id='comments' var='post'>

<script type="text/javascript"> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


<div class='comments' id='comments'>



domingo, 13 de junio de 2010

Coloca el botón Me gusta en Blogger (el contador)

Con los recientes cambios que ha hecho Facebook sobre la invasión del llamado Me gusta ha salido la posibilidad de incluir este botoncito en nuestro sitio web o blog para que la gente vote si le gusta el post o quieres que compartan un enlace determinado. En el siguiente tutorial les voy a enseñar a insertar este código para poder tener un toque más social en su blog.

El botón es más bien un iframe al que se le pasan por parámetros las características del elemento. El código es más o menos como sigue:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fblogandweb.com%2F&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>


Los parámetros son:




  • href – Con la URL a compartir.


  • layout – Estilo del botón. Valores: standard o button_count


  • show_faces – Muestra o no el avatar de quienes del gusta la anotación. Valores: true o false.


  • width – Ancho del iframe.


  • action – Texto del botón. Valores like o recommend.


  • font – Fuente a utilizar.


  • colorscheme – Esquema de colores. Valores: light, dark o evil.



Estos valores se pueden cambiar directo en el código o usar el formulario de personalización de Facebook, el resultado es el mismo.



Agregar botón "me gusta" a Blogger



1. Ir al código de la plantilla y expandir artilugios.



Home → Diseño → Edición de HTML → Expandir plantillas de artilugios



2. Elegir el lugar a agregar el código. El lugar tradicional para hacerlo en el post-footer, es decir, al pie de cada entrada, entonces, se busca el código:



<div class='post-footer-line post-footer-line-1'>


Y abajo se agrega el siguiente código:



<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:100px; height:px"></iframe>

</b:if>


Mas info en Vida MMR

Como añadir el botón “I like” de facebook en tu página web

Uno de los últimos cambios de Facebook es permitir a los creadores web insertar un botón de “i like” en su página web.


Vamos a ver cómo hacerlo y qué implica.


Insertar el botón es muy sencillo. Vamos a explciarlo paso a paso:


Primero hay que ir a esta URL de facebook y rellenar el campo “URL to Like” (es decir, la URL de tu sitio web).


Este simple formulario genera un código HTML


<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.top-rankin.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>



que insertaremos en nuestra página web. Por ejemplo, en este blog de WordPress está insertado como widget tipo “texto” en la barra lateral. Si os fijais el height del iframe está en blanco. Es recomendable darle un valor, en mi caso, de 24px.


¿Qué genera esto?


Una vez insertado, veremos el botón de “I Like” en la web.



Via: Añadir el botón “I like” de facebook en tu página web