Gestionar clics en botones de redes sociales

En cualquier sitio web que se implementen los nuevos botones me gusta (like) de Facebook, o +1 de Google, o tweet de Twitter podemos ver que en realidad todos se basan en el mismo sistema, un código javascript que construye un iframe y sobre el cuál es que se carga todo el código para gestionar nuestras interacciones en cada una de estas redes sociales.

Acceder al contenido de estos iframe desde nuestra web con javascript no está permitido porque da un error del tipo Unsafe JavaScript attempt to access frame with URL tu dominio from frame with URL dominio del script. Domains, protocols and ports must match. Lo que viene a decirnos este error es la prohibición de acceder mediante javascript a un iframe con un dominio distinto al nuestro por temas de seguridad.

Teniendo en cuenta esto la única solución que nos queda es depender de las interfaces de programación de aplicaciones (APIs) de cada una de estas redes sociales y ver si implementan funciones callback para capturar este tipo de eventos.

La buena noticias es que tanto Facebook, Google y Twitter tienen contempladas en sus respectivas interfaces de programación (APIs) estos casos. En este post voy a centrarme en capturar y gestionar los clics realizados en los botones de interacción de cada una de estas redes sociales utilizando funciones callback implementadas en sus APIs.

Gestionar los clics en el botón me gusta de Facebook

Para ello en vez del código proporcionado por la página de desarrolladores de Facebook tenemos que escribir el siguiente código:

<script>
    window.fbAsyncInit = function() {
        FB.init({appId: 'FACEBOOK_APP_ID', status: true, cookie: true, xfbml: true});
        FB.Event.subscribe('edge.create', function(href, widget) {
            // Hacer algo, por ejemplo, realizar el seguimiento del clic en el botón "Me Gusta" aquí
        });
    };
    (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/all.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

Nota: es muy importante poner el FACEBOOK_APP_ID dónde lo he puesto porque por defecto viene como variable en la url del plugin all.js y esto produce conflictos de autentificación en Facebook, el error que nos daría es el siguiente Uncaught Error: FB.Auth.setAuthResponse only compatible with OAuth2.

Tip: Para capturar los No Me Gusta lo que debemos hacer es duplicar este código y sustituir edge.create por edge.remove.

Esta es la url de Facebook para el plugin Like.

Cómo capturar y hacer el seguimiento de clics en el botón de Google plus (+1)

Google es mucho más sencillo que Facebook de cara a los desarrolladores, lo único que tenemos que hacer es agregar en el tag plusone un atributo adicional llamado callback, por ejemplo el código para un botón de google plus de tamaño medio sería el siguiente:

<g:plusone size="medium" callback="plusone_vote"></g:plusone>

La función plusone_vote la declaramos como una función normal dentro de nuestros archivos javascript.

Aquí os dejo la página destinada a implementar y personalizar el botón +1 de Google.

Capturar y hacer el seguimiento de tweets

Twitter es más parecido a Facebook en esta implementación de hecho tal vez un poco más complicado porque desde la web de desarrolladores de Twitter el código que se nos da carga el archivo javascript de manera lineal y necesitamos que se cargue de manera asíncrona, el código sería el siguiente:

<script type="text/javascript">
        window.twttr = (function (d,s,id) {
            var t, js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
            js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
            return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
        }(document, "script", "twitter-wjs"));
        // Esperamos a que se carguen los recursos de manera asíncrona
        twttr.ready(function (twttr) {
            // Ahora personalizamos nuestro eventos
            twttr.events.bind('tweet', function(event) {
                // Hacer algo, por ejemplo, realizar el seguimiento del tweet aquí
             });
        });
</script>

Nota: podemos consultar la lista de todos los eventos disponibles en la siguiente página de desarrolladores de Twitter.

Este es el enlace con toda la información para comenzar a usar este servicio y crear sus propios botones tweet personalizados.

Para Tuenti no es necesario ninguna función callback ya que no crea iframe en su nuevo botón de compartir.

Dentro de cada función callback se puede utilizar jquery.