Display images from Facebook albums on your website

Composite.Media.ImageGallery.Facebook allows you to display images from Facebook albums  on your website. Normally, these are the images linked to Facebook public pages from the page's albums, wall and/or profile.

With additional configuration steps, you can show images linked to your Facebook user account.

The albums are presented on a page and people visiting your website can open an album to view its images. You can choose to have the albums opened either in-page or on the corresponding album page on Facebook.

Before you begin

To show a full-size image in a Facebook album in a light box on your website, we recommend that you install Composite.Media.ImageGallery.Slimbox2.

(Read more on Composite.Media.ImageGallery.Slimbox2.)

Showing images from public Facebook pages

To show images from the albums linked to a public Facebook page, you should first obtain the unique ID of such a page. It can be:

  • The last part of a custom URL of the Facebook page: e.g. MySuperPage in http://www.facebook.com/MySuperPage
  • Or the number (for a page without the custom URL), e.g. 248170027867477 in http://www.facebook.com/pages/MySuperPage/248170027867477

Now use the Composite.Media.ImageGallery.Facebook.AlbumsGallery function:

  1. Edit a page.
  2. Insert the Composite.Media.ImageGallery.Facebook.AlbumsGallery function ( Insert | Function), or add the similar code: 
     
<f:function name="Composite.Media.ImageGallery.Facebook.AlbumsGallery" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="ObjectUniqueID" value="248170027867477" /> 
  <f:param name="AlbumTypes" value="normal,wall,profile" /> 
  <f:param name="UseFacebookLinksToAlbums" value="False" /> 
</f:function>
  3. Specify its required parameter:
    • Object unique ID: The unique ID of a Facebook public page or user account
  4. If necessary, specify these optional parameters:
    • Album types: One or more types of albums to show on a page: normal, wall, profile.
    • Use Facebook links to albums: When 'true', albums will be opened externally on their dedicated Facebook pages; otherwise, right on the current page ('false' by default)

Apart from images in regular Facebook albums, there are also images from to specific Facebook albums: those shared on the Wall and those used as profile images. You can choose to include or exclude these specific images by selecting corresponding option in the Album Types parameter.

Showing images from your Facebook user account

To show images from your Facebook user account, in addition to the unique ID of your account, you should use an access token.

To obtain the access token, you need to have an App ID from a Facebook App in your account:

  1. Create a Facebook App.
  2. Copy its App ID/App Key value that looks like: 156959372039342.
  3. In your web browser, open the following URL replacing YOUR_APP_ID with your actual App ID: https://www.facebook.com/dialog/oauth?client_id=YOUR_APP_ID&redirect_uri=http://www.facebook.com/connect/login_success.html&response_type=token&scope=user_photos,offline_access.  (If you are not logged in to your Facebook account, you'll be asked to.)
  4. On the page with the request for permissions that opens, click Allow to allow external resources to access specified data in your account via the App. If you did everything properly, you will see the "Success" message on the page.
  5. Now copy the value of the access_token query parameter in the URL in the browser's address bar that looks like: AAACOwLfzSGQBAAJWLUrGAr5yuRZBbQy5ubuz16gpJL7X4IGectcsnU6IpxxxbxCsEhFJsGNWZBOUD85XzaMFFSwWZA6iBG6oDODoguXvZAwZDZD
  6. In the C1 Administrative Console, edit a page and insert the Composite.Media.ImageGallery.Facebook.AlbumsGallery function as described above.
  7. In its Object Unique ID parameter, specify the unique ID of your Facebook account, e.g. MySuperUserAccount.
  8. In the Access Token parameter, specify your access token copied in Step 5. 
     
<f:function name="Composite.Media.ImageGallery.Facebook.AlbumsGallery" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="ObjectUniqueID" value="MyUserAccount" /> 
  <f:param name="AccessToken" value="AAACOwLfzSGQBAAJWLUrGAr5yuRZBbQy5ubuz16gpJL7X4IGectcsnU6IpxxxbxCsEhFJsGNWZBOUD85XzaMFFSwWZA6iBG6oDODoguXvZAwZDZD" /> 
  <f:param name="AlbumTypes" value="normal,wall,profile" /> 
  <f:param name="UseFacebookLinksToAlbums" value="False" /> 
</f:function>

Showing images from a specific Facebook album

If you want to show images from a specific Facebook album on a page, you should know its album ID.

To get the album ID:

  1. Open the album at Facebook.
  2. Copy the second part (separated with periods ) of the set query parameter, e.g. 170150170651630 in http://www.facebook.com/media/set/?set=a.170150170651630.34091.100002019540784&type=3

Now use the Composite.Media.ImageGallery.Facebook.PhotosList function:

  1. Edit a page.
  2. Insert the Composite.Media.ImageGallery.Facebook.PhotosList function ( Insert | Function), or add the similar code: 
     
<f:function name="Composite.Media.ImageGallery.Facebook.PhotosList" xmlns:f="http://www.composite.net/ns/function/1.0"> 
  <f:param name="AlbumID" value="170150170651630" /> 
  <f:param name="AccessToken" value="AAACOwLfzSGQBAAJWLUrGAr5yuRZBbQy5ubuz16gpJL7X4IGectcsnU6IpxxxbxCsEhFJsGNWZBOUD85XzaMFFSwWZA6iBG6oDODoguXvZAwZDZD" /> 
</f:function>
  3. Specify its required parameter:
    • Album ID: The ID of a Facebook image album
  4. If you access an album linked to a Facebook user account rather than a public Facebook page, specify the access token:
    • Access token: The Facebook App's access token.

You do not need to specify the access token for an album linked to a public Facebook page.

Requirements

Composite C1 version 2.1.1 or later

SHARE