Individual Facebook Like Buttons for Images with NextGEN Gallery

Because I think this is probably of interest to some people but I don’t have a lot of ambition to write about it, I will present these instructions as concisely as possible:

  1. Have a WordPress website up and running
  2. Install the NextGen Gallery plugin
  3. Install FancyBox the old fashioned way or as a plugin
  4. Read this post about Facebook Open Graph WordPress Integration to learn about adding proper Open Graph meta elements to the header of your site.
  5. From your WordPress admin pages go to Gallery > Options > Effects
    1. JavaScript Thumbnail Effect: Custom
    2. Link code line: rel=”gallery”
  6. Then go to Gallery > Options > General Options
    1. Activate Permalinks: YES and define a slug.
  7. Then go to Gallery > Options > Gallery
    1. Show ImageBrowser: YES

The trick with getting NextGEN Gallery to both display your image galleries large images as FancyBox overlays and create unique pages with URLs to display each individual image is to enable the ImageBrowser mode but then alter NextGEN Gallery.php template so that the FancyBox (or other overlay solution) code is used regardless of the “Show ImageBrowser” setting.

With the above settings in place, backup a copy of the NextGEN gallery plugin files from your web server.

/wp-content/plugins/nextgen-gallery/

Then navigate to following file and open it with your favorite text editor.

[YourDesktop or wherever]/nextgen-gallery/view/gallery.php

Scroll down to the part where it says “Thumbnails” in comments. This is the loop that outputs the thumbnail grid that displays your embedded NGG gallery on the page. Find the line below:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>"
<?php echo $image->thumbcode ?> >

and change it to:

<a href="<?php echo $image->imageURL ?>" title="&lt;div style=&quot;float:left;
width:70px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOUAPPIDNUMBERHERE&amp;amp;href=<?php echo urlencode(get_permalink()) ?>%2F
YOURGALLERYSLUGHERE%2Fimage%2F<?php echo urlencode($image->image_slug) ?>&amp;amp;
send=false&amp;amp;layout=box_count&amp;amp;width=50&amp;amp;show_faces=true&amp;amp;
action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=60&quot; scrolling=
&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;
width:70px; height:60px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;" <?php echo $image->thumbcode ?>  rel="gallery">

Save gallery.php and upload to your webserver. If you have the OpenGraph meta elements in place you should now be able to navigate to a NextGEN Gallery on your site, click on a thumbnail and see something like this (right):

This is an individual Like button, allowing your visitors to “Like” specific images within a gallery. Now, it doesn’t work perfectly. Even though you are linking the Like button to a URL that is specific to that image, in my experience Facebook still grabs the first image from that gallery for the thumbnail displayed on the individual’s Facebook Wall. And it seems like the link from Facebook will take visitors to the gallery page of the specific image. Again, this is odd and shouldn’t be, but Facebook is doing a lot of magic here, so who knows why it isn’t working perfectly. The important thing is:

  1. Your visitors can Like individual images.
  2. If visitors see a link to your image on Facebook, clicking the link will take them to the gallery that contains the image in question.

If you get this successfully working to fulfill your needs, be sure to keep a backup of your gallery.php file. Every time the NextGen Gallery plugin is updated this file will most likely get overwritten.

