microTECHing
7Nov/110

Problemas entre mootools y API de facebook en Internet Explorer

Nos hemos encontrado con el problema de que la librería de validaciones de joomla basada en mootools había dejado de funcionar en IE7 y IE8 silenciosamente.

Y decimos silenciosamente, porque no había ningún error javascript en la consola de Internet Explorer.

Esto nos ocurría en una web en joomla que cargaba la librería 1.12 de mootools y el 'validate.js' del framework de Joomla 1.5 basado en mootools.

Eliminando código a lo bestia de nuestro 'index.php', dimos con que el problema estaba en la carga del API de facebook.

Estábamos cargando el api en el 'body' de la siguiente manera:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_ES/all.js"></script>
<script type="text/javascript">
        FB.init({appId: '116864551700695', status: true, cookie: true, xfbml: true});
</script>

Para solucionar el problema, dejamos en el 'body' solo el div "fb-root', y el javascript nos lo llevamos al 'head' de esta forma:

<script language="javascript" type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
        FB.init({appId: '116864551700695', status: true, cookie: true, xfbml: true});
});
</script>

Lanzando el fb.init cuando el dom esta completo, la validación de mootools vuelve a funcionar correctamente, y las funciones de facebook, también.

Espero os ayude!

1Ago/110

SexyBookmarks la opción elegida para compartir en redes sociales

Al final, de todos los plugins posibles para compartir en redes sociales de WP nos hemos decantado por "SexyBookmarks".

Os parece una buena opción?

7May/1191

Sistema de comentarios de Facebook en tu web con moderación

Cada vez es más usual ver sitios webs que utilizan el plugin de facebook para comentarios.
De esta forma nos podemos ahorrar desarrollar el sistema de comentarios, o como mínimo tener que maquetarlo para nuestro WP, Joomla, Drupal, etc…, y además es un sistema muy práctico y atractivo para los usuarios.

1

Empezaremos visitando la página del plugin donde se explica cómo funciona: http://developers.facebook.com/docs/reference/plugins/comments/
Podemos cambiar los parámetros de la caja al gusto y darle a “Get Code” y obtendremos un código como el siguiente:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_ES/all.js#xfbml=1"></script>
<fb:comments href="#CURRENT_URL#" num_posts="XX" width="YYY"></fb:comments>

Como veis, he puesto el idioma “es_ES”, y hago hincapié en la url. Tenemos que poner la actual. Por ejemplo en Joomla sería: <?php echo JURI::current(); ?>

2

Creamos una aplicación desde nuestro perfil de facebook para poder controlar los comentarios del plugin.
Para ello, vamos a: http://www.facebook.com/developers/
Una vez creada, aseguraros que tenéis el Id de la aplicación, y que le habéis especificado la url y el dominio como en la imagen:

Si no, tenéis que darle a “Editar configuración” e ir a la pestaña “Sitio Web” como:

3

El siguiente paso es añadir la información del app id que hemos obtenido en los metatags de la página.

Lo suyo es poner los metas “<meta property="fb:app_id" content="186556708058144"/>” y “<meta property="fb:admins" content="#UID#"/>” en el <head> de nuestro html y añadir el namespace de facebook al tag html “<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" xmlns:fb="http://www.facebook.com/2008/fbml">”. El segundo meta (fb:admins) no es necesario, pero siempre está bien ponerlo con el UID del mismo perfil que crea la aplicación como mínimo (podemos poner más separados por comas).

4

Por último ya solo nos queda probarlo e ir a la herramienta que nos ofrece facebook para gestionar los comentarios en: http://developers.facebook.com/tools/comments

Desde aquí además, en la opción “Configurar” podemos seleccionar la opción “Déjame aprobar cada comentario antes de ser mostrado a todos.”

Pues nada.
Podéis ver un ejemplo de cómo queda en nuestra página corporativa recién estrenada.
Esperamos que os haya ayudado este artículo.

Happy coding!!

23Mar/1110

Agilizando el registro con Facebook Connect

Logo facebook developersVamos a intentar resumir lo que ya se ha hablado en tantos sitios sobre cómo se integra facebook-connect.

1º Documentarse:
Si queremos leer un poco de qué va esto, podemos partir de: http://developers.facebook.com/docs/guides/web/

2º Registrar aplicación:
Vemos que el primer paso es registrar nuestra aplicación y conseguir el famoso APP ID.
Para ello solo tenemos que ir a: http://developers.facebook.com/setup/
Debemos introducir el nombre de nuestra web, la url, y seleccionar el idioma.

Nos saldrá un pantalla diciendo como tenemos que validar nuestro usuario.
El mensaje es bastante mareante. Realmente lo único que tenemos que hacer es abrir una nueva pestaña y poner la url: http://www.facebook.com/confirmphone.php?,&confirm_phone=
Entonces al recibir el sms, ponemos el código que nos dan y listo.

