Facebook Thumb Fixer for WordPress

Written January 13, 2013. 12 comments.

Wordpress Plugins

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!

Download

Facebook Thumb Fixer (WordPress)

Some of my other WordPress plugins

Who is That Web Guy?

Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.

12 Responses to Facebook Thumb Fixer for WordPress

  1. Wilhelm says:
    February 1, 2013 at 7:50 am 
    	
		Hi Michael,

I wanted to thank you for building your Facebook Thumb Fixer Plugin. It is quite fantastic, It’s works like magic. That being said, I recently upgraded the plugin, and for some reason, it is no longer working on my site. I understand that it might be a fb issue, and I’ve attempted to go to the fb debugger, but I’m not a terribly technically minded… I can’t confirm where the issue lies. Any help would be appreciated!
http://www.silhouettemasterpiecetheater.com
  2. That Web Guy says:
    February 11, 2013 at 10:52 am 
    	
		Hi Wilhelm,

Sorry for the late reply. Your comment was marked as spam and I’ve only just now discovered it :-(

Anyway, I’ve just checked and see the Facebook lint tool sees your website perfectly fine: http://goo.gl/0eD4E

…yet when I share the page on my Facebook wall I see a different thumbnail. Unfortunately I have no explanation for this other than Facebook appears to be ignoring the o:g property it’s supposed to be looking for.

It could be a cache thing on FB’s end. They do cache the thumbnail so you won’t see a change for 24hrs even if you change it: http://goo.gl/RrjRP

I hope this helps.
  3. Changsuk says:
    February 26, 2013 at 10:54 pm 
    	
		Hi!

I installed your Fixer plugin along with the official facebook plugin.

It didn’t work right away, so I tried the debugger as you instructed on the help page.
And then, I got an error message on duplicated og:url declarations.

When I remove three lines of og:url from your plugin’s source, it works perfectly.

I’m not aware of php things, but this information might be helpful for you.
I’m waiting your official update for this situation, if this is really a bug.

Thank you for your great plugin!
  4. That Web Guy says:
    February 27, 2013 at 5:48 am 
    	
		Hi Changsuk,

Thanks. Duplicated og:url declarations means exactly that, so I’d hazard a guess you have another plugin that was also inserting the open graph meta properties into the header (a quick search for og:url of the page HTML would confirm it). I’ve seen that happen before – though the name of the other plugin that caused it escapes me right now.

So removing the lines of code that output og:url in my plugin would solve this for you because that conflict would no longer be there.

Technically that’s not a bug in my plugin, but rather just trying to output something that another plugin is already doing, assuming Facebook’s debugger tool was telling the truth.

Hope that helps!
  5. Camilla Corbett says:
    March 19, 2013 at 7:15 pm 
    	
		Hi 

I installed your plugin yesterday, and it is working really good, with the theme. But having said that, i have one issue. Is it possible to set a permanent thumbnail for the frontpage? 

Its not build up under pages, so i dont get the option to add a permanent/specific thumbnail. 

But can i change a code somewhere? 

Best regards, 
Camilla Corbett
  6. That Web Guy says:
    March 19, 2013 at 7:25 pm 
    	
		Hi Camilla,

If you go to Settings -> General and scroll to the bottom you can specify a default thumbnail, which your front page will use as well.

Is that what you meant?
  7. Brad says:
    April 1, 2013 at 11:15 pm 
    	
		Howdy, 

I too am getting the error:

Object at URL ‘http://drinkupgroup.com/‘ of type ‘article’ is invalid because it specifies multiple ‘og:url’ values: http://drinkupgroup.com/, http://drinkupgroup.com/.

I dont think I have any other plugins that do anything like this.

Hope you can help.

Brad
  8. Brad says:
    April 1, 2013 at 11:20 pm 
    	
		Ooops figured it out. Its the new publicize module in Jetpack – this is going to effect soooooo many people! Why havent wordpress made the OG bit an option – d’oh!
  9. Jennifer says:
    April 19, 2013 at 1:06 am 
    	
		Hi, Im afraid your plugin isnt working for me. I’ve tried the facebook debugger and its coming up with the error “Error parsing input URL, no data was scraped.” Any idea whats wrong?
  10. That Web Guy says:
    April 19, 2013 at 6:07 am 
    	
		Hi Jennifer,

I’m not sure why that would be, unless you’re using another plugin that also insert the open graph meta properties into your head. A quick look at the source code of your site shows a bunch of HTML comments for Shareholic open graph tags which aren’t outputting anything:

< ! -- Shareaholic Notice: There is no featured image set -->
< ! -- / Shareaholic Content Tags -->
< ! -- Shareaholic - Open Graph Tags -->
< ! -- Shareaholic Notice: There is no featured image set -->
< ! -- / Shareaholic - Open Graph Tags -->

…so perhaps there is something else going on with your theme that is causing the problem. Wish I could help more but without access it’s hard.
  11. Michael Diaz says:
    April 23, 2013 at 1:42 am 
    	
		Hi. I installed the plug in and I put the image URL into the settings > general > facebook thumbnail thing but when I link the blog or articles on Facebook, the default thumbnail that I uploaded isn’t the first option. The header pic is. You still have to scroll click over to the 2nd or 3rd image sometimes to get to it. Is there a way to actually make it the default pic? Thank you.
  12. That Web Guy says:
    April 23, 2013 at 6:33 am 
    	
		Hi Michael Diaz,

I just looked at your source code and it appears you’ve got two instances of the og:image property, one at line 18 (which references cropped-wordpress-header11.png as you mentioned) and the other being generated by my plugin at line 28. Facebook is choosing the first one it finds.

If the first one is hard coded into your theme then just remove it and you’ll be good to go. Otherwise if it’s being generated by another plugin you’l have to decide what you want to do about that (remove the other plugin or remove mine).

Hope that helps!

Leave a Reply

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

− seven = 1

BTT