May 272014
 

En su documentación, Facebook ofrece tres maneras distintas de incorporar el botón de “me gusta” a una página:

  • HTML5
  • XFBML
  • IFRAME

En este artículo explicamos los pros y contras de cada una de ellas, y cómo incorporar el botón de “me gusta” en cada caso.

Incorporar el botón “me gusta” de Facebook utilizando código HTML5

HTML5 es la especificación más reciente de HTML, y es soportado por la mayoría de los navegadores. En principio, es el método más recomendable para incorporar el botón a nuestra página, a menos que el volumen de usuarios que visitan nuestro sitio utilizando versiones antiguas de los navegadores sea significativo.

Para incorporar el botón utilizando HTML5:

1. Colocamos, inmediatamente debajo del tag <body> el siguiente código para cargar el SDK Javascript de Facebook:

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

2. En el lugar en el que deseamos que aparezca el botón, colocamos el código:

<div class="fb-like"
     data-href="URL_A_LA_QUE_SE_REFIERE"
     data-width="500"
     data-layout="standard" data-action="like"
     data-show-faces="true"
     data-share="true"></div>

Con esto, veremos que el botón aparece de la siguiente forma:

Incorporar el botón “me gusta” de Facebook utilizando XFBML

XFBML es una especificación de Markup desarrollada por Facebook. Tiene la ventaja de ser compatible con versiones antiguas de los navegadores que no soportan HTML5.

Para incorporar el botón utilizando XFBML:

1. Igual que en el caso de HTML5, colocamos el siguiente código debajo del tag <body>, para cargar la librería Javascript de Facebook:

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

2. Para versiones antiguas de Internet Explorer, debemos incluir en el tag <html>la referencia al espacio de nombres XML de Facebook:

<html xmlns:fb="http://ogp.me/ns/fb#">

3. En el lugar en donde queremos que aparezca el botón, colocamos el código:

<fb:like href="URL_A_LA_QUE_SE_REFIERE"
         width="500"
         layout="standard"
         action="like"
         show_faces="true"
         share="true">
</fb:like>

Y comprobamos el resultado:



Incorporar el botón “me gusta” de Facebook utilizando un <iframe>

Si se utiliza un iframe, no es necesario cargar ninguna librería javascript en la página en la que se coloca el botón, ya que en el iframe se carga una página completa de la web de facebook con la URL “http://www.facebook.com/plugins/like.php”.

En la llamada a dicha URL se añaden los argumentos para determinar el tipo de botón, dimensiones, etc…

Ejemplo:

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2FURL_A_LA_QUE_SE_REFIERE&amp;
width=500&amp;layout=standard&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=30"
     scrolling="no"
     frameborder="0"
     style="border:none; overflow:hidden; width:500px; height:30px;"
     allowTransparency="true">
</iframe>

Y el resultado es:


Layouts

La presentación deseada del botón de facebook puede ser especificada mediante el argumento “layout”. Además del valor “standard” que ya hemos utilizado en los ejemplos anteriores, admite otros tres valores: “button_count”, “box_count” y “button”, con el siguiente resultado:

layout=”button_count”

layout=”box_count”

layout=”button”

Otros argumentos

Los ejemplos que hemos presentado utilizan los argumentos layout, width, etc. para determinar el aspecto y la funcionalidad del botón de facebook. Otros argumentos que podemos utilizar son:

 

  • action – “like” o “recommend” (por defecto, “like”). Es el texto que aparece en el interior del botón. Si el idioma no es inglés, se presenta la traducción correspondiente.
  • colorscheme – “light” o “dark” (“light”).
  • href – La URL absoluta a la que se refiere el botón de “me gusta”. En las versiones XFBML y HTML5, si no es especifica se asume que es la URL de la página en la que se encuentra el botón
  • kid_directed_site “false” o “true” (“false”). Debe ser puesto a “true” si el contenido del sitio está dirigido a niños menores de 13 años.
  • ref – Una etiqueta para poder hacer un seguimiento de las páginas en donde se ha utilizado el botón. Debe tener menos de 50 caracteres, y puede contener caracteres alfanuméricos y los símbolos +/=-.:_
  • share  – “false” o “true” (“false”). Especifica si se quiere incluir un botón “Compartir” a la derecha del botón “me gusta”.
  • show_faces –  “false” o “true” (“false”). Especifica si se presentarán fotos de los perfiles de los usuarios bajo el botón de “me gusta”. Si el sitio está dirigido a niños menores de 13 años, debe ponerse a “false”. Sólo se aplica si el layout es “standard”.

 

Referencias

Facebook Developers: Like Button

 Publicado por en 3:47 pm

 Deja un comentario

(requerido)

(requerido)