Insertar un botón de Facebook en tu web: cómo y por qué

Desde hace tiempo, es habitual encontrar el popular botón “Me gusta” de Facebook fuera del te­rri­to­rio de las redes sociales: el conocido “Like Button” para la in­ter­ac­ción social ostenta su lugar de honor en páginas web, blogs y apli­ca­cio­nes web de diversa índole, de tal modo que los usuarios que las utilizan puedan mostrar pú­bli­ca­me­n­te su interés por una compañía, un personaje o una temática. Además, con el botón “Compartir” de Facebook es posible di­s­tri­buir una pu­bli­ca­ción que ha de­s­pe­r­ta­do interés, co­n­vi­r­tié­n­do­se así en una vía de rápida expansión para marcas y noticias. Ahora bien, ¿qué hay detrás de estos plugins sociales cuya in­te­gra­ción en páginas web casi se ha co­n­ve­r­ti­do en una obli­ga­ción? Sigue leyendo si quieres saber cómo puedes crear tu propio botón de Facebook, así como in­fo­r­mar­te del trasfondo legal derivado de su im­ple­me­n­ta­ción y de posibles al­te­r­na­ti­vas.

Las elementos gráficos “Me gusta” y “Compartir” de Facebook pe­r­te­ne­cen a los co­m­po­ne­n­tes centrales del concepto de la red social. Estos botones, cuyo aspecto se ha visto mo­di­fi­ca­do en numerosas ocasiones, son los puntos de contacto que permiten la in­te­r­co­ne­xión entre los usuarios y la di­s­tri­bu­ción de contenido. Las redes sociales más recientes no han dudado en apro­piar­se de la idea y hace tiempo que han de­sa­rro­lla­do botones similares.

Desde 2010 es posible integrar estos elementos en proyectos web fuera del contexto de Facebook, para lo cual la pla­ta­fo­r­ma pone a di­s­po­si­ción de los ad­mi­ni­s­tra­do­res web sus propios plugins sociales. Estas ex­te­n­sio­nes, di­s­po­ni­bles como iFrame o como apli­ca­ción Ja­va­S­cri­pt, son muy fáciles de im­ple­me­n­tar gracias al co­n­fi­gu­ra­dor creado a tal efecto por la mu­l­ti­na­cio­nal, que los ajusta a cada proyecto. Muchos CMS, como WordPress, disponen incluso de ex­te­n­sio­nes que si­m­pli­fi­can eno­r­me­me­n­te su in­te­gra­ción.

Las redes sociales son canales ideales para di­s­tri­buir contenido y mantener así el contacto con clientes, lectores y se­gui­do­res. Con las me­n­cio­na­das funciones para indicar que algo interesa o que se desea re­co­me­n­dar o comentar, Facebook co­n­s­ti­tu­ye la base perfecta para ello. Este tipo de feedback por parte del usuario, conocido como señales sociales (social signals), juega un papel fu­n­da­me­n­tal en el éxito digital de una compañía por diversos motivos:

• Cuantas más reac­cio­nes sea capaz de provocar una pu­bli­ca­ción, mayor es la pro­ba­bi­li­dad de que otros autores, blogueros o usuarios se interesen por ella y enlacen a la página web de donde procede. Es así como un proyecto obtiene enlaces si­g­ni­fi­ca­ti­vos con una in­flue­n­cia positiva en su cla­si­fi­ca­ción en los bu­s­ca­do­res.

• Enlaces, menciones y “Me gusta” aumentan el radio de alcance de una pu­bli­ca­ción y la autoridad de la compañía en relación con palabras clave re­le­va­n­tes, algo que, por un lado, se convierte en una gran ventaja a la hora de reclutar clientes, lectores o fans y, por el otro, tiene efectos positivos en la repu­tación de la página web.

• A largo plazo las señales sociales también tienen un efecto positivo en el aumento del tráfico de visitas, otro aspecto que mejora el ranking en las listas de re­su­l­ta­dos de los bu­s­ca­do­res.

Si bien las señales sociales no cuentan ofi­cia­l­me­n­te como factores de ranking en Google y demás bu­s­ca­do­res, sí es cierto que tienen cierta in­flue­n­cia en el po­si­cio­na­mie­n­to de una web. Condición fu­n­da­me­n­tal para ello es que el contenido sea in­fo­r­ma­ti­vo y de calidad y que invite a la in­ter­ac­ción, ya sea re­co­me­n­da­n­do o co­me­n­ta­n­do, por lo que los botones de Facebook tienen un papel fu­n­da­me­n­tal en su di­s­tri­bu­ción.

