PhotoShelter image galleries on Facebook: how to?

Introduction

After reading PhotoShelter’s Facebook Fan Pages for Photographers Guide, I decided to create a Facebook fan page for NiO Photography. Finally! I have many ideas for the fan page, so it will probably be a work in progress for a while. Something I included immediately however, is a gallery (photo wall) with recent images from my PhotoShelter image archive. I did this using the NiO PhotoShelter RSS Gallery widget. So, no uploading of images to Facebook and the gallery automatically refreshes when new work is uploaded to PhotoShelter. Have a look … and make sure to also “Like” the page whilst you’re visiting ;-):

In this post, I will share how I included the PhotoShelter image gallery in my Facebook fan page, provide a few screen shots of sample galleries and provide a link to download three sample applications. To add a gallery to your Facebook fan page, you will need to have the NiO PhotoShelter RSS Gallery widget up and running.

Read more about the NiO PhotoShelter RSS Gallery widget
Read more about animations for the NiO PhotoShelter RSS Gallery widget

Special thanks go out to my colleagues Dan Morris (www.danmorris.com) and Dave Pattinson (www.davepattinson.com) for helping me with setting up and testing the NiO PhotoShelter RSS Gallery widget on Facebook!

Installation steps

Ok, here are the steps for making it work:

1. Get the samples

A link to download the samples is provided at the bottom of this post.

2. Upload the samples

Upload the samples to the “niorssgallery” directory on your domain (facebook1.php, facebook2.php and facebook3.php). Leave these samples as they are for now.

3. Create a Facebook application

