NextGen Gallery Tweet and Like Buttons

Posted on April 17, 2012March 26, 2014 by brettshumaker

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:
<a class="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

Change that line to read:
<a class="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?> &lt;a class=&quot;<?php echo get_page_link(pageID); ?>?pid=<?php echo $image->pid;?>&quot;&gt;Share Image&lt;/a&gt;" <?php echo $image->thumbcode ?> >

Replace “pageID” with the ID of the page using the “Single Image” template we created. Notice the “&lt;” 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.
$shortcode_output = do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
if ($shortcode_output=="[SinglePic not found]"){
// Some error message because that picture ID doesn't exist.
}else {
echo $shortcode_output;
}

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: www.brettshumaker.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:
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($image)) : ?>

Just below that line, add the following code necessary for the Facebook ‘like’ button:
<?php if (is_page('80')){?>
<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_US/all.js#xfbml=1&appId=xxxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The “appID=” will need to have your appID from Facebook (https://developers.facebook.com/). Next I set up <div> 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 liking “www.brettshumaker.com/images/” which is not what we want.

<div data-class="<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>" data-send="false" data-layout="button_count" data- data-show-faces="false"></div>


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:
<a class="https://twitter.com/share" data-url="<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>" data-lang="en">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="/img/spacer.gif">

There are a lot of other options you can add to a Twitter button but I won’t go into that here.

That’s About It

One other side-note: If you’re curious to see what the NextGen Gallery $image object actually holds you can use “print_r($image);” and it will spew out every attribute contained in $image.

I think that wraps it up. If I’ve left anything out or you see a better way to do something, let me know!

Edit

Here is the full code for the ‘single-image.php’ Single Image page template:
<?php
/*
Template Name: Single Image
*/
?>
<?php
get_header(); ?>
<div id="primary">
<div id="content" role="main">
<?php
$pid = $_GET["pid"];
$pid = ereg_replace("[^0-9]", "", $pid);
$shortcode_output = do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
if ($shortcode_output=="[SinglePic not found]"){
echo ("No picture here");
}else {
echo do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
}?>
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>


Edit

I’ve edited the gallery.php code above. I had encoded “<“and “>” as “&amp;&lt;” and “&amp;&gt;” in the php sections when I shouldn’t have.