Fi­na­l­me­n­te, haz clic en “Obtener código” (Get code) para generar el código del botón. Tras se­le­c­cio­nar tu Facebook App ID emerge una ventana que incluye, por un lado, el código de in­cru­s­ta­ción del SDK (Software De­ve­lo­p­me­nt Kit) para Ja­va­S­cri­pt, que se ha de integrar en primer lugar en la página web —idea­l­me­n­te a co­n­ti­nua­ción de la etiqueta <body> de apertura—, y el código del plugin en sí, que has de copiar en el lugar del documento de HTML donde tiene que aparecer el botón.

El botón para “Compartir” en Facebook también se puede generar de forma in­de­pe­n­die­n­te al de “Me gusta”. Para ello se abre el punto “Compartir” en el menú y se siguen los mismos pasos que hemos seguido para el segundo.

Aun cuando iFrame y Ja­va­S­cri­pt son muy similares en las funciones básicas, integrar los botones de Facebook en una u otra variante tiene sus di­fe­re­n­cias. Como ambos plugins son de Facebook, la red reconoce au­to­má­ti­ca­me­n­te si el usuario ha iniciado sesión en la pla­ta­fo­r­ma para poder mostrar en este caso una forma pe­r­so­na­li­za­da del botón. Si se ha utilizado iFrame para in­te­grar­lo se visualiza una lista de todos los contactos del usuario (con foto de perfil) a quienes también les ha gustado la página web o la pu­bli­ca­ción. Si este no ha abierto una sesión o no está siquiera re­gi­s­tra­do como usuario, se le presenta una in­vi­ta­ción para que inicie sesión o abra una cuenta de usuario. Además, el plugin de Ja­va­S­cri­pt garantiza al usuario la po­si­bi­li­dad de añadir un co­me­n­ta­rio cuando hace clic en “Me gusta”. Al contrario que iFrame, co­n­si­s­te­n­te en un simple elemento HTML, la versión Ja­va­S­cri­pt requiere añadir el kit de de­sa­rro­llo de software (SDK) de Facebook a la línea de código. La in­vi­ta­ción de inicio de sesión en la red social también se integra con ayuda de este potente kit para de­sa­rro­lla­do­res. Para que Facebook pueda mostrar los botones pe­r­so­na­li­za­dos, el navegador del usuario establece la conexión au­to­má­ti­ca­me­n­te con el servidor de la mu­l­ti­na­cio­nal. Cuando este usuario abre una página con el plugin de Facebook puede ide­n­ti­fi­car­lo ine­quí­vo­ca­me­n­te si ha iniciado sesión en la red social o lo ha hecho an­te­rio­r­me­n­te, pero, al mismo tiempo, la red social también recibe in­fo­r­ma­ción sobre el momento en que inicia sesión o sobre el navegador que utiliza, su ide­n­ti­fi­ca­dor personal o la dirección IP. Na­tu­ra­l­me­n­te, la empresa americana se reserva el derecho de almacenar y utilizar esta in­fo­r­ma­ción para mejorar su producto y sus servicios, así como para optimizar los anuncios que se publican en su pla­ta­fo­r­ma, pero esta ci­r­cu­n­s­ta­n­cia ha conducido a un primer fallo de la audiencia regional de Dü­s­se­l­do­rf en marzo de 2016, que declara ilegítimo el método con que se integran los botones sociales de Facebook y que podría sentar ejemplo.

La Fe­de­ra­ción alemana de Aso­cia­cio­nes de Co­n­su­mi­do­res (VZBV) de Renania del Norte, un organismo que, a semejanza de la española OCU (Or­ga­ni­za­ción de Co­n­su­mi­do­res y Usuarios), tiene como fin la re­pre­se­n­ta­ción de los intereses de los co­n­su­mi­do­res y fue quien interpuso la demanda que condujo a este fallo. Según se afirma en sus estatutos, la misión principal de la aso­cia­ción es perseguir con acciones jurídicas cualquier in­fra­c­ción de los derechos de los co­n­su­mi­do­res o de las leyes del libre comercio. En este caso la demanda se dirigía contra Fashion ID GmbH & Co. KG, empresa su­b­si­dia­ria de la marca de moda Peek & Clo­p­pe­n­bu­rg, y tenía como objeto la forma como integraba el botón “Me gusta” en su tienda online fashionid.de. La empresa se había decantado, para ello, por la me­n­cio­na­da variante iFrame.

