viernes, 18 de julio de 2014

Como incluir la caja con el botón me gusta en mi web para una página de Facebook


Bienvenid@s, si estás aquí es poco estás buscando el modo de incluir en tu web esa caja de facebook que contiene el botón me gusta de una página de Facebook, lo has visto en muchas páginas web, esta caja suele mostrar los usuarios que han hecho like en la página, es decir algo parecido a lo que puedes ver en la siguiente imagen:

Como incluir la caja con el botón me gusta en mi web para una página de Facebook
A esta caja que proporciona Facebook se le llama Like Box y como veremos a continuación es muy fácil de integrar.

Lo primero que vamos a hacer es ir al siguiente link: https://developers.facebook.com/docs/plugins/like-box-for-pages 

Al entrar veréis una página como la siguiente, desde la cual podremos configurar el Like Box para nuestro sitio web:

Como incluir la caja con el botón me gusta en mi web para una página de Facebook

Ahora es momento de buscar la dirección url de nuestra página de facebook, para ello simplemente accedéis a vuestra página, copias la url:


Como incluir la caja con el botón me gusta en mi web para una página de Facebook

 Y la agregáis en el campo "Facebook Page URL":

Como incluir la caja con el botón me gusta en mi web para una página de Facebook

Bien, también podemos configurar otras cosas, por ejemplo la anchura del Like Box en el campo Width, la altura en el campo Height, El color del borde en Color Scheme y activar o desactivar las casillas:

Show Friends' Faces: para mostrar los usuarios
Show Header: para mostrar la cabecera
Show Posts: para mostrar las publicaciones de la página de Facebook
Show Border: para mostra el borde del Like Box

Una vez que habéis seleccionado la configuración que más os guste, haremos click en el botón "Get code" y nos aparecerá una ventana con un código en la parte superior y otro en la inferior copiamos ambos y lo incluimos en el lugar que más nos guste de nuestro sitio web.

 Parte superior:

<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&appId=297316460450808&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



 Parte inferior:

<div class="fb-like-box" data-href="https://www.facebook.com/pages/Jquery-en-espa%C3%B1ol/668254706573483?ref_type=bookmark" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>