Wednesday, May 9, 2012

Album Sharing on Facebook using Graph API - Javascript Implementation

Single photo sharing was discussed in the previous post where the photos were posted to the default "Your_registered_app_name Photos" album.

There may be a case, when your app has multiple photo albums and the user wants to retain the album structure while sharing them. This is achieved by first creating an album, and then posting photos to it.

The API calls remain almost the same here except for creation of albums, retrieving their id's and posting photos to those ids.

Step 1: Create an Album

To post the photos into an album, you first need to have an album created on Facebook.

Add an OnClick event to the album you want to post to your Facebook account. Write the following code in the function where you are handling the OnClick event.

FB.api('/me/albums', 'post',
{
    name: 'Your_Album_Name'
}, function(response) {
    if (!response || response.error) {
        alert('Error! Please Try Again');
    } else {
        alert("Album Id ::" + response.id);
    }
    }
);

'response.id' returns you the ID of the Album created. If you check it over Facebook account, you will find an empty album 'Your_Album_Name'.

Step 2: Posting Photos To The Album

var imgURL = "YOUR_IMAGE_URL";
FB.api('/' + ALBUM_ID +'/photos', 'post', {
    message: 'photo_description',
    access_token: accessToken,
    url: imgURL
}, function (response) {
    if (!response || response.error) {
        alert('Error! Please Try Again');
    } else {
        alert('Photo Posted');
    }
    }
);

The photo is posted to the album created in your Facebook account.

1 comment:

  1. The album is created, that's good, but how can I share this album on someone else's wall? with a post text like " Here is my album "?

    ReplyDelete