Volvemos con la segunda parte de esta (esperamos) útil guía, dando un repaso a los botones sociales de Facebook. En este link podréis encontrar todos los botones y widgets de esta red social.

Como en el caso de Twitter, el script va a ser el mismo para todos los botones:

<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_LA/all.js#xfbml=1»;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

1. Botón Me gusta (http://developers.facebook.com/docs/reference/plugins/like/)

Botón Me gusta Fecebook

Este botón permite a un usuario indicar que le gusta un determinado contenido en su perfil de Facebook. Analicemos su código HTML:

<div class=»fb-like» data-href=»URL» data-send=»true» data-layout=»button_count» data-width=»450″ data-show-faces=»false» data-font=»segoe ui» data-colorscheme=»dark» data-action=»recommend»></div>

data-href: Este atributo, obligatorio, indica la url donde se encuentra el contenido que el usuario va a indicar que le gusta.

data-send: Este atributo indica si el botón Me gusta debe o no ir acompañado del botón Enviar. Es opcional y, aunque es posible asignarle el valor false, realmente sólo es necesario especificarlo cuando queremos que dicho botón aparezca, en cuyo caso el valor asociado será true.

data-layout: Opcional, este atributo indica el modelo de botón a mostrar. El valor por defecto es standard, el cual especifica, en formato de frase, el número de personas a las que les gusta esa url (ejemplo: «A Julia, a Luis y a 306 personas más les gusta esto»). El valor button_count mostrará el botón junto con una pequeña caja lateral que indica el número de Me gusta, mientras que box_count mostrará esta misma caja, pero situada sobre el botón.

data-width: Se refiere al ancho en píxeles del botón más todos sus elementos asociados. Opcional, su valor por defecto es 450.

data-show-faces: Indica si se deben mostrar o no las fotos de perfil de los amigos a los que les gusta la url indicada. Es opcional, puesto que su valor por defecto es true, sólo si le asignamos el valor false no se mostrarán estas fotos.

data-font: Opcional, indica la fuente tipográfica utilizada en el botón. Las opciones disponibles son las siguientes, teniendo su valor el mismo nombre:

arial
lucida grande
segoe ui
tahoma
tebruchet ms
verdana

data-colorscheme: También opcional, especifica si el botón es claro u oscuro, siendo claro por defecto (valor light) y siendo el valor asociado para el color oscuro dark.

data-action: Opcional, indica el verbo que se mostrará en el botón. Su valor por defecto es like (Me gusta), intercambiable por recommend (Recomendar).

2. Botón Seguir ()

Botón Seguir Facebook

Este botón permite a un usuario de Facebook seguir a otro usuario o página en esta red social. Los atributos variables, data-href, data-layout, data-width, data-show-faces, data-font y data-colorscheme, son comunes al botón anterior. El código HTML es el siguiente:

<div class=»fb-follow» data-href=»URL» data-layout=»button_count» data-width=»450» data-show-faces=»false» data-font=»arial» data-colorscheme=»light»></div>

3. Botón Login (http://developers.facebook.com/docs/reference/plugins/login/)

Botón Login Facebook

Este botón permite a un usuario iniciar sesión en nuestro sitio web utilizando su nombre de usuario y contraseña de Facebook. Tiene como atributos comunes a los dos botones anteriores data-width y data-show-faces.

<div class=»fb-login-button» data-max-rows=»3″ data-width=»450″ data-show-faces=»true»></div>

data-max-rows: Este tercer atributo, asociado a data-show-faces, hace referencia al número de filas que se pueden mostrar de avatares de amigos que utilizan este tipo de inicio de sesión.

4. Botón Enviar (http://developers.facebook.com/docs/reference/plugins/send/)

Botón Enviar Facebook

Este botón, muy similar al primero, el Botón Me gusta, permite enviar la url de un determinado contenido para compartirlo con uno o varios amigos específicos en Facebook a través de mensaje privado. Comparte los atributos data-href, data-font y data-colorscheme con los botones anteriores y su código HTML es el siguiente:

<div class=»fb-send» data-href=»URL» data-font=»arial» data-colorscheme=»light»></div>

Y esto ha sido todo por hoy. Volvemos la semana que viene con más cosillas. Y ya sabes, si te está resultando útil esta guía, ¡comparte!.

GUÍA DE PROGRAMACIÓN DE BOTONES SOCIALES

  1. Twitter
  2. Facebook