Debugging Facebook in Your WordPress Installation

Facebook’s Open Graph Protocol has made it really simple to integrate your WordPress with Facebook’s Open Graph so your readers can share your content Facebook.  Any site, not just WordPress, can use this feature to socialize their content. Many of the sites hosted on WP Engine have the Facebook Plugin and a Facebook App, but the following tool will resolve Facebook API issues on most sites.

If you’ve had trouble with Facebook’s API displaying your content correctly, that typically means the <meta> tags Facebook created for the Open Graph are undefined in the header of your site.  Here’s how to use the the Open Graph debug tool and resolve the issue.

The following <meta> tags should be defined in the header:

• og:title – The title of your object as it should appear within the graph: “The Matrix”.
• og:type – The type of your object, “Movie”. See the complete list of supported types.
• og:image – An image URL that represents your object within the graph. og:image – To associate multiple images with your page.
• og:url – The canonical URL of your object that will be used as its permanent ID in the graph: http://www.youramazingwordpressblog.com/.

Open Graph Sharing

If the meta tags are incorrectly defined in the header, the open graph will categorize your page incorrectly

If those tags were unspecified, Facebook would infer their properties, and could pull them from anywhere on the site.  This means the wrong title or wrong image shows up in the Open Graph when someone wants to share the content.

If Facebook is displaying things incorrectly, going into the header to define the Open Graph properties is usually enough for correct information will show up.  To discover which tags need to be resolved without having to go through your code, just copy the offending URL into the debug tool.  Facebook will return list of unspecified <meta> tags.  Now you have a checklist of properties to define without hunting and pecking through code.

Example: Inferred Properties

Don’t make Facebook infer information about your site. Define the Open Graph meta Tags.

That’s a quick overview of how to use the Open Graph debug tool to make sure the Open Graph organizes and displays your site’s content correctly. The debug tool makes it a simple fix.  Just copy your URL into the debug tool and define the missing tags in the header of your site.

Thanks!