nextgen-gallery-post

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

Change that line to read:
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?> &lt;a href=&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: http://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 class="social"> 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 “http://www.brettshumaker.com/images/” which is not what we want.

<div class="fb-like" data-href="<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>" data-send="false" data-layout="button_count" data-width="80" 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 href="https://twitter.com/share" class="twitter-share-button" 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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

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" class="container" 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.

60 thoughts on “NextGen Gallery Tweet and Like Buttons

  1. I got lost at the Edit Single Image Page Template could you post a example page with all the code in it. Thanks very much!

  2. Humpty: I’ve edited the post to include the full code for single-image.php page template. Let me know if you have any other questions.

  3. 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.

  4. I guess if I loaded the caption with  a set placeholder phrase I could then replace it with the Facebook code using Javascript, providing it fired after thickbox.

  5. It’s good ! I connected my neurons… and i found the solution. Make a simple page… it’s too easy, shame on me !

    1.  @JosephBraun I just switched over to the shutter effect on my test install and everything still worked. The “Share Image” text didn’t look very pretty so you may want to tweak the styling, though.

    1.  @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.

      1. @bshumaker @zigzagad Hi Brett, I haven’t touched singlepic.phpb yet, the above is the url generated for the ‘share this’ link

        1.  @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!

  6. 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

  7. 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

    1.  @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.

      1.  @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!

        1.  @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.

        2.  @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!

  8. Where I have to put the “div class=fb-like”? I want to show the link just on the bigger image, not below the thumbs. Please Help! ^_^

        1. @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>

        2. @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).

        3. @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.

        4. @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?

        5. @HenryMKalango I’m not sure…I think Yoast’s SEO plugin generates it, though. I suppose it could also be hard coded into your header.php file as well.

        6. @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?

        7. @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. :)

    1. @WOCTX Nope! Once you have the “Single Image” utility page and template made, that one page will be used for all images.

      1. @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

        1. @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

  9. 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?

  10. Pingback: URL
  11. I’ve tried to get this to work with prettyPhoto?  Have you tried this before – I can’t seem to get it to work with your current instructions.  Please let me know.

  12. @bshumaker  Thanks for this tutorial.  I actually used it to get rid of the lightbox effect and go straight to the image view, thus giving me more ad impressions :)

  13. could you please post links to sites with your plugin working or demos? I’m have difficulty finding actual working examples. Thanks.

  14. 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?
     
    thanks in advance!

  15. Hello, nice tutorial.
    I have a doubt is this the same process to add comments to each picture??
    I ‘ve been looking for a plugin and it looks like there isn’t one.
    Thank you.

  16. Followed the tutorial to a T (I believe) and for some reason the single page with template applied shows nothing. Any help?

  17. 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??
     
    Thank you in advanced
     
    prince_of_darkness666@live.comBre

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>