“Me gusta” Botón web Facebook en tu web o blog ( Like Button )

“Me gusta” Botón web Facebook en tu web o blog ( Like Button )

Uno de los Social Plugin de Facebook es el Botón “me gusta” al final a substituido la palabra Fan, aunque nos dan la nueva posibilidad de decir “ recomendar “ . Entonces Ahora el botón sirve para mostrarlo donde queramos de nuestra web y poder interactuar con los usuarios de facebook, sin complicados códigos ni modificar el header de webs dinámicas. El botón permite a los usuarios conectarse a sus páginas y compartir el contenido de vuelta a sus amigos en Facebook con un solo clic.

Vamos a crear un boton Me Gusta.

1º entraremos en la página de los Social Plugin de Facebook

2º Clickamos en el Plugin Me gusta “Like

Aquí nos aparece una caja de configuración del Script donde podemos hacer el “Me gusta” genérico para una página

Por ejemplo: para la web de www.iPinscher.com he creado uno,

Configuración: ( ahora esta en ingles pero creo que dentro de poco lo pondrán en Español )

  • Url to like ( 1): Aquí si solo quieres que a la gente le guste tu web, ni una página más, Para los que creáis páginas fan viene a ser como si tu web pase a ser una fan pero fuera de Facebook.
  • Layout Stile: Estilo del botón, Cuando es Estándar aparecen los nombres de la gente a quien le gusta, y te anima a que te gusta siendo el primero de tus amigos. Si lo abres como counter solo aparece el botón de “me gusta” y el numero de gente que les gusta tu web.
  • Show faces: Si queréis que se vean caras pequeñitas debajo del “me gusta” ej:

  • Width: La anchura total que se reflejara en tu web.
  • Verb to display: Like: Me gusta o Recomend : Recomiendo
  • Font: la fuente del widget.
  • Color Scheme: pues el color del me gusta.

Finalmente apretamos Get code, para generarnos el código para implementar en nuestra web.

Una vez implementado y cargado en el sever, se vera de esta manera:

Luego si utilizamos, CMS como WordPress o parecidos, podemos crear un Loop para cada permalink. De la web, o como mejor dicho en cada post.

  • Para Word Press si queremos que genere solo un contador utilizaremos este código: likebutton

Próximamente añadiré el código para otras plataformas CMS aunque si tenéis per Permalink me adelantareis trabajo. :P

Podéis ver como funciona también en la web de los Calçots , la del Pepitu y pronto más ejemplos.

