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:

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

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

<fb:login-button v="2" onlogin="window.location.reload(true);" size="medium"></fb:login-button>

4.- El formulario para presentar todos tus contactos

<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 en iframes con la información que estamos solicitando.

<!-- 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/

Actualización!
Leyendo el blog de Facebook, han sacado una nueva llamada basada en el “Platform Dialogs framework”.

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

<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

Tags de búsquedas:

invitar amigos de facebook a visitar tu web,agregar todos amigos de face en app,obtener amigos de facebook con php,mysql facebook autentificacion para escribir en su muro,mysql facebook api invitar,invitar personas facebook api javascript,invitar en facebook php permiso,invitar amigos con php,invitar a una web con api de facebook,plugin para invitar amigos php,poner boton de conect facebook,whatsapp web api,usuario email amigos de app sdk facebook,USO DEL SDK DE FACEBOOK PARA PUBLICAR EN EL MURO android,sdk javascript invitacion facebook

Noticias relacionadas »

19 comentarios en Invitar a contactos de facebook desde una web externa con la API FBML

  1. Alex
    / Responder

    Quisiera saber si se puede pedir en mi web que mis usuarios compartan en sus muros de facebook contenidos de mi web.
    un saludo!

    • Pichabrava
      / Responder

      Comparte en facebook

      Si el usuario esta conectado, le saldra directamente si no le pedira que se conecte. Forma más rapida y simple de implementar, luego con el graph hay muchas posibilidades.

      Espero que te sirva bro.

      • Pichabrava
        / Responder

        a href=’http://www.facebook.com/sharer.php?u=http://www.NOMBRE_DE_TU_WEB.EXT’ target=”_blank”

        (pone los que aqui me los convierte)

        a ver… yiiiiija!

  2. Jose Antonio
    / Responder

    Buenos días,

    Tengo una consulta por que ya no se que hacer,

    Tengo una app de facebook, que publica en el muro de los usuarios.

    pero mi problema es que cuando el usuario instala la app, y acepta los permisos,

    hago un direccionamiento a una nueva pestaña mostrando la información.

    El problema es que cuando el usuario vuelve a la pestaña de facebook, sigue la ventana popup de la aplicación solicitando que el usuario vuelva a instalar la app.

    el usuario ya tiene instalada la app, con que no debería de salir ese mensaje.

    por otra parte si el usuario vuelve a aceptar que la vuelva a instalar, sale un mensaje de que el usuario ya tiene instalada la app.

    me gustaría que si alguien me pudiera ayudar.

    Un saludo

  3. / Responder

    Amigo como varios de los comentarios, tengo el problema que con el nuevo form, se ven todos los amigos le envío una prueba a un amigo y el nunca recibe nada. Pruebo el que tiene de ejemplo en: http://pedroventura.com/demos/facebook/app_request.html y este si funciona, no se que estoy haciendo mal, por favor si es tan amable de echarme una mano.
    Gracias!

  4. / Responder

    hay forma de capturar los id de los que fueron invitados y pasarlos a una base de datos???

  5. / Responder

    Hola, Excelente post!!! pero tengo una consulta: vi la actualización con el nuevo Platform Dialogs framework… uso el codigo que indicas pero por alguna extraña razon nunca le sale a la gente que envio las notificaciones en su facebook (globo rojo superior). Aunque cuando uso tu ejemplo si salen. Se requiere alguna configuracion adicional en la aplicacion???? Gracias por tu ayuda!

  6. Ch
    / Responder

    Hola
    Tengo un problema con el nuevo método y es el siguiente: parece funcionar ya que aparece la ventana emergente y nos permite seleccionar amigos y enviar las invitaciones y los campos to y request de la respuesta son correctos. Sin embargo, cuando los amigos a los que se les ha enviado la invitación acceden a su cuenta de facebook el contador de solicitudes de invitaciones se ha incrementado pero al hacer click sobre él la invitación no aparece en la lista y tampoco aparece en las notificaciones.
    ¿Podrías ayudarme? Gracias.

  7. / Responder

    alz-master@hotmail.com agregame ayudame con este asunto.

  8. / Responder

    amigo como configuro o creo la aplicacion para que aparesca en la pagina de facebook la invitacion y luego redirija a la pagina.

  9. Sergio
    / Responder

    No funciona el formulario de ejemplo..
    En estos momentos el módulo de ejemplo de invitaciones de facebook no esta funcionando por un tema de cacheo con un plugin de wordpress.
    En cuanto consigua debugear esta incidencia está visible.

  10. kevin
    / Responder

    hola lo quiero instala en mi web pero no tuve éxito, me podrías ayudar ? el formulario en esta parte a que archivo llamaa ? action=”http://www.dominio.com/invitar”
    que tiene qe tener ese archivo?

    • Pedro Ventura
      / Responder

      Buenas,

      Pues dejame que lo mire primero porque ahora me esta fallando, no se si será por un tema que FB haya cambiado algo, o algún error que me metido en éstos días, porque lo deje funcionando.

      • kevin
        / Responder

        te dejo mi email por si sabes algo kevin@devm.com.ar Gracias por contestar!

    • Pedro Ventura
      / Responder

      Buenas,
      Ya he arreglado el formulario de ejemplo que tengo http://www.pedroventura.com/blog_programacion/invitar-contactos-facebook/

      El action del formulario tiene que ser la misma url que donde esta el propio formulario, es decir lo mismo.

      Mira el ejemplo que tengo yo, y sigue los pasos del artículo, no tiene perdida.
      Ojo primero tienes que haber creado la app en facebook developer y tener un id de aplicación.

      Inténtalo siguiendo mi ejemplo, sigues teniendo problemas me dices.

      • Jorge Clemente
        / Responder

        Hola, muchas gracias por el code y la ayuda. Tengo una pregunta:

        ¿Se puede insertar el “apprequests” en la página y no en un popup?

        • Pedro Ventura
          / Responder

          Es que la autenticacion siempre te la va a abrir en un popup.

          • Jorge Clemente

            ¿y por medio de un botón? … sucede que es muy fastidioso el popup

            Gracias por responder!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Zein (1 día)
    EXELENTEE!!! MIL PUNTOS PARA TI! si me funcionó a la…
  • señales cryptowhale (2 días)
    https://t.me/SignalsWins
  • carlos hernandez (1 semana)
    Hola, hay alguna funcion k sirva para saber el correo…
  • steven (3 semanas)
    tengo un problema me sale este error cuando pongo data:…
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUFG_xDVJ-PS3cWEYAw este es el enlace me equivoque.
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUBDhw2Uk7D3D835GJQ grupo de telegram latino sudamericano peru, colombia, ecuador, chile,…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
Google y HTML5. Otra genial animación esta vez en honor a Julio Verne

Google una vez mas mostrando el poder de HTML 5. Han desarrollado una fantástica animación sub-acuática, incluyendo buzos, tesoros, ballenas,...

Cerrar