miércoles 1 de junio de 2011

Poner el botón "Me gusta" de Facebook en Blogger

Existen algunas maneras ya descritas en diferentes blogs sobre como poner el famoso botón "me gusta" de Facebook en los blogs que son publicados en la plataforma Blogger de Google.
Algunas de las entradas que encontrarás publicadas en otros sitios de la red están desactualizadas, otras siendo más actuales te proponen modos más o menos complejos de poner dicho botoncito en tu blog.

El problema está en que algunas de estas instrucciones te piden que modifiques tu plantilla en su código para incrustarlo ahí. Para algunos blogueros esta tarea puede resultar intimidante y hacer que desistan de hacerlo.

Bien, te voy a proponer un modo muy simple para que puedas colocar el botón Facebook en tu blog blogger.

Vayamos por pasos:

a) Conseguir el código del botón "me gusta"

Para esto sólo tienes que ir a la página de Facebook siguiendo este enlace: obtener un botón "me gusta" de Facebook


Ahi, o simplemente presionas en "get code" del Step 1 y de la ventana que aparezca copias el código que se muestra (para ser usado preferentemente en un gadget HTML/javascript en cualquier lugar de tu blog -mejor en alguna columna lateral o en el footer, ya que mostrará las caras de los usuarios), o para usar el botón DENTRO DE TUS ENTRADAS modificas algunos parámetros como el Ancho (width) y deselecciona (desmarca) "Show Faces" (Mostrar Caras) para evitar que aparezcan las caras de todos los que gustaron de tu entrada o blog, así lo haces más compacto y no ocupa excesivo e innecesario espacio al poner el botón dentro de tus entradas, luego pulsas "get code" y copias el código que salga. Guarda y pega en algún archivo de texto provisionalmente en tu computadora para usarlo en los siguientes pasos.

b) Pegar el código obtenido en tu blog

Ya tienes el código del botón "Me gusta" de Facebook que obtuviste en el paso anterior, ahora corresponde pegarlo en tu blog para que empiece a mostrarse.
Te dije que no modificaremos el código de tu plantilla blogger, sin embargo, si lo quieres intentar, una búsqueda en Google te permitirá encontrar las instrucciones para hacerlo, no es difícil, pero mi intención es que no te compliques con ello por si algo saliera mal.
Vamos pues, a poner el código en tu blog.

1.- En su propio espacio dentro de tu blog:

Una forma en extremo sencilla es que simplemente lo pegues dentro de un gadget html/javascript y que ubiques este en el lugar que prefieras dentro de tu blog, es decir: en Diseño ->Agregar gadget -> HTML/javascript. Pegas en su interior el código y luego guardar. A continuación desplazas y acomodas éste al lugar dentro de tu blog que gustes .

2.- Dentro de las entradas de tu blog:

Para tus nuevas entradas:

En Configuración -> Formato; encontrarás en la parte inferior una caja de texto que se llama "Plantilla de entrada", pega ahí el código que obtuviste para el botón "me gusta", y luego Guardar esos cambios. Desde este momento, y hasta que borres este código de este mismo lugar, siempre que escribas una nueva entrada, por defecto se insertará el botón Facebook en tus entradas. Verás que este código se inserta automáticamente cada vez que escribas nuevas entradas. Si prefieres que no aparezca en esa entrada en particular, simplemente deberás pulsar al estar Creando tu entrada, la pestaña "Edición de HTML", ahí podrás ver el código que se inserta, simplemente bórralo y ya.
Normalmente el botón se mostrará al final de tu entrada, si prefieres que aparezca al principio, comienza a escribir tu entrada bajo la pestaña "Edición de HTML" y escribe después del código del botón Facebook.
Si quieres insertar el botón Facebook en otra parte de tu entrada, bastará que una vez escrita, cambies la posición del código. Incluso podrás poner múltiples botones Facebook dentro de una entrada (quizás al principio y al final de ella), colocando dos o más veces el código del botón Facebook.

Para tus entradas antiguas:

Si no es un número muy grande de entradas las que tienes, simplemente edítalas, pegándoles el código de tu botón "me gusta". Si tienes muchas entradas, en ese caso te recomiendo que uses el método que introduce el código del botón en la plantilla de tu blog blogspot de Blogger.

