En el pasado F8 Facebook lanzó su nuevo SDK de Javascript para Facebook, este SDK nos permite entre otras cosas utilizar XFBML en una web. Voy a explicaros a continuación como utilizarlo con un sencillo ejemplo con el fichero ejemplo.html.

• En primer lugar tenemos que dar de alta nuestra aplicación en el área de desarrolladores de Facebook.
• En segundo lugar tenemos que copiar el id de la aplicación del área de desarrolladores.
• Debemos dar de alta la url global del sitio (no hace falta indicar ficheros) en Configuración > Web Site.
• Editamos ejemplo.html y le añadimos el siguiente código entre las etiquetas de body:

<script>
window.fbAsyncInit = function() {
FB.init({appId: ‘Número identificador de la aplicación”, status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement(‘script’); e.async = true;
e.src = document.location.protocol +
‘//connect.facebook.net/en_US/all.js’;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>

• Le añadimos una etiqueta de XFBML de prueba:

<fb:like href=”http://www.videojuegosparachicas.com” layout=”button_count” font=”trebuchet ms”></fb:like>

• Subimos el fichero al servidor y lo probamos

Descargar fichero de ejemplo (Haz click con el botón derecho y luego click en Guardar cómo…)

Facebook nos ofrece la posibilidad de mostrar Pop Ups en pantalla con FBJS de una manera muy sencilla utilizando la clase Dialog. Esta clase dispone de los métodos showMessage y setContext para que la utilicemos.

Os voy a poner aquí un pequeño ejemplo con showMessage para hacer un Hola Mundo:

<script>

new Dialog().showMessage(“debug”, “Hola Mundo”);

</script>

El resultado sería este:

El nombre de la ventana y el contenido de la misma pueden ser modificados sin problemas, e incluso podéis utilizar variables para modificar su contenido. En mi caso utilizo mucho este tipo de ventanas para mostrar información cuando estoy desarrollando una aplicación que utiliza mucho FBJS y ajax.

Espero que os sea de utilidad

Uno de los elementos de mayor viralización de los que dispone Facebook consiste en las publicaciones en los muros de los usuarios. ¿Cómo podemos publicar en el muro de un usuario desde una aplicación? Pues con el método streamPublish de la clase Facebook. Con este método crearemos una ventana en pantalla para que el usuario confirme su publicación en su muro.

¿Es complicado de utilizar? Si no eres programador sí, si eres programador no, es bastante sencillo.

Os voy a poner un ejemplo sacado de la aplicación Mascletà Fallera:

<?php
$feedStory = array(
‘name’ => “Ha creado una Mascletà Fallera.”,
‘href’ => ‘http://apps.facebook.com/mascleta’,
‘description’ => ‘Las fallas de Valencia son una fiesta conocida universalmente. Uno de sus puntos álgidos son las masclet&agrave;s diarias que inundan las calles de  Valencia con un estruendo atronador. ¿Te apetece disfrutar de la mascletà?’
);

?>
<script>
var js_feedStory = <?php echo json_encode($feedStory); ?>;
var js_actionLinks = <?php echo json_encode(array( array(‘text’ => ‘Hazte Fan’, ‘href’ => ‘http://apps.facebook.com/mascleta/’))); ?>;
var js_targetId = null; //Este valor debe ser nulo para que se publique en el muro del usuario
var js_userMsg = ”; //El texto que aparece en el campo de texto editable por el usuario
var js_headlineMsg = “&iquest;Quieres publicar en tu muro el resultado de tu Masclet&agrave; Fallera?”; //La etiqueta de texto que aparece en azul encima del texto
var js_callback = null; //Pon aquí el nombre de la función javascript que quieras ejecutar cuando se pulse un botón
var AUTO_PUBLISH = false;
var js_actorId = null;

Facebook.streamPublish(js_userMsg, js_feedStory, js_actionLinks, js_targetId, js_headlineMsg, js_callback, AUTO_PUBLISH, js_actorId);
</script>

Con este código publicamos el siguiente mensaje en pantalla:

Cómo podéis ver el código tiene dos partes, una en PHP y otra en FBJS (el javascript de Facebook). En la parte de PHP creamos dos arrays que contienen la información del texto y de la foto, así como de los enlaces de la caja del mensaje.

En el código FBJS tenemos por una parte las variables dónde configuramos la ventana del mensaje, por una parte le damos a esas variables valores en PHP y por otro los introducimos en FBJS.

Por último tenemos el método streamPublish de la clase Facebook que es donde ordenamos la publicación del mensaje.

Espero que os sea de utilidad

Pues es el Javascript de Facebook, está pensado para permitir al desarrollador toda la potencia de Javascript pero protegiendo al máximo la privacidad de los usuarios de Facebook.

Es muy similar a Javascript, para utilizarlo en una aplicación en modo canvas hay que utilizar los tags <script></script> como en cualquier página web normal. Entre esos tags deberemos colocar nuestro código FBJS.

No es obligatorio, pero no está de más -al igual que en cualquier web- utilizar el siguiente formato:

<script>
<!–
alert(“Probando”);
–>
</script>

En posts posteriores os iré contando las diferencias -y limitaciones- que tiene con respecto a Javascript.