使用graph api在个人网络应用程序中获取Facebook提要

Question

I am trying to display all the posts that are added in a Facebook page.I have used a Facebook SDk and graph api http GET request to fetch the posts.I have been successful in fetching such posts.

I just want how can i display those posts in following order:

Post1 image Post 2 Image

Post 1 description Post 2 Description

Here is the code i have done till now: This is JS file :

(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/en_US/sdk.js#xfbml=1&version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

$( document ).ready(function() {
    fbFetch();
});
function fbFetch(){
    var url = "https://graph.facebook.com/{MyPageID}/posts?fields=picture,description,message&access_token={MyPageAscesToken}";
$.getJSON( url, function( data ) {

  $.each( data, function( key, val ) {

      $.each( val, function( keys, value ) {

              $( ".picture_name" ).append( value["message"]); 

              $( "<img>" ).attr( "src", value["picture"]).appendTo( ".facebookfeed" ); 

     });

   });
});
};

This Is my view page COde:

<div class="row-inlineblock">
                        <div class="col-sm-12 col-xs-5">
                        <figure class="facebookfeed"></figure>
                        </div>
                        <div class="col-sm-12 col-xs-7">

                            <h2 class="picture_name"></h2>
                        </div>
                    </div>

Answer 1

i was able to solve the problem Just needed to use <ul>,<li> kind of stuff in view page and also changing the iteration of JSON to reduce the .$each to make it javscript code more fast.