title: display my feeds from facebook on my webpage with javascript api?
body: <p>Im trying to get all the feed from my facebook page whit the javascript api.
  Does anybody have a working example?</p>
  
  <p>I have tryed but I cant get it right, I can get photos from albums, but I cant get the feeds and I dont know what Im doing wrong.</p>
  
  <p>Any input really appreciated. Thanks!</p>
  
  <p>I have this code:</p>
  
  <hr>
  
  <h1>Edit</h1>
  
  <p>OK, I have the code inside the init code like below and it doesnt work, it is not executing the code and I get no errors:</p>
  
  <pre><code>&lt;script&gt;
      window.fbAsyncInit = function() {
          FB.init({
              appId      : '&lt;%=facebookAppId%&gt;', // App ID
              channelUrl : 'www.mypage.se/channel.html', // Channel File
              status     : true, // check login status
              cookie     : true, // enable cookies to allow the server to access the session
              xfbml      : true,  // parse XFBML
              oauth      : true
          });
  
          // get the wall - feed
  var page_id = '&lt;%=facebookPageId%&gt;';
      FB.api('/' + page_id, {fields: 'access_token'}, function(resp2) {
          if(resp2.access_token) {
              alert(resp2.access_token);
  
  
   FB.api('/page id/feed?access_token='+resp2.access_token, function(response) {
  
      var ul = document.getElementById('feed');
      for (var i=0, l=response.data.length; i&lt;l; i++) {
  
        var
        feed = response.data[i],
        li = document.createElement('li'),
        a = document.createElement('a');
        a.innerHTML = feed.message;
        a.href = feed.link;
        li.appendChild(a);
        ul.appendChild(li);
                         }
              });
          }
      }); 
  
   };//end window.fbAsyncInit
  
    // Load the SDK Asynchronously
    (function(d){
       var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
       if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       ref.parentNode.insertBefore(js, ref);
     }(document));
  
  
  &lt;/script&gt;
  </code></pre>
  
  <ol>
  <li><p>So why can I have for example:
  FB.api('/facebook id', function(response) {
  alert('Your name is ' + response.name);
  });
  inside the init code and not the other code?</p></li>
  <li><p>I would still need some structure help writing the callbacks out on the page so it looks good as it does on facebook.
  I like to write out "message, picture, link, name" and maybe something else?</p></li>
  <li><p>As I test to get the messages in this example and some of the callback is displayed as "undefined" on the page? Does that mean that the message doesnt have a value when I get it?
  If so how can I not write out emty values - undefined ones?</p></li>
  </ol>
  
  <p>Thanks!</p>
  
  <p>UPDATE:</p>
  
  <p>If I use this code then it reads the feed, but only if Im logged in to Facebook?
  Im starting to get confused, since I think that the above code should work: 
  I first ask for the access token in the first call, and when I get the access token, then using it in the second call, what Im I doing wrong?</p>
  
  <pre><code>FB.api('/my userid or pageid/feed?access_token=the acces token that I get from the Graph API Explorer', {limit:5} , function(response){
         if (response &amp;&amp; response.data &amp;&amp; response.data.length){
              alert(response.message);
              var ul = document.getElementById('feed');
            for (var j=0; j&lt;response.data.length; j++){
              var feed = response.data[j],
              li = document.createElement('li'),
               a = document.createElement('a');
              a.innerHTML = feed.message;
              a.href = feed.link;
              li.appendChild(a);
              ul.appendChild(li);
            }
          }
        });
  </code></pre>
  
  <ol>
  <li>I get a couple of undefined responses, how can I not write them out on the page?</li>
  <li>How can I get the above code to work even if the user that visit the webpage is not logged in to facebook?</li>
  <li>I make other calls that gets the photos of an album with no problem displaying them on the webpage, I dont understand why this is different?</li>
  <li>If I want to set this up for a customer(when its finished) what are the steps I need to take? Getting a bit confused... :-)</li>
  <li>I would like to get the message, picture, likes etc with the call
  and display it like it is on the feed-wall, any suggestions here?</li>
  </ol>
  
  <p>Ok, finally I got it working :-)
  I got the right acces token and now I can display the feeds.
  I got the right token here:
  <a href="https://graph.facebook.com/oauth/access_token?client_id=myapp_id&amp;client_secret=myapp_secret&amp;grant_type=client_credentials" rel="nofollow">https://graph.facebook.com/oauth/access_token?client_id=myapp_id&amp;client_secret=myapp_secret&amp;grant_type=client_credentials</a>
  And now I can use the below code both for getting user feeds and page feeds, just changing the page_id!</p>
  
  <pre><code>var page_id = '&lt;%=facebookPageId%&gt;';
  var pageaccessToken='xxxxxxxxxxxxxxxxxxxxxxxxxx';
  FB.api('/' + page_id + '/feed?access_token='+ pageaccessToken, {limit:5} , function(response){
         if (response &amp;&amp; response.data &amp;&amp; response.data.length){
  
              var ul = document.getElementById('pagefeed');
            for (var j=0; j&lt;response.data.length; j++){
              var feed = response.data[j],
              li = document.createElement('li'),
               a = document.createElement('a');
              a.innerHTML = feed.message;
              a.href = feed.link;
              li.appendChild(a);
              ul.appendChild(li);
            }
          }
        });
  </code></pre>
  
  <p>Ok, now it works, but I get the undefined in the response?
  What is causing this, is it because it is a empty value that I get in the response?
  What can I do so it is not displayed on the page?</p>