microTECHing
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.

25Ene/110

Integración con facebook

En este post de maestrosdelweb, encontrareis una explicación de José Altava de como podemos integrar el botón I like de facebook en nuestras aplicaciones web.

En esta 2a parte, nos explica como funcionan los metatags y opengraph en facebook.

Seguimos en espera de la 3a parte, sobre facebook connect.

27Sep/100

Guia marketing de empresas para Facebook

Desde facebookmarketing.es podeis descargar una guia bastante interesante para sacarle rendimiento a Facebook si vuestro perfil se trata de una empresa. Ademas existen dos guias mas para la promción y el control de la página de fans de la empresa.

Os dejo aqui los pdf's descargados:
Guia de Marketing Facebook empresas

Facebook para empresas Control de nuestra pagina de fans

Promocion pagina de fans facebook