Adding Facebook Comments to a Lightroom HTML Gallery template

Posted by Omri on August 31st, 2009

If you prefer displaying your photos on your own website using Lightroom’s web galleries over uploading your photos to Facebook then one of the drawbacks is the lack of commenting. Fortunately, there’s a way to add Facebook Comments to your own website and gallery. See an example here.

facebook comments and lightroom

Step One: Enable Your Website To Work With Facebook Comments:

  • Go to http://www.facebook.com/developers/createapp.php to create a new application.
    1. Enter the name of your site in the Application Name field, read and accept the Developer Terms of Service, then click Save Changes.
    2. On the Basic tab, keep all of the defaults and you should upload an Icon. This icon appears in Feed stories published on Facebook. Take note of the API Key, you’ll need this shortly.
      Note: If you already have a Facebook API key for your website or another Facebook social widget like the Fan Box or Live Stream Box), then you must use that API key instead.
    3. On the Connect tab, set the Connect URL to your website URL so Facebook can verify the call is coming from you.
    4. (Optional) Include a logo that appears in the Facebook Connect dialog. Next to Facebook Connect Logo, click Change your Facebook Connect logo and browse to an image file. The logo can be up to 99 pixels wide by 22 pixels tall, and must be in JPG, GIF, or PNG format.
    5. Click Save Changes.
  • Download a cross-domain communication channel file, then upload it to the root directory of your website. This file will allow your site and Facebook to send data back and forth.

    Step Two: Edit The Lightroom HTML Gallery Template

    Begin by finding the Lightroom HTML Gallery template on your computer. These are the files that Lightroom uses to create the various HTML files that make up the gallery. If you’re using a Mac then this post is helpful in finding the "default_html.lrwebengine" files. If you’re using a PC then navigate to:

    C:\Program Files\Adobe\Adobe Photoshop Lightroom 2.3\shared\webengines\default_html.lrwebengine\

    In this directory you will see various files, including "head.html", "foot.html" and "detail.html". Start by opening the head.html file in a text editor. Change the second line from:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    to:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"  xmlns:fb="http://www.facebook.com/2008/fbml">

    Save and close the head.html file.

    Next open the "detail.html" file. Scroll to the position where you would like the Facebook Comments to appear. In my galleries I’ve placed the comments below the image and above the footer, like this:

      <!-- FACEBOOK COMMENTS -->

        <center>

         <div id="facebookcomments" style="margin-top:8px;">

            <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

            <fb:comments xid="<%= image.exportFilename %>" css="http://so.ca/photos/fbcomments.css?v7"></fb:comments>

            <script type="text/javascript">

              FB.init("YOUR_API_KEY_HERE", "/xd_receiver.htm");

            </script>

          </div>

         </center>

     
    Don’t forget to replace YOUR_API_KEY_HERE with the Facebook API key you received earlier. Also, if you did not place your xd_receiver.htm file in the root of our website, then enter the correct path.
    Also, notice the xid="<%= image.exportFilename %>" line. This basically assigns a unique reference to your photo for Facebook. It uses the name of your photo from Lightroom. I name my images using a custom template like this: 20090820_lakehuron_33 which ensures that all of my photos are uniquely named. If you don’t have a unique naming convention then you could run into problems with Facebook Comments. For example, if you have two images named “mycat” then both images will display the same Facebook comments.
    If you want to customize the colors and styles of the Facebook Comments then you need to include css="http://so.ca/photos/fbcomments.css" otherwise remove it from the <fb:comments> tag. If you include it then make sure to create a fbcomments.css file. You can copy and paste mine from here if you like. Make sure you change the path to where you place it on your server.
    Step Three: Export Or Upload Your Gallery To Your Website
    The last step is to go back to Lightroom and click on Export or Upload to generate your gallery with the newly changed template files. That’s it!
    • Tags: , , 
     Tweet This Tweet This! 
      This entry was posted on Monday, August 31st, 2009 at 10:58 pm						and is filed under Photography, Technology. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site. 
    Leave a Reply