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.

Sin-título-1

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.

Comentarios

Anónimo ha dicho que…
nada funciona.... algo que como principiante pueda estar obviando y no este incluido en este post ?!

gracias !
Reynier de la Rosa ha dicho que…
manda el código a ver que puede ser
POP ha dicho que…
a continuacion te dejo el codigo de tweet que copie de este post, y un adicional para facebook, lo intrigante que el de facebook funciona pero solo para cualquier link que no sea una pagina de facebook. y con el el de tweet no funciona.
si me tiras una punta para continuar trabajando te lo agradesco.
saludos !
te dejo un link con un txt porque no supe porner el codigo sin que me tire error en este comentario.
https://dl.dropbox.com/u/9116735/trak_facebook_tweet.txt

gracias !