Question

I am creating a site where a user that logs in with their Facebook account will see their pictures on the page . What code do i have to put in my website to see the loged in users pictures diplayed.

If someone can help me with a link to a tutorial or point me in the right direction.

I have read a lot of documentation from Facebook and on stack overflow but i cant find an answer,

Answer 1

You can do this two ways: on the server-side (in PHP in your case) or on the client-side with the JavaScript SDK.

Both assume you have the required access credentials. You need to sign up for an application account to get these at the Facebook Developer site

Server-Side

First-step is to get your application to participate in the OAuth authentication process. This is well-documented for PHP in the Facebook guide (see the Server-Side Flow section).

Once you’ve done that, you’ll have an access token that you can call into the Graph API with. The endpoint to get the user’s photos is https://graph.facebook.com/me/photos?access_token=<token>. In this case the me, is always the user who signed in to give your application the token.

In PHP, assuming you’ve stored the access token in $SESSION['token'] you can make a request for the photos payload with:

$url = "https://graph.facebook.com/me/photos?access_token=" . $SESSION['token'];
$photos = json_decode(file_get_contents($url));

The $photos object will be a list of Photo entities that are described in the Facebook docs.

Client-Side

You’ll need to setup the JavaScript SDK on your web pages as documented here.

Authentication on the client-side is handled by JavaScript SDK, again documented in the authentication guide.

Using the SDK, you can make a client-side JavaScript call to the Graph API for the same photos structure:

FB.api('/me/photos', function(response) {
    if(!response || response.error) {
        // render error
    } else {
        // render photos
    }
});