Facebook Thumb Fixer for WordPress
Written January 13, 2013. 93 comments.
So I’ve written this simple plugin to handle something I find myself having to manually do on different WordPress themes lately, and that is inserting the Facebook Open Graph meta properties into the <head> and dynamically calling the appropriate featured image path. If the post does not have a featured image then a fall-back image that you can specify is used instead.
What does it do exactly?
This plugin will place the appropriate Facebook Open Graph meta properties into the <head> of your web pages, so that when someone links to your page on Facebook the correct thumbnail will show. The thumbnail is derived from the featured image of your post (or page). For example:
If your post does not have a featured image, then the default thumbnail will take over. For example:
If someone links to your homepage (which traditionally doesn’t have a featured image) then the default image is also used here.
How does it work?
Whenever anyone posts a website link to Facebook, the Facebook system searches the source code for their Open Graph og:image meta property. If it is not found, then it will instead pull (several) images (if any) contained within the webpage. If there are multiple images pulled then the user can select one of the many presented, though the one they choose might not be the one you are happy to have as the primary image shown on Facebook, hence this plugin.
This plugin gets around that problem but taking that choice away from the Facebook user, so only the thumbnail you want is displayed. This is also good in a situation where – for example – many different Facebook users share your web page, you can trust the same thumbnail will always be displayed.
This plugin inserts the og:image meta property into the <head> of your website and pulls the featured image for any post. For those interested, the code output looks like something this:
<meta property="og:image" content="http://localhost/android_analyse/wp-content/uploads/year/month/featured-image-name.png" />
This will be the image that is used when anyone adds a link to your post on Facebook.
What if some posts use featured images and some don’t?
The Default Facebook Thumb is used to fall back on in the event your post doesn’t have a featured image. Ideally the Default Facebook Thumb image would be of your logo or brand.
When your post doesn’t have a featured image, the meta property output in the <head> looks like something this:
<meta property="og:image" content="http://localhost/android_analyse/wp-content/uploads/year/month/your-default-facebook-thumb.png" />
Occasionally it doesn’t work. What’s going on?
Blame Facebook for that. Even though their system searches for the og:image meta property, for different reasons (outside the control of this plugin) sometimes the thumbnail doesn’t load on the Facebook post.
You can fix it for yourself though using the official Facebook debugger tool. Just go there, paste in the URL of your post, and see if the image thumb loads (scroll down to Object Properties). If it does, it should be good now.
Where can I get support and discuss this plugin?
Leave a comment or suggestion below. Thanks!