El botón me gusta es el plugin mas conocido de Facebook, y sin duda en tu sitio no puede faltar.
Lo puedes utilizar para tener mas seguidores en tu pagina Facebook y para tus publicaciones en paginas web.
Para comenzar nos dirigimos a Botón "Me Gusta" en los plugins de Facebook, aqui comenzaremos a crearlo.
En URL colocamos la direccion web de nuestra pagina Facebook, si deseamos tener mas fans, o la utl de tu sitio web o post del sitio web.
Width es el ancho que tendrá el boton, si lo dejamos vacio se eleguira un tamaño por defecto.
Diseño es donde seleccionamos el tipo de boton que deseamos.
Tipo de acción es donde elegimos si queremos que el boton sea Me gusta o Recomendar.
Tamaño del botón es donde seleccionaremos entre small o large.
Luego de configurarlo hacemos clic en Obtener código, este nos dará dos tipos de códigos SDK y iframe:
SDK para javascript:
Si leíste el post anterior, colocar comentarios de facebook, notaras que esta parte de código es igual, si ya la colocaste no deberás volver a colocarla, de no ser así, colócala después de <body>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
La segunda parte del codigo es el boton que configuramos y lo colocaremos donde desees que se vea el boton.
Iframe:
Este es el mas comun, solo debes colocarlo donde mas te guste, sin necesidad de otro codigo
.Otras modificaciones (para SDK solo agrégale data- antes de cada uno)
colorscheme: Color del boton, light (claro) o dark (oscuro)
kid_directed_site: Restricción para menores de 14 años, True (si) o False (no), no lo uses si vas a colocar False.
share: si deseamos que junto al boton se vea la opcion Compartir True (si) o False (no)
show_faces: para ver o no las caras de los que le dieron Me Gusta, True (si) o False (no)
Colocar un solo código y que el botón me gusta se repita para cada post:
Una consulta frecuente es, como coloco un solo codigo para todos los post o entradas de mi sitio web?, es sencillo, solo debes modificar href para iframe o data-href para SDK, donde en lugar de colocar una url especifica, colocaras " + data:post.url + ", quedando asi:
href=" + data:post.url +"
(" y " " son lo mismo)
Como conclusión les diré que lo mas común es usar iframe, porque es compatible con todos los sitios y puedes colocarlo una sola vez para todos tus post con el tips que mencione anteriormente.