Integrating WordPress and Facebook is a must-have feature for any modern blog. While attempting to tie this site to Facebook I discovered a few ‘gotchas’ when using third-party media hosting sites. When inserting images in to posts via URLs a number of critical features are lost in the process. I store all my images on a third-party media hosting site called SmugMug. SmugMug is invaluable because it integrates seamlessly with Lightroom, and gives me one central location from which to control the global use of my images. WordPress is very good at supporting images that are uploaded to the hosting server via the media upload process, but has generally poor support for URL based images when using third-party sites. Worse for the wear, several advanced plugins and post features don’t work with URL included images at all. The big issue for Facebook and WordPress integrations is the lack of support for URL based OG:Image tags.
Facebook’s Open Graph feature is what allows websites to publish specific objects to Facebook when users of their service do things like share links, like items, etc. Web developers can write custom code that assists Facebook OG in selecting things like title, summary, and image. Doing this right ensures that your site is best represented to other Facebook users. Not doing anything could mean your site does not put its best foot forward to the Facebook horde. Such is the case with WordPress and URL based images in posts. Facebook OG is unable to find the URL images in a post, and thus ends up selecting things like logos or other non-related images to display on Facebook time-lines, etc.
WordPress Custom Fields To The Rescue
One possible solution to the WordPress URL based og:image limitation is using the custom fields feature in WordPress to handle this meta data. Before diving in to the how-to, I should mention that an invaluable tool for determining how Facebook OG will process your pages (and render links to FB users) is the debugger tool available here: http://developers.facebook.com/tools/debug
One important note: Make sure that the WordPress Facebook plugin is the only module generating OG tags. If not, the Facebook debugger will complain using terminology like this:
'article' is invalid because it specifies multiple 'og:url' values
That is a dead give-away that you’ve got more than one plugin producing OG values. In my case, I have both the SEO and Facebook plugins installed. Going to SEO->Social and unchecking “Add OpenGraph meta data” solved the multiple values issue.
Custom fields are a base feature in WordPress that allow you to specify any custom meta data on any article. The feature is quite flexible and can be used with minimal pain. When you are writing a post or page, you’ll see two little boxes in the upper right: “screen options” and “help.” Click screen options and ensure “custom fields” is checked. This will display the Custom Fields section on the edit page. In that box, find “Add New Custom Field” and select “enter new”. You can name the new field whatever you want. I am using “og:image” in my example, but you might want to call it something like “Facebook_OG_Image”. In the text field for each post, add the URL to the image you want displayed at Facebook when someone links your page or post. Note that you only need to add the field once. On other posts it will show up in the custom fields dropbox, making the process quite easy.
Update The Template
WordPress custom fields don’t do anything on their own. You’re going to need to add some code to your template to get the og:image meta tag to show up correctly. The tag needs to be inside the page
<head> tags. The file that includes these tags is usually found in wp-content/themes/<your theme>/header.php. If your theme doesn’t have the head tags there, you may need to hunt around to locate the right file. Inside of header.php, locate the
<head> section and add the following code:
<meta property="og:image" content="<?php $post_id = get_the_ID(); echo get_post_meta($post_id, 'og:image', 'true'); ?>" />
Keep in mind that my example is quite simple. You may want to add a more complex bit of code that selects a default og:image if you have not specified one, for example. Now when you create a page or article with a custom “og:image” field it will show up in Facebook OG as expected. Enjoy.