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!

1Jun/110

Twitter lanza el botón Follow para poder seguir directamente desde la web

Habemus botón "Follow".

Acabado de lanzar y ya lo hemos integrado para que veáis como queda. xD

El código como podéis ver es sencillísimo:

<a href="http://twitter.com/jorsang1" class="twitter-follow-button" data-show-count="false" data-lang="es">@jorsang1</a>
<a href="http://twitter.com/MadBlake" class="twitter-follow-button" data-show-count="false" data-lang="es">@MadBlake</a>
<a href="http://twitter.com/tw_ticnology" class="twitter-follow-button" data-show-count="false" data-lang="es">@tw_ticnology</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Si queréis ver las opciones de personalización que ofrece el botón, lo tenéis muy bien documentado en la página oficial: http://dev.twitter.com/pages/follow_button

Venga! Nos seguimos!! xD

Etiquetado con: , No hay comentarios
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!

23Mar/113

Videoconferencia online en tu web con Open Tok

Open tokSi queremos implementar videoconferencia en una web, debemos tener en cuenta el API de Open Tok.

Tiene muy buena pinta. Si alguno lo habeis usado ya, no dudeis en dejar un comentario con vuestras experiencias. xD

10Mar/110

Directorio de APIs de ProgrammableWeb

Puede que antes de ponernos a desarrollar alguna funcionalidad, valga la pena antes hecharle un vistazo a este directorio de APIs de programmableweb.com.

Ademas, aqui tenemos un informe sobre sus + de 3.000 APIs.

Etiquetado con: No hay comentarios