Co­n­s­cie­n­te de la pro­ble­má­ti­ca legal que conlleva el envío de datos de los usuarios a Facebook, la compañía pensaba que con una Política de Pri­va­ci­dad accesible desde cualquier página de la tienda, que informaba al usuario de la uti­li­za­ción del plugin de Facebook y de la re­co­le­c­ción de datos que este implica, se estaba cubriendo las espaldas. Además, la empresa re­co­me­n­da­ba cerrar sesión en la red social, así como usar un de­no­mi­na­do blo­quea­dor de Facebook, una extensión para el navegador con el que se puede des­ac­ti­var el plugin de la red social. Sin embargo, para la Aso­cia­ción de Pro­te­c­ción al Co­n­su­mi­dor estas medidas no eran nada sa­ti­s­fa­c­to­rias. Los puntos que fu­n­da­me­n­ta­ron la demanda fueron:

• El botón “Me gusta” sirve úni­ca­me­n­te a pro­pó­si­tos pu­bli­ci­ta­rios.

• Sin el co­n­se­n­ti­mie­n­to previo del usuario, no es legítimo enviar la dirección IP, que permite su ide­n­ti­fi­ca­ción.

• La de­cla­ra­ción de la Política de Pri­va­ci­dad no tiene lugar de antemano ni informa de­bi­da­me­n­te de la forma en que la extensión recoge los datos ni del uso que les da.

• La in­fo­r­ma­ción que se pro­po­r­cio­na al usuario sobre las posibles medidas de pro­te­c­ción son solo correctas en parte, ya que cerrar sesión en la red social no basta si antes ya se han guardado las cookies.

Basándose en el claro carácter personal de los datos que se re­co­le­c­tan y envían, la audiencia pro­vi­n­cial de Dü­s­se­l­do­rf dio la razón a la VZBV. El tribunal fue unánime también en cuanto a que la compañía no había cumplido su­fi­cie­n­te­me­n­te con la obli­ga­ción de informar al usuario según ordena la ju­ri­s­pru­de­n­cia alemana: ni solicita el co­n­se­n­ti­mie­n­to del usuario con an­te­la­ción ni le informa de la re­co­le­c­ción de los datos antes de que el plugin efe­c­ti­va­me­n­te recoja y envíe los datos a la empresa es­ta­dou­ni­de­n­se.

Ya antes de que se hiciera pública la sentencia, que supuso a la empresa gastos de alrededor de 13.000 euros, el botón de Facebook estándar se sustituye por una solución técnica en dos pasos que implica una acción concreta del usuario, ya que el plugin está por defecto des­ac­ti­va­do hasta que el usuario lo activa ma­nua­l­me­n­te para poder usarlo, si así lo desea. Haciendo clic en “Des­ac­ti­var Social Media” se revierte la orden y el plugin de Facebook deja de re­co­le­c­tar datos.

A pesar de que la me­n­cio­na­da al­te­r­na­ti­va en dos pasos ya había sido im­ple­me­n­ta­da durante el proceso, el tribunal no la convirtió en objeto del mismo, por lo que hasta hoy no existe aún un po­si­cio­na­mie­n­to jurídico concreto a propósito de esta forma de integrar los botones de Facebook. Lo cierto es, no obstante, que este método cumple las co­n­di­cio­nes exigidas al menos en parte. Mientras el plugin permanece des­ac­ti­va­do, el usuario puede leer in­fo­r­ma­ción al respecto. Con esto, los ad­mi­ni­s­tra­do­res de la página web cumplen con su obli­ga­ción de informar al usuario y al mismo tiempo impiden la entrega inmediata de sus datos pe­r­so­na­les a Facebook, pero tampoco supone una solución ju­rí­di­ca­me­n­te sin mácula: según la ley alemana que regula los medios te­le­má­ti­cos, la au­to­ri­za­ción del usuario ha de ser pro­to­co­li­za­da.

Y esto sin contar el dudoso efecto de un segundo clic en la tasa general de clics del botón social en una página web.

