Loop Facebook Graph URL Query Information onto Website

Question

The goal is to show the 3 most recent posts from a company page on our website, I created the graph url with the information:

https://graph.facebook.com/{pagenamehere}/posts?fields=full_picture,picture,link,message&limit=3&access_token={accesstoken|secret}

This pulls in everything correctly in the following JSON format:

data:
  0:
    full_picture: "content here"
    picture: "content here"
    link: "content here"
    message: "content here"
    id: "content here"
  1:
    full_picture: "content here"
    picture: "content here"
    link: "content here"
    message: "content here"
    id: "content here"
  2:
    full_picture: "content here"
    picture: "content here"
    link: "content here"
    message: "content here"
    id: "content here"

Tried pulling it in with the following code:

<?php
query_posts('&showposts=-1&order=ASC');

while (have_posts()) : the_post();


    $json = file_get_contents( 'https://graph.facebook.com/{pagenamehere}/posts?fields=full_picture,picture,link,message&limit=3&access_token={accesstoken|secret}');
    $json_data = json_decode($json, false);
    echo $json_data->data[0]->total_count;
    echo '<br>';

endwhile;

?>

I need to be able to loop through this and put them in three different divs in the format below in order to apply custom css to the posts:

<div class="col-sm-4">
                        <div class="stay-connected-inner">
                            <div class="stay-connected-info">


                                <div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
                                <div class="stay-connected-right">

                                    <h5>Page Title</h5>
                                    <p>Aenean massa. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur.</p>
                                </div>
                            </div>
                            <div class="stay-connected-fig">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="stay-connected-inner">
                            <div class="stay-connected-info">
                                <div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
                                <div class="stay-connected-right">
                                    <h5>Page Title</h5>
                                    <p>Aenean massa. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur.</p>
                                </div>
                            </div>
                            <div class="stay-connected-fig">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="stay-connected-inner">
                            <div class="stay-connected-info">
                                <div class="stay-connected-left"><i class="fa fa-facebook"></i></div>
                                <div class="stay-connected-right">
                                    <h5>Page Title</h5>
                                    <p>Aenean massa. Cum sociis natoque penatibus et magnis  dis parturient montes, nascetur.</p>
                                </div>
                            </div>
                            <div class="stay-connected-fig">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>

Referenced tutorial here: How to embed a Facebook page's feed into my website

My site is in WordPress and am not familiar with asp.net.

Why would you make the same API request multiple times inside the loop? Also, you should not be doing this on every page load, you will run into the rate limits quickly. https://developers.facebook.com/docs/graph-api/advanced/rate-limiting You need to implement some form of caching on your end. — CBroe, May 26 '17 at 00:30

score 0 · Accepted Answer · answered May 25 '17 at 17:48

You could do something like this:

foreach($json_data->data as $post){
    echo 
    '<div class="col-sm-4">
        <div class="stay-connected-inner">
            <div class="stay-connected-info">
                <div class="stay-connected-left">
                    <i class="fa fa-facebook"></i>
                </div>
                <div class="stay-connected-right">
                    <h5>full_picture</h5>
                    <p>' . $post['message'] . '</p>
                </div>
            </div>
            <div class="stay-connected-fig">
               <img src="' . $post['full_picture'] . '" alt="">
            </div>
        </div>
    </div>';
}

This will output 3 columns if there are 3 elements in the array. The $post in the foreach being each element of the array.

Loop Facebook Graph URL Query Information onto Website

1 Answers1