This sounds scary, but it really isn’t. Go to develop section of Facebook (http://www.facebook.com/developers/), log in using your normal Facebook credentials (if you’re not already logged in) and hit the “Set up new App” button at the top of the page:

Set up a new application in Facebook

This will take you to the following page:

Create the Facebook application

The only thing you need to do here is to give the application a name and agree to the terms. The “App Name” you specify will be the “Tab” name on your Facebook fan page, so pick one carefully! After clicking the “Create App” button, you will be asked to fill in a Captcha code to verify that you are human. Once that is confirmed, the following screen will appear:

Basic Application Information

Use the screen to fill in a description for the application and to provide an icon for it. The icon will appear next to the tab for the application on the Facebook fan page. Once that is done, click the “Facebook integration” option in the menu to the left (you don’t have to save first). This will take you to the screen below:

Facebook Integration Information

In the screen above, you need to tell Facebook where to find the content of your application:

  • Canvas URL: this is the directory to which you previously uploaded the samples. As per the steps above, this would be “http://www.yourdomain.com/niorssgallery/”.
  • Tab URL: this is the exact url for the sample you want to use initially. For instance “http://www.yourdomain.com/niorssgallery/facebook1.php”.

You can leave the rest of the options as they are. Hit “Save changes” and you will have created the application.

4. Enable the application for your fan page

Once the changes have been saved, the “My Apps” page will appear. Please note that “Edit Settings” can be selected if you want to make changes to the application later:

My Facebook Applications

Select the “Application Profile Page” option. This will take you to the profile page of your application. Select “Add to My Page” in the left sidebar menu. A pop-up will appear:

Add to Fan Page

Select your fan page from the list to enable the application and to finalize this process. Check your fan page to see if it works.

5. Customize the application

Once the sample works, you can start hacking and customize the widget settings to your liking (you can use the readme.pdf that came with the widget)! The first thing you need to do however, is to edit the sample and replace the url’s with “niophoto” in it, to make sure they actually point to your domain. You also need to replace the RSS feed parameter of the widget to make sure your own images show up.

In Facebook, the NiO PhotoShelter RSS Gallery widget offers all of functionality as available when used in for instance WordPress. Images link through to PhotoShelter, can be resized, made square, shown with or without captions or headlines, etc. If needed everything can be styled using CSS.

A few tips:

  • If you edit and rename the sample file, make sure to update the “Tab Url” of the application accordingly.
  • You could create multiple versions of the app, to allow you to showcase recent images for multiple galleries in different tabs.
  • You can make the application the home page of your Facebook fan page.
  • The maximum size of the application, and with that of the widget, is 520x800px.
  • If you want to enable animations (see above), please make sure that the NiORSSGalleryFX1.js file is located in the niorssgallery as well.

Samples

The download offers three sample setup’s (click the image to see a larger version):

Screen shot facebook 1 sample
Screen shot Facebook 2 sample
Screen shot Facebook 3 sample

Sample Facebook1.php

A photo wall set-up with the images visualized against each other.

Sample Facebook2.php

A gallery with square thumbs.

Sample Facebook3.php

A gallery with thumbs that have captions underneath.

Download

The Facebook samples can be downloaded using the link provided below:





If you like the NiO PhotoShelter RSS Gallery widget and decide to use it, please donate, blog about it or provide a credit on your site with a link to my site (http://www.niophoto.com).

The Facebook samples are free software: they can be redistributed and/or modified under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or any later version. The widget is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

If you are interested in using either PhotoShelter or Graph Paper Press and want to sign up for a trial, please consider using the image buttons below to get yourself (and me) a discount …

Join PhotoShelter & Save!
Graph Paper Press WordPress Themes

21 Responses to “PhotoShelter image galleries on Facebook: how to?”

  1. Johan – As ever, a great article! I was with a friend last night who has started to do a lot of paid work developing FB pages for clients here in Bali, and the conversation spurred me on to sort my own out. And now I wake up and see this – perfect timing. I will take a shot at integrating your RSS widget, but have one question – as per usual! Would it be possible to modify the RSS widget so that it pulls out selected images, rather than just the most recent? For instance, using a keyword like ‘FB’ and having those pulled out by the widget? Is that possible? The reason I ask is that I often post images for clients in hidden galleries, but these still have to remain on public view for search purposes. So they pop up in my ‘most recent’ feed…
    Of course, rather than modifying the widget itself, the alternative might be to set up a custom RSS feed with a filter? Again, no idea if that is possible…
    Anyway, hope all is well! Thanks for the post Johan, good stuff! Todays job – sort out my FB page!
    Matt

    • Hi again Johan – I think I might have answered my own question. Simply keyword the images I want to appear on facebook with something very specific such as ‘FCBK’, do a search in PS for the same keyword, then use that RSS feed in your widget? Should work I hope, will give it a go later on… Matt

      • Hi Matt,
        Tnx! Yes that would work perfectly. An alternative would be to create a gallery to which you copy the images you want and then use the feed of that gallery.
        Let me know how it goes.
        Cheers,
        Johan

  2. Thanks for this great write-up, Johan

  3. John Dunne says:

    Excellent, thanks Johan I got very excited about this when I saw your note last week. It’s on my to-do list :-)

  4. Hi Johan,

    I love this facebook widget! It’s been pretty easy for me to install so far too, thanks to the impeccable instructions. I need to play around with it some more to tweek but so far I love it! Thanks again,

    Kat

  5. Hi Johan,

    Just to say this widget works as intended – nice work.

    Was reading over Matthew Oldfield’s post and yes, might need to something similar here – as in having specific images appear rather than whole batches of images appearing as and when they are uploaded. Will look into this at a later date.

    Cheers – Rogan

  6. Jim Lacy says:

    Johan, this widget is a great idea. I’m a little clueless on where to upload the samples as I’m using Photoshelter and don’t know where to create the “niorssgallery”. I looked for the pdf instructions in the download but didn’t see them. Any help appreciated!

    Jim

  7. Jim Lacy says:

    Oops, just realized you were talking about uploading samples where Photoshelter is hosted, not Photoshelter itself. Never mind!!

    • Hi Jim,
      The assumption is that the samples get copied to the niorssgallery directory that you have created previously as part of for instance a WordPress installation! Just let me know if you need more info …
      Cheers,
      Johan

      • Jim Lacy says:

        Thanks for the clarification. I do not have WordPress installed, so can I still make use of the widget? If so, please provide details

        Jim

        • Hi Jim,
          I’m afraid not. The niorssgallery widget needs to be installed somewhere outside of PhotoShelter. If you don’t have a location like that or don’t know someone who can provide you with it, you won’t be able to use it. So the question is if you have access to a webserver somewhere?
          Cheers, Johan

  8. Tiffany says:

    Hi

    Thanks for sharing another awesome widget!

    My question is that when I look at your image sample above, the photo wall looks great, with no spaces between the images, but the sample gallery I downloaded looks very untidy with spaces etc… likewise with the square gallery it looks great above, but in the sample gallery the images are not actually square, but they are in a square box with a black background and the images rectangular inside that. I can’t see how to rectify this in the code?

    Any help would be great!

    Thanks!

  9. [...] also make sure to check out the new animation add-on for the widget and the possibilities for using the widget on facebook!What the widget doesThe NiO PhotoShelter RSS Gallery widget creates dynamic thumbnail galleries of [...]

  10. Johan thank you for creating and sharing what you know.

    Last night I attempted to integrate your widget into FB but was unable to.
    It appears FB is looking to make things little more secure with apps
    by requiring secure connections.

    But wait there’s more! It also appears they are changing the way apps integrate to pages as well.
    https://developers.facebook.com/blog/post/611/

    Do you have an idea for how to go about making your awesome widget work
    with these new changes?

    Thanks
    O

  11. web says:

    Hi there all, here every one is sharing these familiarity, thus it’s nice to read this web site, and I used to pay a quick visit this blog every day.

Leave a Reply

We’d love to hear from you! Your email address will not be published.





Follow responses to this post