10/03/2011

Botn "Me gusta" de Facebook en cada entrada del blog

En este tutorial, vamos a situar un botn de "Me gusta" de Facebook en cada entrada del Blog. Este botn permitir a tus lectores, publicar un enlace en su muro hasta la entrada donde est situado el botn. Adems, te permitir conocer el nmero de votos por entrada, permitiendo valorar la popularidad de la misma. Si usas una de las plantillas que vienen por defecto en Blogger es posible que al pie de tus entradas aparezca la barra botones para compartir

Desactivar la barra de botones para compartir de Blogger

Recuerda que el objetivo que persigue este tutorial es ir sustituyendo estos botones (poco visuales) por los botones oficiales tanto de Facebook (este tutorial) como botn de Twitter y con el botn de Google+, tal y como puedes ver en este blog. Mi recomendacin por lo tanto esocultarla. Ocultar la barra estndar de botones para compartir de Blogger Entra en la Pestaa Diseo Haz clic en "Editar" en la seccin "Entradas del Blog" Desmarca la casilla "Mostrar botones para compartir"

Colocar el botn de "Me gusta" en cada entrada del blog Paso 1. Acceder al editor HTML y haz copia de seguridad antes de realizar cambios o Ve a la "Pestaa Plantilla" y ve al pie de esta pgina. o Haz una copia de seguridad de la plantilla pulsando el enlace "Realizar copia de seguridad" o o texto: Haz clic en el enlace "Editar cdigo HTML de la plantilla" Paso 2. Busca el siguiente cdigo dentro de tu plantilla: Usa el buscador del navegador pulsando Ctrl F o Ctrl B y busca este

Para colocar el botn al Pie de la entrada busca: post-footer-line post-footer-line-1 Te recomiendo que copies este texto y lo peges en el buscador.

 Para colocar el botn en la Cabecera de la entrada busca: post-header-line Te recomiendo que copies este texto y lo peges en el buscador. encontrar o El cdigo del botn ir justo debajo de la lnea que acabas de

Paso 3. Copia el cdigo del botn "Me Gusta", tienes dos opciones: Opcin 1. Botn de "Me Gusta"

<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&amp;layout=button_count&amp;show_faces=true&amp;width=100&amp;action=li ke&amp;font=arial&amp;colorscheme=light"' scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:21px"></iframe> o Opcin 2. Botn "Me Gusta + Enviar"

<script src='http://connect.facebook.net/es_ES/all.js#xfbml=1'/><fb:like expr:href='data:post.canonicalUrl' font='arial' layout='button_count' send='true' show_faces='false'/>

Paso 4 Copia el fragmento y pgalo justo debajo de la linea encontrada en elPaso 2. Paso 5. Guarda la plantilla y visualiza el Blog

Puedes variar el aspecto del botn gracias al parmetro layout. Los posibles valores son:standard, button_count o box_count. Ms informacin en la pgina de desarrolladores de Facebook Nota: Como dijimos al comienzo nuestro objetivo es sustituir la barra estndar de botones para compartir de Blogger por unos botones ms visuales, es por ello que te recomiendo colocar tambin el botn de "Twitter" y el botn de "Google+". Aqu debajo ya puedes ver funcionado el botn de "Me Gusta + Enviar". Si te ha gustado esta entrada haz clic sobre el botn para recomendarla a tus amigos . Gracias. Si te ha gustado esta publicacin y no quieres perderte ninguna otra, sgueme a travs deFacebook, Twitter, suscripcin por email, Google Friend , RSS ahora tambin en Google +.