Cómo poner el botón Me Gusta de Facebook en tu página web

Integrar los botones sociales es muy importante para que nuestro contenido llegue a la mayor cantidad de personas posibles, mientras más posibilidades le demos al usuario de compartir y recomendar nuestro contenido, mayor será la probabilidad de éxito si nuestro contenido es bueno.


El botón de Facebook

Facebook tiene una herramienta que nos permite generar el código de nuestro botón de una manera muy simple.

Pasos:

1.- Vamos a la herramienta para generar el botón de Facebook.
2.- Donde dice "Step 1 - Get Like Button Code" veremos un formulario, ahi configuramos las opciones del botón.
3.- Hacemos clic en el botón "Get code".
4.- Se abrira una ventana con dos bloques de código (siempre y cuando no hayas seleccionado la opción "Send button", en cuyo caso se abrirá un solo bloque de código), ambos códigos sirven para lo mismo, la diferencia es que el primer bloque nos da el botón en un iFrame (sin cargar un javascript en nuestra pagina), y el segundo utiliza la tecnología XFBML que carga el javascript en nuestra pagina.
5.- Copiamos el código del segundo bloque (XFBML).
6.- Pegamos el código proporcionado en donde queremos que aparezca el botón dentro de nuestro código HTML.


Traducir el botón "Me gusta" de Facebook al Español

El código que nos brinda Facebook es algo así:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=128897243865016&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="false" font=""></fb:like>


Para traducirlo debemos modificar la ruta del archivo .js, donde dice /en_US/ debemos poner /es_ES/, quedaría así:

<div id="fb-root"></div><script src="http://connect.facebook.net/es_ES/all.js#appId=128897243865016&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="false" font=""></fb:like>



Botón "Me Gusta" en HTML

Si te perdiste en alguno de los pasos de arriba, aquí está el código del botón, solo copias y pegas donde quieras que aparezca el botón:
<div id="fb-root"></div><script src="http://connect.facebook.net/es_ES/all.js#appId=128897243865016&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="false" font=""></fb:like>


Botón "Me Gusta" en PHP

Si tu página está hecha en PHP copia y pega el siguiente código:

<?='<div id="fb-root"></div><script src="http://connect.facebook.net/es_ES/all.js#appId=128897243865016&amp;xfbml=1"></script><fb:like href="" send="false" layout="button_count" width="110" show_faces="false" font=""></fb:like>'?>


Hacer que ponga un mensaje en el muro del usuario

Podemos hacer que al hacer click en "Me gusta", le aparezca un mensaje en el muro del usuario (por ejemplo, haz clic en el "Me gusta" de esta lección y luego ve a tu perfil), para esto Facebook a puesto a nuestra disposición un sistema de meta etiquetas, que es muy simple, y también tenemos una herramienta para generarlas en un click que se encuentra debajo de la herramienta para crear el botón de "Me gusta".



<meta property="og:title" content="Cómo poner el botón "Me gusta" de Facebook en tu página web" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.comocrearunsitioweb.com/boton-me-gusta-facebook" />
<meta property="og:image" content="http://www.comocrearunsitioweb.com/imagenes/html.png" />
<meta property="og:site_name" content="ComoCrearUnSitioWeb.com" />
<meta property="fb:admins" content="1428384978" />


copiamos el código dentro de las etiquetas <head></head> y listo!!!

Anuncios

Comentarios Destacados

28 comentarios - Cómo poner el botón Me Gusta de Facebook en tu página web

@NacRe +1
q wena loko me ffunka !!

mi pagina : nkrw0679aportes.tk
@BluesBand
Es bueno tener a mano esta informacion (aunque todavia no la valla a usar) gracias por el aporte
@laramjo +2
y donde cuernos encuentro la herramienta para generar el botón de Facebook.
@valentin32
Lo mismo me pregunto. Una vez lo encontré, pero ya no veo esa opción por ningún lado.
@valentin32
No me sirvió de ningún modo. Lo que nunca explican, es que depende mucho del tema que uses, cuando tu blog está hecho con wordpress. En mi caso no veo la opción para instalar alguno de los plugins que te pone el boton de "me gusta" de manera automática. De todos modos, el código que te da el Facebook para insertarlo, lo obtenés en Ayuda + Panel de Ayuda + (en la ventanita del buscador que te aparece ponés "colocar boton me gusta" y ahí ya te aparece todo).
@jungletimes -2
&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script src=&quot;http://connect.facebook.net/es_ES/all.js#appId=128897243865016&amp;amp;xfbml=1&quot;&gt;&lt;/script&gt;&lt;fb:like href=&quot;&quot; send=&quot;false&quot; layout=&quot;button_count&quot; width=&quot;110&quot; show_faces=&quot;false&quot; font=&quot;&quot;&gt;&lt;/fb:like&gt;
@xxAlkAxx +1
gracias me sirvio de mucho!!!
@Real_Jecs +1
luego lo pruevo si me sirve +10
@ryday
Una pregunta estoy asiendo mi web en el bloc de notas de mi pc por que soy novato en eso como hago para que cuando le den me gusta como lo pones tu en html le den me gusta en mi pagina en facebook es que aparece el boton pero nada mas http://www.facebook.com/pages/CityVillavo/334864296529179 esa es mi pagina gracias si me puedes ayudar
@porta12
me salten como 3 codigos el HTLM5 y 2 dos mas pero probe todos y no anda como carjao se hace?
@gonzaNTM
cuando pongo mas de un boton en la misma pagina y pongo ME GUSTA a todos se le ponen me gusta no solo al q oprimi me podes alludar ???
@Ardanyy +2
Gracias Amigo te llevas mis +10 de hoy
@mmtor +1
gracias re sirvió
@Faluu +1
Muchas gracias Navixx1
@josan +1
nada mal, gracias por el dato