3º Hola Mundo!:
Tras crear la aplicación, nos dará los datos del id y el código secreto (apúntalo!), y tendremos un código de ejemplo que se parecerá a esto:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script type="text/javascript">
    FB.init({appId: '#FB_API_KEY#', status: true, cookie: true, xfbml: true});
</script>
<fb:login-button autologoutlink="true"></fb:login-button>

Con esto, ya tenemos el botón de facebook connect en nuestra página, que podrá usar el usuario para dar permisos a nuestra web a manejar el usuario de la sesión de facebook.

4º A funcionar!:
Ahora tenemos que hacer que si el usuario esta logeado ya mediante facebook, recoja los datos de la sesión, y los ponga en nuestro formulario.
Para ello, usaremos el método 'FB.getLoginStatus' y usaremos el API con el método 'FB.api' para recoger los datos del usuario de facebook conectado.
El código que tendremos que insertar después puede ser algo asi como:

<script type="text/javascript">
FB.getLoginStatus(function(response) { get_fb_user_data(response); });

FB.Event.subscribe('auth.login', function(response) { get_fb_user_data(response); });
</script>

Con esto, añadimos un manejador 'get_fb_user_data' para cuando se produzca el evento de 'login' recoger los datos, y hacemos que al cargar la pagina, compruebe el estado de la sesion y añada los datos del usuario al formulario con esa misma funcion.

Por supuesto, ni que decir cabe, que es más que recomendable, comprobar que exista la propiedad, y que su valor sea distinto de 'undefined'.
El código quedaría como:

<script type="text/javascript">

function get_fb_user_data(response){
    if (response.session) {
        // logged in and connected user, someone you know
        var uid = response.session.uid;

        FB.api(uid, function(response) {
            set_fb(document.forms.WBForm.Name, response.first_name);
            set_fb(document.forms.WBForm.Surname, response.last_name);
            set_fb(document.forms.WBForm.Email, response.email);
            var birthdate = get_fb(response.birthday);
            birthdateSplit = birthdate.split('/');
            set_fb(document.forms.WBForm.BirthDate, birthdateSplit[1]+'/'+birthdateSplit[0]+'/'+birthdateSplit[2]);
        });
    } else {
        // no user session available, someone you dont know
    }
}


function set_fb(elem, fb_elem){
    if (elem){
            if (elem.value == '' || (elem.value == '01/01/0001')){
                elem.value = get_fb(fb_elem);
            }
    }
}

function get_fb(elem){
    if (elem){
        if (typeof(elem) != 'undefined'){
            if (elem != 'undefined') {
            return elem;
            }
        }
    }

    return '';
}


</script>

Como veréis en la documentación, para recoger ciertos campos del usuario, son necesarios algunos permisos especiales.
Para solicitarlos, solo tenéis que añadir el atributo 'perm' al botón de login de facebook. Como:
<p><fb:login-button autologoutlink="true" perms="email,user_birthday,user_hometown,user_location,user_website"></fb:login-button></p>

Pues nada... Eso es todo.
Solo avisaros de que si queréis recoger datos como el teléfono, o la dirección de contacto, va a estar un poco difícil por ahora (23/03/2011), tal y como podemos ver en este hilo de meneame.

Happy coding!

17Feb/110

Añadir Facebook Page a Twitterfeed

Hoy me he encontrado con el problema de que twitterfeed solo conectaba las entradas de un blog con el muro de un perfil de facebook, pero no actualizaba los datos en una pagina creada de facebook.

La solución: Se crea un nuevo Feed en twitterfeed. El primer paso es igual que el resto: nombre del feed y url a los feeds del blog, ademas de otras opciones en advanced settings.

El segundo paso es el importante. Salen las diferentes cuentas de las redes sociales (facebook, twitter, ...). Pinchamos en facebook, nos autenticamos y en el desplegable que sale, por defecto aparece No page, publish to my wall. Bajo de esa opcion nos saldra el nombre de la pagina que tenemos en facebook (y tambien las aplicaciones que tenemos abiertas). Seleccionamos la pagina y listo.

Este proceso hay que repetirlo (crear un new feed) por cada pagina que tengamos si es que tenemos mas de una.

7Feb/112

Siete interesantes tecnologías que usa facebook

Para mantener a los 600 millones de usuarios que sostiene facebook, se tiene que tener una muy buena arquitectura de software.

En el artículo de Alt1040, tenemos la explicación completa. Nosotros solo vamos a enumerar esas 7 tecnologías:

tecnologias-facebook Linux
Cassandra
Hive
Thrift
Scribe
HipHop for PHP
Tornado