Colocar el boton Me Gusta de Facebook en tu pagina web

"Para indicar que te gusta un contenido determinado de la web y compartirlo en Facebook, solo tienes que hacer clic una vez en el botón "Me gusta". Si quieres, también puedes incluir el botón "Compartir" junto a "Me gusta". De este modo, las personas podrán añadir un mensaje personal y elegir con quién compartir el contenido."

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>


<div id="fb-root"></div>
<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.


<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

Iframe:

Este es el mas comun, solo debes colocarlo donde mas te guste, sin necesidad de otro codigo


<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>


.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 &quot; + data:post.url + &quot;, quedando asi:

href=" + data:post.url +"

(&quot; 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.

Previous
Next Post »