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.

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.