3

Recientemente se me ha pedido la integración de facebook con un sitio web. La integración inicial de login a funcionado correctamente, pero ahora se ha pedido que se consiga la lista de amigos del usuario que está conectado en el sitio, y poder enviar una invitación.

Lo que necesito en simples palabras es que se coloque un botón el cual. al presionarlo, se muestre una ventana con los amigos del usuario, que se pueda seleccionar uno de ellos y enviarle una invitación para que visite la página y así poder participar de la actividad que se realizará más adelante.

Aquí está el html actual:

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 20px;
        }
    </style>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

    <!-- SDK de Facebook -->

    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '522290837829286',
          xfbml      : true,
          version    : 'v2.9'
        });
        FB.AppEvents.logPageView();
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/es_LA/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>

    <!-- SDK de Facebook -->
</head>
<body>
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">           
      <form class="navbar-form navbar-right" role="form">
      <div class="fb-login-button" data-max-rows="1" data-size="medium" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="true" scope="user_friends">
          </div>
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success">Sign in</button>
      </form>
    </div><!--/.navbar-collapse -->
  </div>
</nav>



<div class="container-full">
  <!-- Example row of columns -->

      <img class="home_all" src="img/home_all.jpg" />


</div>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X','auto');ga('send','pageview');
    </script>       

</body>

Aquí está el javascript actual:

$( document ).ready(function() {

    var id = 0;

        window.fbAsyncInit = function() {
      FB.init({
        appId      : '522290837829286',
        cookie     : true,  // enable cookies to allow the server to access 
        autoLogAppEvents : true,
        status     : true,
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.9' // use graph api version 2.8
      });

            FB.getLoginStatus(function(response) {
            statusChangeCallback(response, function() {});
          },    {
            scope:'user_friends',
            return_scopes: true
                }
          );
    }



      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }

      function statusChangeCallback(response) {
        //console.log('statusChangeCallback');
        //console.log(JSON.stringify(response));
        if (response.status === 'connected') {
            testAPI();
            listFriend();
            taggableFriend();
        } else {
          // The person is not logged into your app or we are unable to tell.
         //console.log ('Please log into this app.');
        }
      } 

     function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', {fields: 'first_name,id,last_name, picture'}, function(response) {
        //listFriend();
      //console.log(JSON.stringify(response));
      //console.log(response.first_name);
        id = (response.id);
        //console.log(id);
      //console.log(response.last_name);
      //console.log(response.id);
      //console.log(JSON.stringify(response.picture));
    });
  }

    function listFriend() {
        FB.api('/me/friends','GET',{fields: 'data, summary'}, function (response) {
          if (response && !response.error) {
              console.log(JSON.stringify(response.data));
              console.log(JSON.stringify(response.summary));
              //console.log(response.data);
              //console.log(response.summary);
          }else{
              console.log ("algo ha salido mal");
          }
        }
    );
    }

        function taggableFriend() {
        FB.api('/me/taggable_friends','GET',{fields: 'data, paging'}, function (response) {
          if (response && !response.error) {
              console.log(JSON.stringify(response.data));
              console.log(JSON.stringify(response.paging));
              //console.log(response.data);
              //console.log(response.summary);
          }else{
              console.log ("algo ha salido mal");
          }
        }
    );
    }
});

1 respuesta 1

1

Necesitas hacer un request usando "/{user-id}/friends"

/* make the API call */
FB.api(
    "/{user-id}/friends",
    function (response) {
      if (response && !response.error) {
        /* handle the result */
      }
    }
);

La documentación aquí. También puedes usar el plugin del botón compartir

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Compartir</a></div>

El link para obtener el código aquí.

Ten en cuenta que algunos permisos requieren de una revisión por parte de facebook, puedes ver todos los permisos aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.