Guía de programación de Botones Sociales (II): Facebook

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=”450data-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

 

Una revista cultural y algo más

 

By | 2018-05-14T12:17:23+00:00 8 febrero, 2013|6 Comments

6 Comments

  1. isaac 1 marzo, 2015 at 3:36 pm - Reply

    ¿hola sabrías porque el color dark en los plugins de facebook no se visualiza?

    Si vas a los ejemplos de la página de facebook se verán en negro cuando se pone dark, pero si copias su código y lo agregas a tu documento htm no se obtiene ese fondo negro.

    • Gloria Bretones 4 marzo, 2015 at 1:09 pm - Reply

      Seguramente el CSS de tu web está interfiriendo con el CSS de Facebook. ¡Saludos!

  2. Félix 17 octubre, 2015 at 9:47 pm - Reply

    Hola, muchas gracias por la guía… Tengo una pregunta: ¿Cómo puedo cambiar dinámicamente el link al que apuntan los botones? He cambiado el atributo ‘data-href’, pero aparentemente el script debe ejecutarse nuevamente para que esto funcione.
    Me explico:
    Tengo un sitio dinámico que usa ajax para cargar sólo el código estrictamente diferente al momento de pasar de una página a otra. En concreto, es una galería de imágenesm y al pie de ésta tengo los botones para dar like y compartir. En otra sección del a página desplegada tengo enlaces para cambiar de galería. Al hacerlo, y con ayuda de ajax, sólo recargo un bloque …, que contiene el título, la descripción y las miniaturas de la nueva galería visualizada. El problema es que los botones de like y share siguen apuntando a la galería anterior, a pesar de cambiar el atributo ‘data-href’ al momento de cargar la nueva galería.
    Atento a cualquier comentario. Saludos!

    • Gloria Bretones 20 octubre, 2015 at 9:25 am - Reply

      Gracias por comentar Félix. En realidad para eso tienes que modificar el ajax de la galería, no sólo el código por el cual muestras la galería y los botones, sino también el script, sino no te va a funcionar. De todas maneras te aconsejo una galería que ya te incluya esta opción de serie, que las hay según lenguaje de programación o CMS que uses, como plugin o complemento (PHP, ASP.net, WordPress, Joomla, drupal, etc…). Un saludo.

Leave A Comment

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.