Example: Displaying all facebook page photos
-
Thank you for your fantastic plugin – I have donated €10 and hopefully my efforts below will make up some of the other donation? ??
I am using your plugin to grab all photos from all Facebook albums for a particular page (business).
The graph API request I am using to do this is:
https://graph.facebook.com/nike?fields=albums.limit(99){photos.limit(999){source,name},description}In this example, I am grabbing the latest 999 photos from each the latest 99 albums from the Nike page. You can easily change this for any other page name or page ID.
I am displaying these photos using this shortcode and template:
[jsoncontentimporter url="https://graph.facebook.com/nike?fields=albums.limit(99){photos.limit(999){source,name},description}" basenode="albums.data"] {subloop:photos:1} {subloop-array:photos.data:999} <div class="wp-caption fbAlbumFeed"> <a href="{source}"><img src="{source}" alt="{name}" /></a> <p class="wp-caption-text">{name}</p> </div> {/subloop-array:photos.data} {/subloop:photos} [/jsoncontentimporter]Now, clearly this would be A LOT of photos. I would like to show a sub-set of these photos, based on the words used in the description of each photo. For example, if I am creating the JustDoIt page for Nike, I would like to be able to add all photos that contain the hashtag “#justdoit”.
Unfortunately the Facebook Graph API doesn’t allow us to do this filtering server-side, but we can do it using the oneofthesewordsmustbein attribute. So now, my shortcode looks like this:
[jsoncontentimporter url="https://graph.facebook.com/nike?fields=albums.limit(99){photos.limit(999){source,name},description}" oneofthesewordsmustbein="#justdoit" oneofthesewordsmustbeindepth=5 basenode="albums.data"]Brilliant! – it works, and by caching what can be a pretty big JSON response everything is quick.
QUESTION – When I use caching within your plugin, is it only caching the JSON response from the server, or does it cache the overall output of the template?
Making things a lot easier
So far, this works well and with a big chunk of shortcode + template pasted in to a page we can bring in our FB photos. But it would be nice if would could save and re-use this template and only have to specify the word we want to filter on. This would allow us control the template and API url in a single location and make it easier for users to add photos using a simple shortcode. For example, let’s see how we can simplify everything down to one single shortcode:
[fbGraphSearch keywords="#justdoit"]So how can we do this?…
Well, we need to use the Post Snippets plugin. So go and install it and head to Dashboard > Settings > Post Snippets.Have a read about how Post Snippets works if you like, but here is what you’ll need to do to set this up…
- Click ‘Add new snippet’
- Complete the following fields:
- Title
fbGraphSearch - Variables
keywords - Shortcode
[Checked] - PHP Code
[Checked] - wptexturize
[Not checked] - Snippet:
echo '[jsoncontentimporter url="https://graph.facebook.com/nike?fields=albums.limit(99){photos.limit(999){source,name},description}" oneofthesewordsmustbein="{keywords}" oneofthesewordsmustbeindepth=5 basenode="albums.data"]'; echo '{subloop:photos:1}'; echo '{subloop-array:photos.data:999}'; echo '<div class="wp-caption fbAlbumFeed">'; echo '<a href="{source}"><img src="{source}" alt="{name}" /></a>'; echo '<p class="wp-caption-text">{name}</p>'; echo '</div>'; echo '{/subloop-array:photos.data}'; echo '{/subloop:photos}'; echo '[/jsoncontentimporter]';Finally, remember to click ‘Update Snippets’
As you can probably guess, this snippet is simply spitting our shortcode and template on to a page wherever we add an fbGraphSearch shortcode. The “keywords” attribute is squeezed in using the variables feature of Post Snippets (other variables could also be added if you wanted).
Room for improvement
1) If you take a look at the JSON from the Facebook query, you will see that not all albums have a description. It would be nice to add a {description} template tag for the albums which have one, but leave this blank if they don’t. At the moment, if I add a {description} token then it is rendered as “{description}” when no data is found. Would it be possible to have something like this:
{if-exist:description}<h2>Album title: {description}</h2></if-exist:description}2) At the moment I can only control the number of photos per album that are rendered, not the total number of photos. Also, the most recent albums are added first which could cause problems…
Imagine we have two particular photos that should match our search results.
Album “new red shoes” > Photo “great red shoe” (Dated July 2014)
Album “Timeline photos” > Photo “a red shoe” (Dated July 2012).Now this all seams fine, right? But what if newer photos have recently been added to the “Timeline photos” album? In this case that album would be rendered first meaning our 2012 photo would appear before our 2014 photo.
Is there some way what we can extract all of the photo nodes (irrespective of the album), sort these by date and then display the first (x) photos?
I hope this example is helpful for people. If anyone knows of a Facebook plugin that does this out of the box then I’d love to hear about it. I tried using Custom Facebook Feed Pro but unfortunately I couldn’t get it to pull in enough photos from FB before filtering the particular photos.
- The topic ‘Example: Displaying all facebook page photos’ is closed to new replies.