En 2011, la revista alemana de in­fo­r­má­ti­ca Heise de­sa­rro­lló una primera versión de este concepto en dos pasos según el cual, por defecto, los botones sociales se cargan para solo poder ser uti­li­za­dos una vez activados. El usuario tendría la libertad de decidir por sí mismo si acepta enviar in­fo­r­ma­ción a Facebook o no, pues solo si ha activado la función puede uti­li­zar­lo y compartir el contenido que le ha llamado la atención. Esta opción requiere la pre­se­n­ta­ción, de forma su­fi­cie­n­te­me­n­te visible y sa­ti­s­fa­c­to­ria, de la in­fo­r­ma­ción sobre la re­co­le­c­ción y el envío de datos, pero tampoco cumple la ley al cien por cien. Así, en 2014, cuando el equipo de de­sa­rro­lla­do­res de Heise presenta a Shariff como sucesor oficial de aquella primera y ru­di­me­n­ta­ria solución para compartir contenido en las redes sociales sin infringir el derecho a la pri­va­ci­dad. De­sa­rro­lla­do como proyecto open source en la pla­ta­fo­r­ma GitHub, el código está di­s­po­ni­ble aquí para su descarga. El botón Shariff  para compartir es fu­n­da­me­n­ta­l­me­n­te un enlace estático diseñado con CSS (shariff.min.css) para que tenga el mismo aspecto que los botones de Facebook, Google+ o Twitter. Con este objetivo sus de­sa­rro­lla­do­res re­cu­rrie­ron a iconos ve­c­to­ria­les flexibles, en lugar de a los ha­bi­tua­les gráficos, porque mantienen la nitidez incluso en las pantallas de mayor re­so­lu­ción y pueden ser colocados en el servidor propio o in­te­gra­dos con la red de entrega de co­n­te­ni­dos MaxCDN. Para no tener que añadir ma­nua­l­me­n­te el URL del enlace cada vez, Shariff lo escribe au­to­má­ti­ca­me­n­te por Ja­va­S­cri­pt (shariff.min.js) en el código fuente. El botón se im­ple­me­n­ta con ayuda de un co­n­te­ne­dor <div> y la clase shariff, que se coloca in­di­s­ti­n­ta­me­n­te dentro del <body> del proyecto web. En su forma más simple, el código fuente de una página podría resultar como el siguiente:

Con un co­m­po­ne­n­te opcional en el servidor es posible incluso conocer y mostrar el número de usuarios que han co­m­pa­r­ti­do contenido. Heise ha de­sa­rro­lla­do para ello tres backends, así como módulos para Facebook, Google+ y Twitter: una versión PHP, otra Perl y otra Node.js. Mediante la API co­rre­s­po­n­die­n­te, el backend envía una petición al servidor de las redes, obtiene una serie de metadatos como respuesta y extrae de ellos la in­fo­r­ma­ción sobre la fre­cue­n­cia con que el URL en cuestión se ha co­m­pa­r­ti­do.

Conectar tu proyecto con las redes sociales puede agilizar co­n­si­de­ra­ble­me­n­te la di­s­tri­bu­ción del contenido publicado, no solo en Facebook, sino en todas las demás pla­ta­fo­r­mas. Si eres capaz de mantener vivo el diálogo con los usuarios y publicas re­gu­la­r­me­n­te buenos temas, todo apunta a que podrás convertir las señales sociales en tráfico a largo plazo. Sin embargo, es co­n­ve­nie­n­te di­s­ta­n­ciar­se de los plugins sociales que ofrecen pla­ta­fo­r­mas como Facebook, Google+ o Twitter para integrar sus botones en las páginas web, porque, aunque té­c­ni­ca­me­n­te sea muy fácil de hacer, no es co­m­ple­ta­me­n­te fiable en relación con la pro­te­c­ción de datos. Al menos desde la sentencia de Dü­s­se­l­do­rf me­n­cio­na­da an­te­rio­r­me­n­te, la po­si­bi­li­dad de recibir una ad­ve­r­te­n­cia por parte de las au­to­ri­da­des pe­r­ti­ne­n­tes ha dejado de ser algo abstracto.

Una solución al­te­r­na­ti­va como el me­n­cio­na­do proyecto Shariff, basado en enlaces estáticos, no envía ningún tipo de dato a los se­r­vi­do­res de las diversas pla­ta­fo­r­mas sociales antes de que el usuario lo haya au­to­ri­za­do ex­pre­sa­me­n­te. Dado que estos enlaces pueden adoptar el aspecto visual de los botones sociales que todo el mundo conoce, se matan dos pájaros de un tiro: cumplir con el deber de informar y disfrutar de las ventajas de conectar la página web con el perfil social del proyecto.