21 thoughts on “Individual Facebook Like Buttons for Images with NextGEN Gallery”

  1. Can other sharing buttons be added to this instead of just the FB like? For instance can it connect to “Sharethis” as well and have g+1, email, print, post to FB wall etc as options?
    Thanks!
    Erica

  2. @Erica: Any of those _should_ work. You should be able to dump any amount of HTML into the “title” attribute of the hyperlink (“a” element, specifically). If javascript is involved, you might have a problem. This Facebook Like Button works sort-of because it is encased in an iframe element.

    The trick is to convert all of the “function characters” – or whatever you want to call them – into their HTML-encoded entities. Slashes specifically should be changed to their URL-encoded entity: %2F. Just keep in mind that you can only use characters that are allowed within element attribute.

    Let me know if the code above needs to be further dissected to make sense. If you need HTML entity codes: bohemianalps.com/tools/characters

  3. I’m trying a few tutorials on this, is it possible for you to fix all the html errors on this tutorial ?

    Thanks!!

    1. Well, this is pretty big kludge. My motivation to spend more time on it is limited. Anything in particular that you are having trouble with?

    1. Where are you seeing this error? I don’t see it in the code samples I have listed above. It might be an issue with copy/pasting html-encoded characters.

    1. I think you might be confusing things. In order to inject HTML into the title attribute certain characters have to be represented as entities. Otherwise the initial page is going to see all of it as markup that should be rendered on the page (even though it would be severely invalid HTML markup).

      The content of the title attribute is then read as HTML by the lightbox javascript that creates the image-overlay with the functioning Facebook Like buttons, etc.

      Like I said, this a really muddy way to do things. Using the title attribute like this is definitely a bad practice. But, sometimes you just gotta make things work. Anyway, I hope this clears up why I have the code samples above the way they are.

  6. I got the images to display with the LIKE button under the enlarged image after the thumbnail is clicked, but the ‘fancybox” or “lightbox” effect is not getting rendered. I copied pasted your javascript and changed YOUAPPIDNUMBERHERE and YOURGALLERYSLUGHERE. Pls advise.

    Thank you.

    1. Just so we’re on the same page, none of the code highlighted above is JavaScript. It’s all just HTML markup and text.

      When you say “under the enlarged image”, where is this enlarged image displayed? After you click on the thumbnail are you sent to a new URL that only displays the full size version of the image? If that’s what is happening, you are experiencing the “Image Browser” mode generated by the NextGen plugin. And, consequently, if your gallery is working like that, either you pasted the large glob of text above in the wrong place or your Fancybox plugin is not working correctly.

      To trouble shoot – and I say all of this assuming that the NextGen gallery still works the way it did when I originally wrote this – view the gallery page with all of the thumbnails in your browser and View Source. Look to see that the big hideous glob of text is being generated for each individual thumbnail.

      If that output is being generated correctly, it means that most likely the fancybox or lightbox plugin (whichever you are using) is not running properly, not seeing the rel=”gallery” attribute and so you are not seeing the effect.

      Now you will need to look at the _head_ element of the source of that page to confirm that the necessary fancybox/lightbox .js files are linked and that they are being activated, usually with the jquery document.ready function.

      Like I said above, this is a pretty murky solution that will most likely crumble like a house of cards if one little detail is out of place or the NextGen gallery plugin changes its behavior. It’s going to take some TLC and some basic working knowledge about how javascript acts upon the web page to make your specific situation work correctly.

  8. Just to update, this works for me. Worked on it for 30 mins and got it working..

  9. Pingback: What is an SEO friendly gallery plugin for WordPress with permalinks and Facebook Like Button integration for single images? - Quora

  10. I’ve been working on this for a few hours, and not sure what can be wrong. It lists out the images with the facebook logo/like next to it, with code showing:

    ” rel=”gallery”>

    Any ideas? I’ve tried a couple of different lightboxes in case that was the problem, checked and rechecked code and am clueless.

    Any help is GREATLY appreciated!

  11. Nevermind on that…I had decoded the code thinking it was an error and then just read a comment. Ooops. Now I am trying to see why it won’t show it as a lightbox?

  12. @Kelly – Ugh… yeah, this is messy stuff. Good luck troubleshooting! I hope you can make it work for your needs.

  13. Does anyone have this working with showing a thumbnail in Facebook? I have it working (thanks!) but the thumbnail shows up blank in Facebook. Any insight is really appreciated.

    Also – I am using prettyPhoto for my lightbox so I had to do things a little diffentely, but essentially it is the same. I can’t figure if it is a prettyPhoto issue or a NextGen issue or…?

  14. The Facebook thumbnail is tricky. Especially since you are not linking to an HTML page but an image file. As I state at the end of the post above, Facebook seems to want to grab the first image of the gallery rather than the specific image that the individual “liked”. It’s frustrating and illogical, but your playing on Facebook’s playground and they do things as they see fit. Good luck!

  15. Definitely frustrating…I’ve been researching it for days now and seems many people are frustrated at this. Just was hoping someone got tricky and found a work around. Thanks for the response 🙂

  17. Jason, thank you for posting this help. I was looking for a way to add more buttons like @Erica was saying. You’re right – hacking NextGen Gallery is tricky.

    All the comments here inspired me to hire a programmer and create a plugin to add sharing buttons. It lets you share your images on Facebook, Pinterest, Google Plus or Twitter, with icons that show on hover.

    Jason, if you’d like to review it – or if any of you would like a free review copy, please let me know — I would love to know what you think and a blog post or mention would be ever so nice.

    Thanks for getting this discussion going on sharing images. It looks like something many of us want an easy way to do.

Comments are closed.