In my blog posts I use the NextGEN singlepic fairly often to show my photos. However I noticed that the Facebook share system was not picking up my photos, or post descriptions. To fix this problem I added the Open Graph Plugin, and made a few code changes. The Open Graph Plugin is a very basic, but well coded, and extendable solution to adding Open Graph meta data. Hopefully WordPress will add this, or something like it, to the code base in a later release.
This solution doesn’t work out of the box, and I did have to make two modifications:
The Excerpt
By default the Open Graph Pulgin uses the blog description:
1
2
3
4
| function opengraph_default_description( $description ) {
if ( empty($description) ) $description = get_bloginfo('description');
return $description;
} |
However I wanted it to use the post excerpt (if it was available), so I changed it to:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function opengraph_default_description( $description ) {
if ( !empty($description) ) {
return $description;
}
// Use the blog description if we are not looking at
// a single page, or no excerpt exists.
$description = get_bloginfo('description');
global $post;
if ( is_singular() && !empty($post->post_excerpt) ) {
$description = $post->post_excerpt;
}
return $description;
} |
At first I thought of using the post content ($post->post_content); however, facebook has issues if there are non standard tags (like short tags) in the description, and it doesn’t look nice when you try and encode that content, so I had to use the excerpt.
The Default Image
If you are using the build-in “Media” feature of WordPress, then the code provided in the plugin works fine:
1
2
3
4
5
6
7
8
9
10
| function opengraph_default_image( $image ) {
global $post;
if ( is_singular() && empty($image) && has_post_thumbnail($post->ID) ) {
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail');
if ($thumbnail) {
$image = $thumbnail[0];
}
}
return $image;
} |
However this relies on the wp_get_attachment_image_src function, and there is no hook in WordPress to override it in NextGEN. While you can use NextGEN images as the “Featured Image”, most of the functions that access the featured image don’t have hooks, so I suspect that this is more a WordPress limitation than a NextGEN limitation.
The solution I came up with was to attach to a hook in the Open Graph plugin from the NextGEN plugin. I added the following code to the nextgen-gallery/nggfunctions.php file:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| function ngg_og_image( $imageURL ) {
global $post;
if ( is_singular() && empty($imageURL) && has_post_thumbnail($post->ID) ) {
$thumbnailID = get_post_thumbnail_id( $post->ID );
// If the post thumbnail id has the form ngg-<number> then it is a NextGEN image.
if ( is_string($thumbnailID) && substr($thumbnailID, 0, 4) == 'ngg-') {
$thumbnailID = substr($thumbnailID, 4);
$image = nggdb::find_image($thumbnailID);
if ($image) { // Safety check for null pointer.
$imageURL = $image->thumbURL;
}
}
}
return $imageURL;
}
add_filter( 'opengraph_image', 'ngg_og_image' ); |
That code will check if the featured image is from the NextGEN Gallery, and return the NextGEN thumbnail URL.
With these changes the Facebook share button works correctly. If you want to see how it works, click on the Facebook icon below. (this post has a desktop screen shot as its Featured Image.)
