Invitar a contactos de facebook desde una web externa con la API FBML
Integrar un formulario donde un usuario puede conectarse a facebook y seleccionar sus amigos y contactos para enviarles una invitacion de tu página web o blog puede ser una herramienta muy viral. Esto es algo que se utiliza desde hace un tiempo, y para ello se usa la API FBML de Facebook, que tambien se combina con el Javascript SDK que es la Graph API y herramientas de javascript para gestionar eventos y acciones con Facebook. Bueno pues para crear nuestro bonito formulario de invitaciones mediante facebook integrado en nuestra página web externa tendremos que seguir los siguientes pasos:
Ojo antes de nada tendréis que tener vuestra aplicación registrada desde http://www.facebook.com/developers/ para poder tener vuestro id de aplicación y poder realizar los siguientes pasos.
1.- El metatag en la cabecera. Hay que incluir el tag xmlns:fb=”http://www.facebook.com/2008/fbml” dentro de la etiqueta html de la cabecera. Quedando de la siguiente manera:
1
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="es">
2.- El xd_reciver.html o Cross Domain Receiver, que es un archivo que tiene que ser guardado en nuestro servidor. Permite a Facebook guardar una cookie a la que tenemos acceso y básicamente una pieza que hace funcionar la API de Facebook.
Descarga el archivo xd_receiver.html
[download id="2" format="4" autop="false"]
Descarga el archivo y guárdalo en la raíz de tu desarrollo.
3.- Boton para logear Esto se puede sacar de facebook social plugins. Es un simple boton de logeo, no haría falta tener el xd_receiver.htm para que pueda funcionar este social plugin, ya que funciona con el Javascript SDK.
1
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&xfbml=1"></script><fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
También se pueden usar otro tipo de argumentos en la etiqueta del boton para conseguir diferentes efectos. El siguiente botón tiene otro aspecto, y recarga la página una vez se haya logeado el usuario.
1
<fb:login-button v="2" onlogin="window.location.reload(true);" size="medium"></fb:login-button>
4.- El formulario para presentar todos tus contactos
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<fb:serverfbml width="600" height="500">
<script type="text/fbml">
<fb:fbml>
<fb:request-form
action="http://www.dominio.com/invitar"
method="post"
type="invitar a Pedro Ventura"
content="Visita y consulta los artículos de mi blog<fb:req-choice url='http://www.pedroventura.com/' label='Visitar Web' />">
<fb:multi-friend-selector rows="5"
cols="3"
actiontext="Invita a tus amigos a visitar "/>
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
Este formulario se puede configurar siguiendo una serie de patrones y la documentación oficial http://developers.facebook.com/docs/reference/fbml/request-form
Este formulario es el que se puede usar para apps internas en facebook quitando las dos primeras etiquetas así como las dos últimas de cierres: <fb:serverfbml width="600" height="500"> <script type="text/fbml"> </script> </fb:serverfbml>
5.- y por último el script que lanza la llamada a la API con nuestras credenciales y convierte las etiquetas <fb:> en iframes con la información que estamos solicitando.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- script facebook -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'APP_ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/es_ES/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- fin script facebook -->
Puedes ver un ejemplo del desarrollo de este post en la siguiente url: Formulario Invitar contactos de facebook/
<blockquote Actualización! Leyendo el blog de Facebook, han sacado una nueva llamada basada en el “Platform Dialogs framework”. </blockquote>
Esta es mucho más simple de usar y con tan solo cargar un js y realizar una serie de llamadas a funciones de su js, podremos tener una ventana emergente con los estilos de facebook, lista para invitar a nuestros amigos a nuestra aplicación. El código es muy simple, y es el siguiente. También lo he implementado en esta simple página de ejemplo. Ejemplo nuevo request form
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<title>My Great Website</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js">
</script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true
});
FB.ui({ method: 'apprequests',
message: 'Here is a new Requests dialog...'});
</script>
</body>
</html>
Para leer el post original esta es la url http://developers.facebook.com/blog/post/453