javascript - Can't load friends images with facebook API

Question

I'am following a tutorial from Facebook for making a mobile website application. But i can't load the images from friends. I get this:

<img src="[object Object]">

It should work, because i copied the entire code from the example (only changed appId)

Here is the full code:

    <html>
<head>
  <title>Hello World</title>
  <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta property="og:title" content="Hello world" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Hello World" />
  <meta property="og:description" content="Hello World!  This is my mobile web sample app." />
  <meta property="og:image" content="http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png"/>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    (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>

  <script>
    window.fbAsyncInit = function() {
      FB.init({ appId: '226909127331855', 
      status: true, 
      cookie: true,
      xfbml: true,
      oauth: true});

      FB.Event.subscribe('auth.statusChange', handleStatusChange);  
    };
  </script>

  <script>
   function handleStatusChange(response) {
     document.body.className = response.authResponse ? 'connected' : 'not_connected';

     if (response.authResponse) {
       console.log(response);
       updateUserInfo(response);
     }
   }
   </script>

   <div id="login">
     <p><button onClick="loginUser();">Login</button></p>
   </div>
   <div id="logout">
     <div id="user-info"></div>
     <p><button  onClick="FB.logout();">Logout</button></p>
   </div>

  <script>
    function loginUser() {    
      FB.login(function(response) { }, {scope:'email'});    
    }
  </script>

  <style>
    body.connected #login { display: none; }
    body.connected #logout { display: block; }
    body.not_connected #login { display: block; }
    body.not_connected #logout { display: none; }
  </style>

  <div id="user-info"></div>
  <script>
    function updateUserInfo(response) {
      FB.api('/me', function(response) {
        document.getElementById('user-info').innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
      });
    }
  </script>

  <a href="#" onclick="getUserFriends();">Get friends</a><br>
  <div id="user-friends"></div>
  <script>
  function getUserFriends() {
    FB.api('/me/friends&fields=name,picture', function(response) {
      console.log('Got friends: ', response);

      if (!response.error) {
        var markup = '';

        var friends = response.data;

        for (var i=0; i < friends.length && i < 25; i++) {
          var friend = friends[i];

          markup += '<img src="' + friend.picture + '"> ' + friend.name + '<br>';
        }

        document.getElementById('user-friends').innerHTML = markup;
      }
    });
  }
  </script>

  <a href="#" onclick="publishStory();">Publish feed story</a><br>
  <script>
  function publishStory() {
    FB.ui({
      method: 'feed',
      name: 'I\'m building a social mobile web app!',
      caption: 'This web app is going to be awesome.',
      description: 'Check out Facebook\'s developer site to start building.',
      link: 'http://www.facebookmobileweb.com/hello',
      picture: 'http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png'
    }, 
    function(response) {
      console.log('publishStory response: ', response);
    });
    return false;
  }
  </script>

  <a href="#" onclick="sendRequest();">Send request</a><br>
  <script>
  function sendRequest() {
    FB.ui({
      method: 'apprequests',
      message: 'invites you to learn how to make your mobile web app social',
    }, 
    function(response) {
      console.log('sendRequest response: ', response);
    });
  }
  </script>

  <fb:like></fb:like>
</body>
</html>

Here is the tutorial: https://developers.facebook.com/docs/mobile/web/build/

score 3 · Accepted Answer

Try changing your code to this:

'<img src="' + friend.picture.data.url + '"> '

As @Gyan mentioned, take a look at the open graph explorer to see what the underlying data structure looks like.

score 2 · Accepted Answer

you are doing only a bit wrong go for this link face book developer tool for graph api for freindlist link

you will get friends something like

{
      "name": "Nishant Porwal", 
      "id": "522901714", 
      "picture": {
        "data": {
          "url": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/372008_522901714_1470071180_q.jpg", 
          "is_silhouette": false
        }
      }
    }

and now see your code

 '<img src="' + friend.picture + '"> '

you have to parse you defently find that you are placing an object instead of placing url so change your code and get url because src always work for image url :) might i am given you an idea where you are wrong

change it to

'<img src="' + friend.picture.data.url + '"> '

score 0 · Accepted Answer

General advice is to check the object type returned by your method. Since you are being returned an object, there is likely a property like image you can reference from that object... something like objectName.imageURI

javascript - Can't load friends images with facebook API

3 に答える 3

Related

Reference