Home/ Questions/Q 8598977
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T01:17:12+00:00

I’am following a tutorial from Facebook for making a mobile website application. But i

  • 0

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/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 + '"> '
    • 0