Comentarios

  1. Vicente dice:

    Buenisimo!
    pero.. como lo haces para que esté en español?

    1. Lisard dice:

      En español el que? la pagina? eso depende de la configuración de tu navegador que te la carga en ingles, frances o español. :P

  2. [...] he implementado el botón de Me gusta para duplicar la promoción interna de la [...]

  3. Gracia, excelente artículo!

  4. pabusa dice:

    Hola, he seguido el tutorial, pero me salen el botón en ingles, ¿¿ cómo se pone en español ??

  5. Lisard dice:

    @pabusa por defecto esta en ingles, pero cuando entra un usuario facebook registrado en español, salta al Español. y así en todos los casos.

  6. pabusa dice:

    Ok, el caso es que lo había pensado, pero weno, así es un poco rollo ¿no? ¿¿ no hay forma de que se vea en español de cualquier manera ??

  7. susana dice:

    Lo agregué y si actualizo la página, a veces sale en inglés y a veces en castellan. Por qué puede ser?

  8. Lisard dice:

    @susana: por la coockies de tu navegador, o si estas o no estas en ese momento registrada en facebook.

  9. susana dice:

    Gracias Lisard!!!!

  10. Fabiana dice:

    Hola, intenté varias veces obtener el código, siguiendo los pasos correctos, pero me marca error, una y otra vez. ¿Tenés idea de lo que puede estar pasando? Gracias, Fabiana.

  11. Nick dice:

    ¡Excelente tutorial!
    Quisiera saber si hay manera de que la foto del usuario al que le gustó el contenido permanezca intacta. Es decir, que aparezca la foto de todos o algunos de los usuarios que presionaron ‘Me gusta’. O si se puede saber quiénes son las personas a las que le gustó, si se guarda algún registro de ello.

    Desde ya, miles de gracias.
    Un saludo Lisard!

  12. cristhian dice:

    gracias por el aporte, el boton señala en numero de personas altísimo y cada cierto tiempo indica que es un código de ejemplo. Se pueden cambiar estos detalles???

  13. Josue dice:

    amigo nesesito su ayuda estoy en una competencia de una pag de grupo de faceook “sony puerto rico’ la competencia se trata de la q mas tenga like o megusta en la foto subida adicha pagina. estoy perdiendo por muchos votos nesesito q me diga si hay una manera mas rapida para yo tener mas like o megusta en mi foto. porfabor nesesito su ayuda se lo agradecere un monto!!!!!!1

  14. portaltodo dice:

    gracias esta bueno el post sobre todo para post individuales

  15. Mateo dice:

    Tengo el problema que cuando tocan mi boton de “me gusta” en una entrada mia en el muro les aparece – el nombre del blog (con url de la entrada) + url del blog…y me gustaria que sea – nombre de la entrada (url de la entrada)+ nombre del blog (url del blog)
    el codigo que use es este:

    Mi blog es http://www.losmejoresvideosdeinternet.com/

    Mi estado en esta situacion:
    Lo intente tantas veces que me rendi y retome el asunto varias veces en lapsos grandes de tiempo.
    es posible solucionarlo,alguna idea??
    gracias!!
    (uso blogger)

  16. anguie dice:

    Cree una pagina de empresa que se llama k-sual bajo el perfil de una cuenta que se llama k-sual accesorios(administrador), he enviado las invitaciones pero todo mundo entra y ve solo el perfil del usuario y no ve la pagina, de 30 amigos solo 5 han hecho click en el boton me gusta de la pagina, les pido porfavor que me sugieran una manera de que mis amigos se hagan fans de la pagina,, ademas necesito que a ellos les llege notificacion de todo lo que la pagina hace(colgar fotos, comentarios, estados ect), eso es posible?, como lo hago?, por favor expertos… una manito!!

  17. lucas dice:

    Una pregunta copio solo el codigo? Estoy haciendo mi web con dreamweaver, todavia no la subi a la web? Mi pregunta es si tengo qe poner un boton de “Me Gusta” o con el codigo se hace solo?

    Gracias!

  18. Danii dice:

    Graciias :D !! Me funciono :p
    Primer comentario q dejo en todas las paginas q entre !!
    segui asii ..

  19. Kervy dice:

    hermano entendi todo perfecto lo que no se es donde pego el codigo que me da??? por favor podria alguien especificarme que necesito colocar el me gusta??

  20. E. Silva A. dice:

    Cómo hiciste el me gusta de tu web (el que está arriba, lado izquierdo): signo de facebook, y el número de usuarios que les gusta al lado (al frente). Lo quiero así, me ayudas?. Aun no he subido una web que estoy haciendo.

  21. Claudio dice:

    Para poner el botón en español se debe editar la parte del código que te dan donde dice en_EN, se cambia por es_ES que corresponde a la lengua castellana. Listo!

  22. ed dice:

    como puedo poner dos botones o mas en la misma pagina

  23. Lisard dice:

    De la misma manera que añades uno., :)

  24. ivana dice:

    Gracias por las claras explicaciones!

  25. Álber_4 dice:

    ¿La única manera de que salga la pestaña “me gusta” en una foto es si estás etiquetado en ella? Sé que me desvío un poco del tema que tratas. Lo siento. Muchas gracias.

  26. edy dice:

    ola.. la verdad ami no me sale.quisiera saber en donde exactamente pones el codigo que te da…en una pagina normal que le quieras poner el me gusta a un lado…. gracias…

  27. JAM dice:

    Una duda. Es posible crear una página que al llamarla automáticamente genere el evento “I LIKE” sin tener que hacer click en el botón ???

  28. ed dice:

    se poner un boton, pero donde generas el codigo debes de poner la url,
    si quiero poner dos botones para dos cosas diferentes que estan en la misma url como se puede hacer?

  29. videomatch dice:

    porque no les aparece en la pagina principal y solo en los muros?

  30. PARA TODOS LOS QUE DESEEN CAMBIAR CUALQUIER BOTON DE FACEBOOK A ESPAÑOL DEBEN REALIZAR EL CAMBIO EN EL CODIGO IFRAME O XFBML DE LA SIGUIENTE MANERA

    BUSCA LA SIGUIENTE PALABRA: [ en_US ] y la cambias por: [ es_LA ] Y LISTO, SOLUCIONADO EL PROBLEMA….

  31. tengo un problema con esto :S… coloque el boton y cuando le doy “me gusta” y voy a mi perfil sale es la url y no el title y no solo eso si no que aprarece un link pero de facebook al cual si le das click me dice que la url ah caducado…. :S

  32. Ya lo solucione! (: (Y)

  33. Paco dice:

    El problema es que no funciona con el I E., por lo menos yo lo probé en mi página y nada, también probé el enlace que pusistes http://www.ipinscher.com/y tampoco me funciono.

    Alguna solución habrá, aparte de que todo el mundo se cambie de navegador….
    Mi más sentido odio hacia el IE.
    Un saludo

  34. Edgar dice:

    Una pregunta he intentado durante varias ocaciones pero cuando haces click en el boton comienza a ejecutarse dicho codigo “n” veces lanzando la ventana de de login una y otra vez y el contador aumenta y disminuye.

    A que se pudiera deber dicho error?

    Nota: en el muro si registra el “me gusta” de la pagina

    Gracias!

  35. Monica dice:

    Este es el codigo a pegar:)
    =============================================

    =============================================
    solo reemplaza el texto “tupaginaweb” por la direcion de tu sitio web:)

  36. los imbito a mi web para que vean mis novedades y comenten.

  37. Marcelo dice:

    Como hago para cambiar lo que dice
    lo uso en varias paginas y siempre me pone un solo titulo

  38. Joseph dice:

    Hey. muchas gracias me ayudo mucho. lo andaba buscando por todos lados. gracias.

  39. fatima dice:

    muchas gracias por esto pero tengo un problema cuando quiero obtener el codigo no me sale cargando y luego no me sale nada por que sera?

  40. Danitza dice:

    hola!
    cuando coloco en la caja la URL
    sólo me sale facebook/plataform
    de donde saco la de mi pag de facebook¿?

  41. Álvaro dice:

    Excelente esplicación, gracias.
    Sabés cuál es procedimiento para hacer este botón en flash? Saludos.

  42. oscar dice:

    hola ya lo probe y si me aparecio pero no a parece en mi facebook cual es la razón

  43. Gerardo dice:

    hola amigo, muy bueno el tutorial. Todo me sirvió de maravilla sólo me gustaría que me ayudaras para que en cada post me salga un contador simplemente y no la cantidad de “me gusta” que tiene la pagina del blog. No tengo la menor idea de como hacer. gracias :)

  44. bóxer dice:

    Gracias, lo acabo de poner en mi web, ahora tengo que probarlo.

  45. Ruy Alberto dice:

    Excelente. Si me hubiera encontrado esta información antes, lidiaría menos.
    Sólo una duda, ya tengo el botón “Me gusta” en mi blog y funcionando correctamente, sólo que me gustaría saber si hay forma directa de saber qué usuarios le dieron clic al botón en el blog.(Sé que se puede verificar desde su perfil donde aparece la leyenda que le ha gustado mi página del blog, pero por obvias razones no puedo checar el perfil de todos para saber a quiénes sí les ha gustado el blog).
    Gracias. ;)

  46. Ruy Alberto dice:

    Ahm Otra cosa con respecto a lo anterior, supongo que se cambiaría el código, ¿Se reiniciará a 0 el contador? Tengo ya 66 clicks a Me Gusta y no quisiera que se “esfumaran”.
    Y otra preg. Si le agrego las “faces” para saber quién clickeó, aparecerá también el contador?
    Gracias de nuevo

  47. florenusky dice:

    Hola. bueno despues de estar horas y horas ¡necesito ayuda! Me he creado una pagina en livejournal, y uno de mis amigos en esa pagina ha puesto el boton de “me gusta” como en facebook. Y yo no puedo, lo he estado intentando pero no se. Tambien probé con mi cuenta en blogspot y lo consegui con exito, ya lo puse. Pero lo que no puedo es en esta pagina.

  48. JuancarVzla dice:

    a mi me sale en español en el iframe y en ingles en XFBML no se q tiene de diferencia pero bueno ya por lo menos pude ponerlo en español jajaja bueno espero q les ayude esta informacion.

  49. Miguel dice:

    Hola, pues ya cheque todo de generar el codigo y demas, pero resulta que mi sitio que es connectingmx.com esta soportado en flash y no se como agregarle ese codigo o dondo? Aun no subo la pagina cabe aclarar. Espero me puedas ayudar. Saludos

  50. Estos Plugin de Facebook son una manera muy páctica para lograr trafico a través de otros miembros de la red de Facebbok. Optimizarlo y configurarlo es algo que se debe realizar previa a la generación del mismo plugin. El boton “Me Gusta” es realmente fantástico para todods los que disfrutamos de tener páginas Web…..

  51. Gonzalo dice:

    tengo el mismo problema que comento uno mas arriba, el boton me funciona, me aparece en facebook pero con el nombre de la web, no del post, y con la foto del index, no del post, en realidad lo unico del post es el texto jeje, alguien sabe la solucion?

  52. Mcfly dice:

    Hola, funciona perfecto. Solo que no logro ubicarlo en el lugar en que me gustaria. Cómo hago para posicionar el like button en donde yo quiero?
    gracias y muy bueno tu aporte!

  53. Ignacio dice:

    Falta que alguién diga como poner este código en páginas dinamicas que no sean de wordpress, joomla etc. es decir que detecte automaticamente la URL donde se encuentre.

  54. Perdon por mi ignorancia jejeje, pero en donde o en que casilla coloco el codigo???
    gracias…

  55. Hola dice:

    Hola, me gusto tu post. De doy clic a generar y me pide que sea desarrollador. Como me doy de alta. Soy de mexico. Gracias :D

  56. Rebe dice:

    Hola!! gracias a ti ya tengo los codigos de facebook pero ahora no se como ponerlos en mi web para conseguir el “Me Gusta” !! podrias ayudarme??

  57. Abel dice:

    Muchas gracias, me ha servido de mucho, erp hay algo que no entiendo, este ME GUSTA o “I Like” en tu p[agina Web o tu blog, solo te sirve como contador de visitas, mas no va directo a tu Like de Fan Page? podrías aclaramente es punto te lo agradeceria…
    Gracias….

  58. Luciano dice:

    Hola:
    Estoy intentando poner un botón “Share” de Facebook, como el que tienes al inicio del texto (ahora con 410).
    Cuando pincho en el tuyo aparece el título de tu página y una breve descripción del artículo.
    Eso a mí no me sale, sólo la URL.
    ¿Me puedes decir cómo se hace?
    Muchas gracias. Un saludo.

  59. Hola que tal mucho gusto. Mira ya trate de conseguir el boton “me gusta” de Facebook para posicionarlo en mi página web, que aun no esta en la red… pero al hacer el proceso que tu dices y dar clic en “get code” me aparece el sig texto: Sólo los desarrolladores verificados pueden agregar como desarrolladores de lista de esta solicitud.
    ojala puedas ayudarme.

  60. Amanda dice:

    Holis!, se puede tener dos botones me gusta en la misma pagina pero que se contabilicen por separado? Besosssssss

  61. lara dice:

    yo quiero poner un botón de me gusta en la página de facebook que he creado, lo que no entiendo es dónde hay que pegar el código que se genera?

  62. petete2008 dice:

    cuando le doy al botón GET CODE me aparece el siguiente mensaje :

    Only verified developers can be added as listed developers of this application.
    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.

    ¿Qué sucede? Ya no es gratis??

  63. nobody dice:

    lo he probado y me funciono una vez en mi web pero cuando cambie de diseño y copie el mismo codigo no me funciono!! ???????

    y eso q lo voliv a crear igual no me funciono a pesar q en la web de prueba si pero en mi web, no me funciona ningun plugins qe facebook me da.

    Por favor algien me puede ayudar me es urgente poner ese plugins en mi web por favor

  64. jessica dice:

    Si apreto get code no me da el codigo sino un mensaje donde dice que no puedo ser desarrollador.. :S

  65. Ibiza dice:

    Ed, el megusta es válido para una url, pero no veo que problema tienes en compartir los megusta de ambas páginas.
    Mi pregunta. No hay forma de decorar la caja a gusto?

  66. yeudy dice:

    nesesito el no me gusta

  67. Carolina dice:

    Intenté hacerlo mil veces pero me salta:

    ”Sólo los desarrolladores verificados pueden ser agregados como desarrolladores de esta aplicación.
    Sólo los desarrolladores verificados pueden agregar como desarrolladores de lista de esta solicitud. Lea http://www.facebook.com/help/?faq=17580 para detalles.” ¿QUÉ PUEDO HACER? :s en donde está para poner la url, pongo ‘http://linaa-r.blogspot.com’ AYUDA POR FAVOR!

  68. Manu dice:

    Hola, tengo un inconveniente…sigo todos estos pasos y aparece el boton ME GUSTA de lo mas bien, el problema esta en que quien pone ME GUSTA no le aparece en su perfil en facebook (es decir que solo sirve como contador). Tenes idea cual es el problema?
    Muchas gracias. Saludos

  69. bladekencj dice:

    carolina, como lograste solucionar el mensaje de desarrolador??
    te agradezco de antemano por tu respuesta.

  70. javier dice:

    donde pego el codigo hermano?

  71. Teresa dice:

    No logro poner el me gusta, siempre me sale:Intenté hacerlo mil veces pero me salta:

    ”Sólo los desarrolladores verificados pueden ser agregados como desarrolladores de esta aplicación.
    Sólo los desarrolladores verificados pueden agregar como desarrolladores de lista de esta solicitud. Lea http://www.facebook.com/help/?faq=17580 para detalles.” ¿QUÉ PUEDO HACER?

  72. mujer dice:

    claudio gracias, porfin pude traducir el boton

  73. Raul dice:

    No puedo generar el cógigo para cada publicación de mi entrada, xq me sale: “Sólo los desarrolladores verificados se puede agregar como desarrolladores de lista de esta aplicación”.

  74. Zherg dice:

    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!!

  75. Regulo dice:

    Me pasa exactamente lo mismo que a Carolina. No me genera el codigo. Que puede estar pasando?

  76. Andrea dice:

    Hola! desde hace un par de días me aparecen duplicadas las caras de mis seguidores en facebook. Ya probé sacando y poniendo el widgets y nada. Qué pudo haber pasado? Ya que con los nuevos fans no me pasa…

  77. Jesus dice:

    me pasa lo mismo q a carolina de solo desarrolladores no se si puedas ayudarnos porfavor de antemano gracias

  78. David dice:

    @Claudio dice que para poner en español hay editar la parte donde dice “en_EN” por “es_ES”, yo ya lo hice pero en el mio decía “en_US” y lo cambie por “es_ES” pero no salió el botón :(, ayuda, please!

  79. Azul dice:

    Hola, perdona quería enviarte un mensaje privado pero creo que no se puede, por favor podrías comentarme como pudiste hacer para que te saliese en el blog el botón de me gusta con la foto de Pinscher en facebook, yo no he sido capaz, me sale en mi blog el me gusta pero nada más, gracias por tu atención.

  80. Azul dice:

    Hola perdona, no sé si antes se guardo esto pq me falla internet. Me gustaría poner mi botón de me gusta con bluepaint en facebook y la foto como el ejemplo tuyo, y no lo consigo? muchas gracia por tu tiempo. saludos.

  81. Alejandro Romero dice:

    Lo único que tienes que hacer para que aparezca en español es cambiar el texto que genera el código en donde dice _US por _ES y siempre aparecerá en español.

  82. Carolyn dice:

    Hola amigo, sabes que necesito tú ayuda, cuando intento copiar el codigo del boton me gusta en mi pagina de facebook no se donde copiarlo, please.

    Gracias.

  83. Quito64 dice:

    Sinceramente, esperaba hallar info que me guiara para colocar el boton en mi web. En realidad, este aporte no explica NADA. No hay un paso a paso. Como se coloca el codigo? en que partes de la web va?…