Hongkiat.com: Howto: Integrate Facebook Open Graph With WordPress

Facebook Open Graph protocol allows you to share your blog content not only with your readers, but their Facebook friends as well. The best part is – whenever someone liked your content(s), it will be published on their Facebook profile. But that’s not all, Open Graph allows you to explore more interesting ways to interact and engage with your readers. Ultimately – if this is done right – it builds up your brand and increases your site’s traffic.

In today’s post, we are going to look into how to integrate Facebook Open Graph with a self-hosted WordPress in a detailed step-by-step guide. It will require editing your existing WordPress theme and creating a Facebook application (if you don’t have one).

Line 4: You can get your_fb_admin_id under your Facebook Insights page, (More info). Click on the "Insight for your website" green button, grab the entire string of code and replace Line 4.

Line 12: This line determines the image that represents your post. If your theme supports WordPress Post Thumbnails, it should work fine. But if it doesn’t, it will fail gracefully without an image. Check out Step 3a for an alternative workaround.

Line 19: Replace logo.jpg with an url to your blog’s logo. It will be displayed when a non-post page on your blog is shared on Facebook.

Step 3a – When "wp_get_attachment_thumb_url" Fail

When wp_get_attachment_thumb_url() failed to work, you are likely going to a content attribute with no value, like what’s shown below:

<meta property="og:image" content="" />

A simple workaround will be to replace Line 12 with the following code:

This replacement code attempts to use a function call catch_that_image() to grab and output the URL of the first image it comes to encounter. Replace line 10 with URL to a default image if the function fails to find its first image.