NextGen Gallery Tweet and Like Buttons

If you’re like me, you love most features of the NextGen Gallery WordPress plugin. Most. You also probably think that there are several features missing from the plugin. One such “missing” feature is the lack of a unique URL (other than the direct image path) for a single image. And if you don’t have a unique URL for each image, how can you share a link to that specific image across your social networks? I’ve worked out a way to achieve this without modifying the core NextGen Gallery plugin files.

Since the documentation on this plugin is pretty scarce, it can be difficult to figure out how to do something. So forgive me if there is a better/existing way to do this with the plugin as-is.

Here we go.

Getting Started

First things first. Go download a copy of the NextGen Gallery plugin from the repository and install it in WordPress. Next, you’ll need to make a new folder in your theme directory named “nggallery.” Now you need to copy “gallery.php” and “singlepic.php” from plugins>nextgen-gallery>view and paste it in the “nggallery” folder you just made. Also you’ll need to set up a gallery with a few photos so we have something to work with.

Next we need to make a page template that is going to serve our single image to the user. I named my template “Single Image.” Then go add a new page, make note of the page ID and set the page to use our new page template. (If you need a refresher on creating page templates, check out Pages in the Codex). We’ll add some more content to our page template in a little bit.

Edit Gallery.php

Now open up “gallery.php” (in your theme folder>nggallery) and we’re going to add a link at the end of the image caption. Line 42 should read:

Replace “pageID” with the ID of the page using the “Single Image” template we created. Notice the “<” sequences, you need to use these for the greater than, less than, and quote characters, otherwise they’ll break the <a> tag we’re working within. The “?pid=<?php echo $image->pid;?>” bit is what pulls the image id and adds it to the url of the “Share Image” link so we can access it from our “Single Image” page.

Edit Single Image Page Template

Now it’s time to edit the “Single Image” page template that we created earlier. Where you put the following code depends on the structure of your site but I just put this code inside my “content” div. The first thing we need to do is use $_GET to grab the pid value from the URL we sent from gallery.php.$pid = $_GET["pid"];

Next, since the only thing we should ever be getting here is a number, let’s sanitize the value to make sure nobody is trying to inject any php code into the site. This line should be sufficient enough:

$pid = ereg_replace("[^0-9]", "", $pid);

Now we need to make sure that the picture ID we have is valid. We’ll do this by checking the output of NextGen Gallery’s [singlepic] shortcode.

Since the [singlepic] shortcode always returns the string “[SinglePic not found]” we can check to see if the shortcode output equals that string and serve the user an error message. If it doesn’t equal that string that means the picture ID is valid and we’ll go ahead and echo the result of the do_shortcode function.

So now if you view your gallery and launch the slideshow you should see the “Share Image” link in the caption. Clicking that link should open a URL something like:

http://www.brettshumaker.wpengine.com/images/?pid=3

Great. Now let’s add the Facebook ‘like’ and Twitter buttons.

Add Facebook and Twitter Buttons

Open up “singlepic.php” (from your theme folder>nggallery) and look for the line:

Just below that line, add the following code necessary for the Facebook ‘like’ button:

The “appID=” will need to have your appID from Facebook (https://developers.facebook.com/). Next I set up

to place the social share buttons. Now to get the URL I created to play nice with Facebook, I had to add “index.php” before “?pid=3.” For some reason, Facebook kept dropping ?pid=3 and I was left with linking “http://www.brettshumaker.wpengine.com/images/” which is not what we want.

I used “the_permalink()” to start off the URL; then added “index.php?pid=” and echoed the picture id with “$image->pid” to complete it. You can change the data-layout, data-width, and data-show-faces values to fit your site, these are the ones that worked for me. That wraps up the Facebook ‘like’ button. On to Twitter, which was much easier:

That’s something I didn’t try only because the client didn’t request that functionality. However, I think it would be tricky because anything that shows up as a ‘caption’ in the thickbox overlay *must* be put into the ‘title’ attribute of the link. Theoretically, you could hard code the “.fb-like” div above into the title attribute, but Facebook does run some Javascript code on that div class. So I don’t know how stable that would be.

Hello,
Thanks for this tuto !
i don’t understand where i do the redirection for single-image.php…Â
Â
i changed the url to <?php echo the_permalink() ?>index.php?pid=<?php echo $image->pid ?> like : http://www.cisdesigns.fr/clubs-de-golf/?pid=132 but when the page is loaded, i have the gallery page !

Â @zigzagadÂ Hey zigzagad, can you post a link to your full code from your “singlepic.php”Â someplace like pastebin.com? I’ll be able to get a better idea of what happened but it looks like the php code isn’t being parsed.

Â @zigzagadÂ See my edited code for gallery.php above. Apparently I got a little too excited encoding the angle brackets and had encoded the ones around the php tags. Let me know if that fixes things. Thanks!

Hi Brett – thanks for the tutorial! I unfortunately got stuck at:
Â
“Then go add a new page, make note of the page ID and set the page to use our new page template.”
Â
I went to make a new page, but I wasn’t sure how to actually SET the page to use the new template (I created the single-image.php page using the code you have here).
I am using another wordpress theme (oxygen). Does it mean that I will have to upload gallery.php, single-image.php and singlepic.php to my “themes/oxygen” folder instead of having everything in “themes/nggallery”??
Â
I am sure I am missing something but not sure what –
Â
thanks a ton!
gabstero

Another question about “Edit Gallery.php”. So adding a certain page’s ID there means that this tweak will only work with that particular page ONLY? How about the galleries I have on other pages?
Â
thanks

Â @gabsteroÂ Hey Gabstero! The way this tweak works is that the page we created that uses the “single image” template basically serves as a sort of ‘utility’ page. Meaning that every gallery you use this technique with will use that page to serve a single, sharable image url. Let me know if that makes sense.

Â @bshumaker thanks for the reply, Brett! So I created a “utility page”, using the Single Page template, took that id (278) and placed it in the snippet that goes in the gallery.php (get_page_link(278). Here’s an example of what I am getting: http://photogabi.com/food-culture
I am also using Pintrest for Lightbox plugin. Tried deactivating it, nextgen stops working all together (getting a regular jpeg when I click on the thumbnails). I followed your instructions very closely, but I am not sure what I am doing wrong. The “Food Culture” page doesn’t uses the “single Image” page template.
Any hints of where should I look? Thanks a ton!

Â @gabsteroÂ Alright, I think I know what the issue is. Zigzagad was having a similar issue and I’ve updated the code that goes into gallery.php see my edit above. The code should now be:
<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>Â <a href="<?php echo get_page_link(pageID); ?>?pid=<?php echo $image->pid;?>">Share Image</a>” <?php echo $image->thumbcode ?> >
Â
Try replacing that and see if that fixes the problem.

Â @bshumaker thanks Brett – looks like I broke something. I replaced the gallery snippet with the above code and it does not work. http://photogabi.com/food-culture
Do I need to have a certain nextgen image Effect (shutterm Thickbox, etc.?) thanks again!

Â @bshumakerÂ Brett – thanks. i did and now I am getting a link to the extent ofÂ http://photogabi.com/utility?pid=21 when I click on the share image link. It brings me to an empty page. Looks like it’s the page I created (called utility), which uses the single page template.
Also – do you have a demo of how these buttons look like? I thought the FB and Twitter buttons will show up on the actuall popped up image. Thanks again!

@bshumaker I’ve tried to do that, but I Have the same problem in this page (http://kalangoseco.com.br/cobertura-festa-do-preto-com-andre-marques-06-10-2012), donÂ´t show me the icon of facebook just a text Share Image (Compartilhe Imagem in portuguese) and when Click on this link, open a “simple_image” page, but empty, whitout the image that I want to share. If the image appears on the page it solves my problem…

@bshumaker I Think that’s ok, or I can’t see the mistake (I’m no good whit php) but you can see the code on this pastebin: http://pastebin.com/cGmb1VjH
Ps. I’m using a Elegant them template, it don’t matter right? Thank you for the help!

@HenryMKalangoÂ I see that you have the actual template set up correctly but I don’t think you’ve actually set the ‘single_image’ page to use that template in WordPress. Here is the body tag I see when I click on “Compartilhe Imagem”Â <body class=”page page-id-1460 page-child parent-pageid-11 page-template-default chrome”>. I think the “page-template-default” shows that it’s not set to a particular page template within the WordPress admin.
Â
You’re correct…the theme you’re using should not matter.
Â
Also, you have an unclosed <script> tag right before “</head>

@bshumaker Thanks a lot man! Foolish mistake I’ve commited. It’s ok now, I can see the image when I click on “Compartilhe Imagem” and enter the page whit the phot right on there. The twitter button is ok, but the butto of facebook dont send the right link to my facebook wall ( the link goes whitout – index.php/?pid=XXXX) and because of it, when I click on the post goes to only single_image page, without the picture (whit the text, no picture here).

@HenryMKalangoÂ Glad I could help! It looks like you have “<link rel=’canonical’ href=’http://kalangoseco.com.br/single_image’ />” in your header. Also, the lines after “<!– Start AL2FB OGP –>” are specific to Facebook’s OpenGraph and the “og:url” may interfere with this also.
Â
Try removing the “<link rel=’canonical’…” mentioned above first and see if that works. If not…I think that other block of code is coming from the “Add Link to Facebook” plugin.
Â
Let me know what you find out.

@bshumaker I understood. But I removed the only stuff relationed whit canonical in the theme (on the file header.php) but it continues generating that code “link rel=canonical…” In my extensive search I dont find what code is generating it =/. And I deactivate the plugin “add link to facebook”. Do you have Idea where’s the code who generating the canonical stuff in this theme? Thank you again
Â
Ps, I have others plugins that help me a lot, like wordbooker and sharethis, they can interfere too?

@bshumaker I dont have the Yoasts SEO plugin. There are not SEO plugins in this theme. But I cant find the part of the code is generate it. I deactivate the others social plugins, like share this, add link to facebook. The only one remains is wordbooker.
The ET themes bring SEO options on the own menu, and I can choose or not to use canonical in the single, in home, or on category pages. I dont actvate this off course, but I see that thing whit “rel=canonical…” only goes on category and single. Any idea to help please?

@bshumaker Hehehe. I change the (data-href=”<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>”) to data-href=”<?php get_site_url(); ?>” and works fine! The page single_image generate an url whit the $pid of each image, so I just had to pick the url. 🙂

@bshumakerÂ Â @WOCTX Ok thank you, now as I am very used to using WordPress and learning how to customizing it to a point.Â I am very much confused when it comes to doing anything in php, could you check out my website http://photographyby.woctx.com and give me either step by step directions to create this “Single Image” utility page, or provide me with a template to go off of?Â I have been looking at your post and as you did a great job of explaining, my focus is a bit hard to harness.Â So something with direct explanation and how to with out all the other content would helpÂ I get very easily distracted and need simple.Â If you can not I understand. Â
Â
Thank you for your time and help
Philip

@WOCTXÂ As long as you have the “Single Image” template file created as I’ve outlined above, all you need to do is create a new, blank page within WordPress and select the “Single Image” template from the drop-down list in the “Page Attributes” section as shown in this screenshot:Â yfrog.com/kh35931538j

Great tutorial mate! I followed every step and worked pretty good. The only issue I have is that now when some clics on an image, I can see the facebook and twitter buttons, but not the prev and next image link. I think the links are still there but in a second line I can’t see. How can I solve this?

Hi, great tutorial! Anyway, I’ve got a problem, just at the beginning: i follow your instruction, so i’ve created a new folder under my theme’s directory, and copied gallery.php and singlepic.php under it, but also after I’ve created the new page template, the link “Share Image” never appears under my thumbs. It’s like the theme doesn’t “see” the new file i’ve copied in it… any suggestions?

HI Brett,
I followed you tutorial but couldn’t get to work… I created single-image.php and copied your code entirely. then i created a page “single_image” and linked that page to “Single Image” Template.
Then i replaced the code to gallery.php and singlepic.php by creating a folder(nggallery) in my theme folder.
What i see now is when i click on image i see “Share Image” but not the facebook like button and clicking on Share Image doesn’t share the image in facebook.
Where should i copy the div for facebook like button and i didn’t get why this code is being used in singlepic.php <?php if (is_page(’80’)){?>
Should we use the id of single page here??