How to add a 'Like' button to our custom Lightroom web gallery

This is the third section of my notes on building a custom web gallery for Lightroom. It was last modified January 2013 and relates to Lightroom 4.3.

Go to the Table of Contents to see all available sections.



OK - let's do something a bit more useful - adding a facebook 'like' button.

The default like code is pretty basic, but does require the URL of the page you are liking. I'm thinking we should start easy, and have it like the photo gallery we're creating,
rather than creating a like for each individual picture (though I think the idea is the same, and I might even do it once I have the basics down.

Random aside - found a plugin today on github called LRSwipe. Haven't looked at it, but I plan to to see what additional tricks the author knows that I do not.
https://github.com/fazalmajid/lrswipe

Since this is a new kind of thing, I'm going to create a new section in the menus. This means creating a new f:subdivided_sections (I assume).
As you may remember, we do this in galleryinfo.lrweb in the views area

f:subdivided_sections {

	f:labeled_text_input  {

		title = "URL of Gallery Index",

		value = bind "metadata.siteURL.value",
				
	},

},

and, as we've also seen, we can create a default up above in the model


["metadata.siteURL.value"] = "http://www.davidbarber.org/", -- default for siteURL variable

just in case I forget to populate this, it will just lead people to like my website as a whole.

Now I'm going to save, and see if this actually worked. Yup - there it is. Now I have a variable with the URL of this page that I can pop into a facebook like tag.

Facebook has a super-simple like widget you can use to create a like button at 
https://developers.facebook.com/docs/reference/plugins/like/
which spits out some HTML5 code and tells you where to put it. By default it gave me the following

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_PI/all.js#xfbml=1&appId=MY_APP_ID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

to put after the <body> tag, and

<div class="fb-like" data-href="http://www.davidbarber.org" data-send="true" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>

to put where I want the like button to appear.

This is actually a bit trickier than I expected, because there's two places I need to modify - I'm pretty sure I want the like button in the footer,
and I need to put the first bit (which loads some code from facebook) just after the body tag, which means either the header or the main page (I'm
not sure which yet). So let's see what we need to do.

A side note - I already have a facebook app I created, so it put my app id in. If you don't have one, I imagine it will do something else, though I'm not sure what.

So, to begin with, I modify header.html and add the first code as it is. That loads the facebook scripts. The second code is the tricky bit. I'm opening grid.html,
because right now I don't want to have a like button on individual photos. I'm going to add the like button at the bottom. But I'm going to replace the data-href
with a variable - my siteURL.

On the grid page I see the following line
<a href="$others/<%= image.exportFilename %>_large.html">
This is syntax I recognize from PHP - <%= tells the processor to put the value of image.exportFilename into the final page. I assume we can do the same with siteURL
So I put the following line in the file, and we'll see what happens!

<div class="fb-like" data-href="<%= metadata.siteURL.value %>" data-send="true" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>

which blows up. Turns out I either need to use $model.metadata.siteURL.value or <%= model.metadata.siteURL.value %>. Making that change, it now works.
No like button is displayed on the pages, unfortunately, as LR doesn't like crazy js. I'm pretty sure there's a way to tell it 'put a placeholder here
until we're ready to export' that we could use to at least give some indicator that it's working, but that's something for another day. If I export
the album by clicking the export button, and upload it to my server, it works just fine. Excellent!

A side note - choose a few images, but not too many, to use as an example site - otherwise the export and upload will take all day.


Next Section - Four: TBD

Go to the Table of Contents to see all available sections.