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.

Make WordPress Admin Bar a Sidebar

Fig. 1: Default WordPress Admin Bar

At least since WordPress released version 3 of its open source website CMS it has included a new feature called the “Admin Bar”. This Admin Bar is a menu bar displayed at the top of your WordPress site’s public-facing pages when you are logged in to your site. It is a handy way to move back-and-forth between your public pages and your site administration pages. (see fig. 1)

Sometimes this isn’t a good solution. Especially if the navigation on the public site is at the top of the page with fixed positioning. In that case the admin bar lays over the site’s actual navigation, making impossible to use while logged in.

Fig. 2: Example of Admin Bar as a Sidebar

I haven’t seen a lot of discussion online about how to customize this without installing another plugin. After attempting some tweaks by manipulating the CSS with Firebug it became apparent that this Admin Bar could easily be styled by simply adding CSS rules that apply to the end of your theme’s stylesheet.

On a recent project I developed some CSS style rules to add to your site theme’s style.css file. These styles will transform the long, horizontal admin bar into tall sidebar. This probably won’t work for a 1024px-wide screen, but for many widescreen laptops and displays this should work well.

It still has the default WordPress admin look so I figured this little bit of CSS might be helpful to others. Below is the CSS that I used to make the Admin Bar appear as it does in fig. 2.

/* WordPress Admin Bar Styles */
div#wpadminbar {
    width:120px;
    min-width:120px;
    height:100%;
    background:url('/wp-admin/images/menu-shadow.png') repeat-y top right #737373;
    border-right:solid 1px #999;
}
div#wpadminbar ul li {
    width:100%;
}
div#wpadminbar .quicklinks > ul > li > a {
    border-width:0 0 1px 0;
}
div#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul,
div#wpadminbar ul li.menupop ul {
    z-index:1000;
    margin-top:-28px;
    left:114px;
}
#wpadminbar .quicklinks .menupop ul {
    border-top:1px solid #DFDFDF;
}
div#wpadminbar div#adminbarsearch-wrap {
    display:none;
}

I make no guarantees, but do let me know if this worked for you or if you see any problem areas.

Dandelion Wine

This batch was made from about 3 lbs. of dandelion flower heads, 6 cans of 100% white grape juice, 12 oranges and 12 lemons ($37 if you don’t count your time and effort to collect the dandelion flowers). I adapted a 1-gallon recipe from Jack Keller for my 6-gallon batch. Most of the recipes say to remove the flower petals from the dandelion heads. Granted, this isn’t too bad for a 1-gallon batch, but when you are multiplying everything times six, you have to find the most efficient way to proceed. Yeast: Lalvin ICV D47

Continue reading “Dandelion Wine”