En ambos casos, es decir ya sea en entradas nuevas o en entradas antiguas, debes pegar el código usando la pestaña "Edición de HTML", y no te preocupes si cuando vuelvas a la pestaña "Redactar" no se ve el código o el botón Facebook, ten la seguridad que cuando lo publiques estará ahí donde lo pusiste.

Para poner el botón Facebook en español

Por último, y para hacer que aparezca en español el botón, dentro del código del botón que obtuviste en la página de Facebook, reemplaza, si es el caso, el texto "en_US" por "es_ES" de lo contrario el botón se verá y mostrará leyendas en inglés.

Esperemos que en un futuro cercano exista dentro de Blogger la facultad de insertar este tipo de botones de una manera más simple, mientras tanto esta solución será válida y lo seguirá siendo incluso después.

81 comentarios:

  1. gracias, te todos los blogs que busque a qui encontre lo que nesecitaba ;D

    ResponderSuprimir
  2. Gracias por la información, muy útil

    ResponderSuprimir
  3. Sabes, busque mucho en la red, como hacerlo, lo ensaye asi como dices y no se porque no funciono, repeti los pasos como lo indicas, y zaz funciono, completamente agradecido por publicar esta nota con la que me has ayudado.
    HJC.

    ResponderSuprimir
  4. gracias tu informacion me fue muy util, y muy bien explicado

    ResponderSuprimir
  5. me dice que tengo que ser desarrollador para obtener el código

    ResponderSuprimir
  6. No es así, estás seguro de la página a la que estas entrando. El código es abierto para cualquier persona.

    ResponderSuprimir
  7. como hago para saber a quienes les gusta ? porque me aparece a 19 personas pero no se cuales son, o si es real

    ResponderSuprimir
  8. Me sirvio! Gracias por tu post (:

    ResponderSuprimir
  9. A mi tambien me dice que tengo que ser desarrollador para ver el codigo... que estoy haciendo mal?

    ResponderSuprimir
  10. Si siguen las instrucciones exactamente, no les pedirá nada... acabo de comprobarlo...nuevamente.

    ResponderSuprimir
  11. Si que pide ser desarrollador. Hay que verificar la cuenta dando un movil o tarjeta de crédito

    http://www.facebook.com/help/?faq=17580

    ResponderSuprimir
  12. me dice que tengo que ser desarrollador...
    porque sucede esto?

    ResponderSuprimir
  13. Presionen (o copien en su navegador) este enlace:
    http://developers.facebook.com/docs/reference/plugins/like/

    y en "Step 1 - Get Like Button Code"

    hagan clic en el botón "Get Code"

    se abrirá una ventana donde está el código, simplemente cópienlo.

    No pide ningún requisito ¿¡!?

    ResponderSuprimir
  14. a mi me sigue poniendo que necesito ser desarrollador

    ResponderSuprimir
  15. antes a mí también me salía que necesitaba ser desarrollador....extrañamente ahora me resultó (no estaba conectado a facebook).... si quieren les envío el código

    acá esta la prueba
    http://soyinnovador.blogspot.com/2011/06/school-kill-creativity.html

    ResponderSuprimir
  16. Tenéis que salir de Facebook para poder copiar el código.

    ResponderSuprimir
  17. Muchas gracias!! Miré muuuchos tutoriales, pero ninguno tan claro como el tuyo. Excelente!
    Pueden verlo aqui:
    http://talilieventos.blogspot.com/

    ResponderSuprimir
  18. cuando ponfgo el boton no pasa de cero le doy click aparece 1 pero inmediatamente se vuelve a poner en cero

    ResponderSuprimir
  19. Yo no consigo obtener el código. Cuando lo hago me sale un mensaje que dice lo siguiente: "Sólo los desarrolladores verificados pueden ser agregados como desarrolladores registrados de esta solicitud. Lea http://www.facebook.com/help/?faq=17580 para más detalles"

    ResponderSuprimir
  20. Este comentario ha sido eliminado por el autor.

    ResponderSuprimir
  21. Hola, acabo de visitar tu blog y veo que se puede aprender mucho de tí , por lo que a partir de ahora te sigo, ya que llevo unos meses con el mío y voy aprendiendo poco a poco.
    Saludos.

    ResponderSuprimir
  22. SOLUCIONADO!!!! Yo también como mucho de ustedes busque y busque la solución a ese problema del "pedido de desarrollador" y en este blog encontre la solucion, como ya lo dijeron antes tienes que fijarte que tu cuenta de Facebook ESTE CERRADA, ya lo comprobe y espero que los que tenian ese problema lo solucionen ya!

    ResponderSuprimir
  23. Muchas gracias por tu ayuda¡¡¡¡Por fin he conseguido poner el botón de me gusta en mi Blog gracias a tu blog.
    Un saludo desde Valencia¡¡¡

    ResponderSuprimir
  24. La solución es salir de Facebook, luego ya funciona! Así que muchas gracias al autor y a José Luís =)

    ResponderSuprimir
  25. Como hago para saber a quienes les gusta ? porque me aparece a 19 personas pero no se cuales son, o si es real?????
    ayuda!!!!!!

    ResponderSuprimir
  26. hola igualmente quiero saber como hacerle para ver a que personas les gusta mi blog, ya que solo veo que a 10 personas les gusta mas no veo sus rostros, y ala hora de obtener el codigo del boton de "me gusta" no desmarque la opcion de mostar rostros, un saludo por favor espero tu respuesta. PD: gracias por el aporte.

    ResponderSuprimir
  27. no sirve para nada dice que solamente desarrolladores pueden hacerlo en esa pagina
    Lo siento pero que!?

    ResponderSuprimir
  28. NECESITO AYUDAAA !!!! hice lo que ud me dijo, pero al momento de pedir el codigo me aparece éste mensaje

    Sólo los desarrolladores verificados se puede agregar como desarrolladores de lista de esta aplicación.
    Sólo los desarrolladores verificados se puede agregar como desarrolladores de lista de esta solicitud. Lea http://www.facebook.com/help/?faq=17580 para más detalles.

    YA NO SE QUE HACER ... PIDO AYUDA URGENTE...... MUCHAS GRACIAS

    ResponderSuprimir
  29. Eso ocurre cuando tratan de conseguir el código mientras estan logueados en Facebook.
    No deberán haber iniciado sesión en Facebook para solicitar el código.

    ResponderSuprimir
  30. Muchas gracias por el post, he conseguido el código, pero tengo el blog en blogger y no encuentro como añadir un gadget en HTML/java, solamente encuentro el enlace para hacerlo por URL... donde lo pego? solo quiero que se vea en el blog, no en las entradas, gracias!

    ResponderSuprimir
  31. Hice una mezcla de procedimientos y funciono! Gracias

    ResponderSuprimir
  32. Muchas gracias por la explicación. Aprovecho para preguntar si suele notarse de forma clara algun aumento de visitas por el hecho de tener el botón. Un saludo!!

    ResponderSuprimir
  33. Amigo no puedo agregar el codigo en el gadget porque me pide ubicar desde dirección url. Como hago?

    ResponderSuprimir
  34. Primero gracias por las enseñanzas,ahora la pregunta, peguè el còdigo en "formato" y cuando escribo una entrada y le doy "vista previa" se ve hermoso!!!pero....cuando la publico desaparece como por arte de magia. Que està pasando? Agradecerìa tu ayuda, (màs todavìa)

    ResponderSuprimir
  35. No puedo ver las caras de las personas en mi blog, solo me aparecce el boton de "like" como hago?! :(

    ResponderSuprimir
  36. En las mismas páginas donde encontrarás el código para colocar el botón "me gusta" de Facebook, encontrarás otros códigos similares, uno de ellos incorpora las caras de las personas que han gustado de tu blog. Es cuestión de que selecciones el código que deseas.

    ResponderSuprimir
    Respuestas
    1. hola gerardo, una super duda, quiero dar de alta mi blog en los buscadores de bing, pero para esto me pide que valide mi blog (de blogger), la manera de validarlo es subierno un archivo BingSiteAuth.xml, y luego dandole clik a una direcicon que ellos mismo me genera, la cosa es que no se, como subir este tipo de archivos en mi blog y en consiguiente no he podido validar mo blog, si me pudieras ayudar seria de mucha ayuda, saludos y felicidades por el blog.

      Suprimir
  37. Hola muchísimas gracias por tu explicación, ha sido muy clara. Me gustaría preguntarte si sabrias como se puede poner el boton de me gusta con la foto de la pagina del face al que enlaza, es decir en este caso la que he creado para promocionar el blog? Muchisimas gracias por tu tiempo. Un saludo.

    ResponderSuprimir
  38. Hola otra vez, me olvide preguntarte ¿como se puede hacer para que salga el numero de personas que le gusta sin poner el nombre de las personas a las que le gusta? eso solo por curiosidad. Muchísimas gracias por tu ayuda y tu paciencia. saludos.

    ResponderSuprimir
  39. Muy bueno tu aporte, nos facilitas las cosas a los que estamos empezando. Si quieres conocer mi blog es este:

    http://vivencias-aqueo.blogspot.com/

    Si te gusta deja un comentario

    ResponderSuprimir
  40. Hola necesito ayuda :S quiero colocar el botón del like en cada una de las entradas, pero agrego una entrada le doy like y cuando agrego otra, aparece ya con el like. Entonces no sé qué hacer!! No sé si es mi plantilla o algo :S AYUDA!

    ResponderSuprimir
  41. Gracias genio!!
    Probe con todos y ninguno me funcionaba, pero tu tactica si!!!

    ResponderSuprimir
  42. Q ESTARE HACIENDO MAL ME SALE EL BOTON EN INGLES "like" TRATE DE CAMBIAR LO QUE DICES Q SE DEBE CAMBIAR PARA Q APAREZCA EN ESPAÑOL PERO NO ENCUENTRO ESE TEXTO TAL COMO LO ESCRIBISTE Y LO Q CAMBIE NO FUNCIONO

    ResponderSuprimir
  43. Mi problema es que introduje los dos codigos y me sale bien, en cada entrada de mi blog. Pero el problema es que cuando se marca una entrada como "me gusta" automaticamente se marcan todas las entradas con un me gusta. Qué puedo hacer? Gracias.

    ResponderSuprimir
  44. Super util, me ayudo muchisisimo. Gracias :)

    ResponderSuprimir
  45. A mi me ha pasado lo mismo, he copiado los dos códigos que me daba y luego al darle a un me gusta me los marcaba todos y al añadir una entrada nueva también...

    ResponderSuprimir
  46. Nadie sabe como solucionar el problema que tanto Libélula como yo tenemos??
    Milesker!! Muchas gracias!!
    http://letrasquesemueven.blogspot.com/

    ResponderSuprimir
  47. Muy buena la informacion, me fue muy util.

    ResponderSuprimir
  48. La leche compi, a veces lo simple...
    Muchas gracias

    ResponderSuprimir
  49. cuando estoy en diseño, le doy a get gaget, pero no veo la opciion de html... q estoy haciendo mal?

    ResponderSuprimir
  50. Hola! te cuento que hice todos los pasos pero me dice que el url contiene caracteres no permitidos( cuando lo quiero pegar en el sitio correspondiente del blog) que hago!? :(

    ResponderSuprimir
  51. Muchas gracias, gran información.
    Saludos.

    ResponderSuprimir
  52. SI LLO TAMBIEN LA PUDE PONER EL BOTON ME GUSTA Y ENVIAR EN MI BLOGGER.
    www.ciberpuntocom-diaz.blogspot.com

    gracias por las instrucciones amigo GERVALDI

    ResponderSuprimir
  53. A mi me está pasando que primero tengo que poner el codigo html5 debajo del "body" pero en el nuevo blogger no se puede modificar la plantilla no? :/

    ResponderSuprimir
  54. no entiendo donde tengo que pegar el codigo , me vuelvo loca

    ResponderSuprimir
  55. Al hacer clic en get code, salen dos códigos en htlm5. El primero dice que hay que colocarlo debajo del "body" tag, al menos una vez ¿Dónde está eso? No entiendo. Por favor ayuda. ¿Cuál es el código que hay que colocar en la plantilla de entrada? Gracias.

    ResponderSuprimir
  56. ok, yo lo hice, te tira dos sodigos, uno arriba y otro abajo, el priemero es el mas largo y el seguno mas cortito, al principio meti el codigo en un gadget y no apareceia nada, luego probe colocando el primer codigo y acontinuacion el segundo codigo abajo de este y aplique los cambios y funciono!, espero que les sirva este comentario gente!!! saludos! y gracias por el aporte che!

    si lo quieren ver esta en mi blog:
    http://tumundoinsolito.blogspot.com/

    ResponderSuprimir
  57. Hola me puedes ayudar!!!

    ResponderSuprimir
  58. Hola me puedes ayudar quiero hacer un link de una foto para que automaticamente al dar click en el link el me gusta cuente como un voto me podrias ayudar!!!

    ResponderSuprimir
  59. Te pasaste matias, gracias a los dos ya me hiba a dar por vencida,buen blogs

    ResponderSuprimir
  60. Muy útil, gracias por la información.
    Un saludo,

    ResponderSuprimir
  61. Hola, pues darte las gracias por la ayuda que nos has facilitado. Estuve usando las vistas dinamicas de blogger y me estaba aburriendo un poco, acabo de cambiar a otra plantilla y ahora ya lo tengo casi todo listecito :D.
    http://darknesk.blogspot.com.

    Saludos y un fuerte abrazo. :)

    ResponderSuprimir
  62. A mi es que para empezar, la url no me sirve :-( ¿alguien me puede ayudar?
    He entrado en configuracion de la cuenta para ver el nombre de usuario, me he fijado en el recuadro en donde aparece reflejado la direccion de mi pag en facebook http://facebook.com/....
    Ayuda por favor!

    ResponderSuprimir
  63. hola gerardo, una super duda, quiero dar de alta mi blog en los buscadores de bing, pero para esto me pide que valide mi blog (de blogger), la manera de validarlo es subierno un archivo BingSiteAuth.xml, y luego dandole clik a una direcicon que ellos mismo me genera, la cosa es que no se, como subir este tipo de archivos en mi blog y en consiguiente no he podido validar mo blog, si me pudieras ayudar seria de mucha ayuda, saludos y felicidades por el blog.

    ResponderSuprimir
  64. @Anónimo
    Para validar tu blog de blogger en Bing, debes usar la opción 2 "copia y pega una etiqueta en tu página web predeterminada", ahí te dará una etiqueta parecida a "meta name="msvalidate.01" content="nnnadsfadsfadsf" "
    Debes copiar y pegar esta etiqueta en tu plantilla de tu blog en alguna parte dentro de la sección "head", ahí mismo te da el ejemplo de cómo y donde colocar esta etiqueta. Esto valdrá para que lo valides, ya que la opción que tu mencionas sólo vale para sitios donde puedes subir archivos en el directorio o estructura de tu sitio, en blogger esto no se puede hacer.

    ResponderSuprimir
  65. BaCAN TU BLOG ME AYUDADO MUCHO AH, AVER SI MIRAS MI BLOG QUE ESTA EN PROSESO PARA QUE SEA VEA BIEN, Y AVER SI ENTRAS A MI BLOG Y ME DICES SI LO HIZE BIEN
    http://michellac.blogspot.com/

    ResponderSuprimir
  66. amigo super bueno esto a mi me funciono full ... mira mi blog y recomiendame algo ...
    http://elbigblog.blogspot.com/

    ResponderSuprimir
  67. Muy bien explicado, pero tengo un problema, el contador de "me gusta" no esta a cero, si no en 11, como puedo solucionarlo?? gracias de antemano

    ResponderSuprimir
  68. oye... hie todo una y otra vez y no me sale el boton en el blogg... no sé!! no sé que mas hacer

    ResponderSuprimir
  69. Cual de los dos codigos tengo que pegar??? No puedooooooooo!!! #Help me!

    ResponderSuprimir
  70. Hola Gerardo. Muchas gracias por tu aporte, me ha sido de gran utilidad para mi blog (http://saberdeforex.blogspot.com/)
    Saludos.

    ResponderSuprimir
  71. Mi duda como la de otros. Cual de los dos códigos pego? Gracias

    ResponderSuprimir
  72. yo he intentado con los 2 codigos y con ninguno de los 2 me sale... q rabia!! que hago?? muchas gracias

    ResponderSuprimir
  73. Puse el botón en la barra lateral con los dos códigos y parece que funciona, pero estaba en 18 no en cero y luego con un click mio subió a 19. Veremos, seguiré probando. Y otra cuestión ¿hay manera de saber a quien le gusta"?. Muchas gracias por tu aportación, me ha sido de gran ayuda.

    ResponderSuprimir

También te puede interesar

Vida blog