getFacebookPhotos

The getFacebookPhotos snippet can be used to generate listings of albums and photos on a facebook profile (user or page). In the current version, it only works for public data. All data is extensively cached to save performance - if you need more to-the-minute accurate stuff you can play with the cache properties.

As getFacebookPhotos uses its own caching mechanisms, you can call getFacebookPhotos uncached.

Available Properties¶

This list of properties is current as of version 1.0.0. Required properties are in bold.

As the album cache retrieves all albums and all their photos in one big optimized query, we can see a performance hit when all of a sudden just the photos cache has expired and all visible albums suddenly start making small queries to facebook. This cacheExpiresPhotosVariation properties negates that effect by spreading out the time the photos cache expires.

So if you have getFacebookPhotos configured to show three albums with a cacheExpires time of 2 days, and a cacheExpiresPhotos of 12 hours, we will see that every 12 hours there are 3 requests to facebook for the photos in those specific albums. If we wouldn't have cacheExpiresPhotosVariation, the expiry time for each album would be equal, and one poor visitor would have to wait for 3 requests to come back from Facebook (which isn't neccessarily fast with this kind of thing). Now enter cacheExpiresPhotosVariation. If it's set to 1 hour (the default), this means that the photo cache for each album gets a cache expiry time which is within 1 hour from what is set on cacheExpiresPhotos: so in our example anything (randomly) between 11 and 13 hours. This means there's no one poor visitor waiting for 3 requests to facebook to come back, but there's 3 visitors each only taking a small hit. Win-win-win-win! | 3600 ( = 1 hour) |

Templating¶

For templating your Facebook photo feed, we can use three different template chunks. There's the photoTpl which is used for each individual photo, the albumTpl for wrapping albums if perAlbum is enabled, and outerTpl which throws it all together.

This section will give you information on defaults and available placeholders for you to use.

photoTpl¶

The default chunk is as follows:

<li>
    <img src="[[+src_small]]" width="[[+src_small_width]]" height="[[+src_small_height]]" />
</li>

These are all the placeholders to use in the photoTpl chunk. Some may not be available due to permissions.

albumTpl¶

The default albumTpl chunk is as follows; please keep in mind you need to have perAlbum enabled in order to use this.

 <h2><a href="[[+link]]">[[+name]]</a> <span>([[+photo_count]] photos, created on [[+created:date=`%d/%m/%Y`]])</span></h2>
<div>
    <ul>
        [[+photos]]
    </ul>
</div>

You have access to the following placeholders; some may not be available due to permissions:

outerTpl¶

The default outerTpl is the following:

 <ul>
    [[+photos]]
</ul>

and you can only use the "photos" placeholder in this template.

Examples¶

Man, so many possibilities!

Simple Example, grouping all photos per album with default tpls¶

Snippet call:

[[!getFacebookPhotos?
    &user=`modxcms`
    &perAlbum=`1`
]]

which without any customization results in the following output:

<h2><a href="http://www.facebook.com/album.php?fbid=437577137979&id=19110642979&aid=235059">Profile Pictures</a> <span class="smalldate">(1 photos, created on 12/09/2010)</span></h2>
<div class="gfp-photos-wrapper">
    <ul>
        <li class="gfp-photo">
    <img src="http://photos-a.ak.fbcdn.net/hphotos-ak-snc6/179529_10150898281902980_465676445_t.jpg" width="75" height="75" />
</li>

    </ul>
</div>
<br />


<h2><a href="http://www.facebook.com/album.php?fbid=10150883337702980&id=19110642979&aid=434455">CMS Expo 2012</a> <span class="smalldate">(33 photos, created on 12/05/2012)</span></h2>
<div class="gfp-photos-wrapper">
    <ul>
        <li class="gfp-photo">
    <img src="http://photos-c.ak.fbcdn.net/hphotos-ak-ash3/529915_10150883341757980_1041537877_t.jpg" width="75" height="56" />
</li>

<li class="gfp-photo">
    <img src="http://photos-d.ak.fbcdn.net/hphotos-ak-ash3/537753_10150883341637980_1323647473_t.jpg" width="75" height="56" />
</li>
<!-- ... -->
<li class="gfp-photo">
    <img src="http://photos-c.ak.fbcdn.net/hphotos-ak-ash3/534903_10150883337842980_1414876671_t.jpg" width="75" height="50" />
</li>

    </ul>
</div>
<!-- ... -->