Customizing your WordPress template to set images within blog post content as Facebook thumbnail
// May 25th, 2011 // Programming, Social Media, Web Design, Web Development, WordPress // David Stinemetze
Using the og:image meta property tag, Facebook allows you to manually set the thumbnail for the page. For example:
<meta property=”og:image” content=”http://www.widgetsandburritos.com/wp-content/uploads/154349_182859125063635_118277658188449_731837_4043510_n-300×231.jpg” />
This code would set the thumbnail to:
Resulting in:
What if you want to do it with WordPress? There are several methods that involve custom fields, featured images, plugins, or completely customized solutions. In my case, I was working on ImageFreedom.com, a site with an existing blog, but a brand new design. All of the previous blog posts didn’t have custom fields or featured images. To avoid having to edit each of those posts manually, we decided the best solution was to take the first image referenced in the post as the thumbnail image, unless one of two scenarios occurred: Either we wanted to use a different image further down in the post, or the post doesn’t have an image, in which case we would use site-wide default image.
On any image we didn’t want showing up as the Facebook thumbnail, we added rel=”nofb” (i.e. “No Facebook”) to the <img> tag
As a result, I created the following function in the functions.php file:
-
<?php
-
function set_meta_thumbnail($post_id = null) {
-
// This is our default image if no other image is found
-
$default_logo = "http://www.widgetsandburritos.com/wp-content/themes/irresistible/images/logo.png";
-
-
// user manually sets post id
-
$post = get_post($post_id);
-
$content = $post->post_content;
-
}
-
// user is inside the loop
-
} else {
-
$content = get_the_content();
-
}
-
-
-
-
// variable for our image src
-
$src = null;
-
-
// if our html content is not empty, then look for img tags
-
// turn off errors to avoid weird issues with DOMDocument
-
$prev_val = libxml_use_internal_errors(true);
-
-
// parse the HTML content
-
$DOM = new DOMDocument;
-
$DOM->loadHTML($content);
-
-
// get all <img> tags
-
$items = $DOM->getElementsByTagName(‘img’);
-
-
// loop through all the images
-
for ($i=0; $i < $items->length; $i++) {
-
// get the specific image
-
$item = $DOM->getElementsByTagName(‘img’)->item($i);
-
// assume this image is the image we want unless otherwise specified
-
$proceed = true;
-
-
// if <img tag has rel="nofb" in it, do not use this as our image
-
if ($item->hasAttribute("rel")) {
-
$rel = $item->getAttribute("rel");
-
$proceed = false;
-
}
-
-
// if it’s okay to use the current image, set $src and then break out of the loop
-
if ($proceed) {
-
$src = $item->getAttribute("src");
-
break;
-
}
-
}
-
}
-
}
-
// revert to previous error display options
-
libxml_use_internal_errors($prev_val);
-
}
-
-
// if $src is set, then use that as our og:image, otherwise use the default
-
else
-
}
-
-
?>
Now all you have to is place <?php set_meta_thumbnail($post->ID); ?> in the <head> section of your header.php file.
So for example, say for this specific blog post, I want the Facebook thumbnail image to be this silly Doctor Who reference cat picture:
Then all I need to do, is set rel=”nofb” to all images prior to the previous one.
<img rel=”nofb” src=”http://www.widgetsandburritos.com/wp-content/uploads/154349_182859125063635_118277658188449_731837_4043510_n-300×231.jpg” />
<img rel=”nofb” src=”http://www.widgetsandburritos.com/wp-content/uploads/facebook-thumbnail.jpg” />
Then as soon as the function finds the above image in the code, it will set that as the og:image.
Why don’t you click here to share this link on Facebook to see that it works for yourself!
/* Facebook */
just a test