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). Ready? Let’s fire up the browser and your favourite code editor. Full guide after jump. Step 1: Create a facebook App We’ll need an Application ID and to get that, you’ll need to create a Facebook App. If you already have a one, move on to step 2. Creating an application is easy, here’s what you do: Logon to Facebook, go to the Developer’s page. Click "Set up a new app" button on the top right corner. Give a name to your new app, agree to Facebook terms, hit Create app. Go to Web Site tab, fill up Site URL and Site Domain. Note down the value of Application ID somewhere and hit the "Save Changes" button. That’s all! You can always come back later to fill up the rest of the information. Step 2: Replace Tag Open up your theme’s header file (header.php) in your favorite editor. Always keep a backup copy just in case anything goes wrong. Look for this following line of code, or one that starts with > Replace it with: Keep header.php open, we are going to need it for the 3rd step. Step 3: Insert OG tags Paste the following code right after  tag, or before  tag. Here are some of the the values you’ll need to alter: Line 3: Replace your_fb_app_id with the Application ID from Step 1. 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: A simple workaround will be to replace Line 12 with the following code: Next, open up functions.php and insert the following code: function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('//i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img){ //Defines a default image $first_img = "/images/default.jpg"; } return $first_img; } 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. Step 4: Insert Facebook Javascript SDK The following Javascript gives you to access all of the features of the Graph API and Dialogs. It also allows you to integrate Facebook social plugins like the Like button, Facepile, Recommendations, etc with ease. Place it in header.php, right after  Replace your_fb_app_id in Line 4 with Application ID from Step 1 earlier. Step 5: Let’s test it! We are done integrating Facebook Open Graph to the WordPress blog. Let’s give it a couple of test to make sure we’ve done things correctly. Test 1: View source code Take a look at the source codes of one of the blog post, you should have something like this: Check the properties and its values, make sure they are correct. Test 2: Install a Like Box If you haven’t install a Facebook Like Button, then it’s probably time to get one. Place the following code anywhere (preferably before content or after content) inside single.php: Next, get a friend to Like it. You should see something similar appearing in his Facebook profile: