Google Adds

Saturday, 21 January 2012

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.
open graph protocol Howto: Integrate Facebook Open Graph With Wordpress
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:
  1. Logon to Facebook, go to the Developer’s page.
  2. Click "Set up a new app" button on the top right corner.
  3. Give a name to your new app, agree to Facebook terms, hit Create app.
    create fb app step 03 Howto: Integrate Facebook Open Graph With Wordpress
  4. Go to Web Site tab, fill up Site URL and Site Domain.
  5. Note down the value of Application ID somewhere and hit the "Save Changes" button.
    create fb app step 05 Howto: Integrate Facebook Open Graph With Wordpress
That’s all! You can always come back later to fill up the rest of the information.

Step 2. Replace <HTML> 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 <html xmlns="http://www.w3.org/…
view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>  
Replace it with:
view plaincopy to clipboardprint?
  1. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">  
Keep header.php open, we are going to need it for the 3rd step.

Step 3. Insert OG <Meta> tags

Paste the following code right after <head> tag, or before </head> tag.
view plaincopy to clipboardprint?
  1. <?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>  
  2. <!-- the default values -->  
  3. <meta property="fb:app_id" content="your_fb_app_id" />  
  4. <meta property="fb:admins" content="your_fb_admin_id" />  
  5.   
  6. <!-- if page is content page -->  
  7. <?php if (is_single()) { ?>  
  8. <meta property="og:url" content="<?php the_permalink() ?>"/>  
  9. <meta property="og:title" content="<?php single_post_title(''); ?>" />  
  10. <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />  
  11. <meta property="og:type" content="article" />  
  12. <meta property="og:image" content="<?php if (function_exists('wp_get_attachment_thumb_url')) {echo wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); }?>" />  
  13.   
  14. <!-- if page is others -->  
  15. <?php } else { ?>  
  16. <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />  
  17. <meta property="og:description" content="<?php bloginfo('description'); ?>" />  
  18. <meta property="og:type" content="website" />  
  19. <meta property="og:image" content="logo.jpg" /> <?php } ?>  
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:
view plaincopy to clipboardprint?
  1. <meta property="og:image" content="" />  
A simple workaround will be to replace Line 12 with the following code:
view plaincopy to clipboardprint?
  1. <meta property="og:image" content="<?php if (function_exists('catch_that_image')) {echo catch_that_image(); }?>" />  
Next, open up functions.php and insert the following code:
view plaincopy to clipboardprint?
  1. function catch_that_image() {  
  2.     global $post, $posts;  
  3.     $first_img = '';  
  4.     ob_start();  
  5.     ob_end_clean();  
  6.     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);  
  7.     $first_img = $matches [1] [0];  
  8.     if(emptyempty($first_img)){  
  9.             //Defines a default image  
  10.             $first_img = "/images/default.jpg";  
  11.         }  
  12.     return $first_img;  
  13. }  
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 <body>
view plaincopy to clipboardprint?
  1. <div id="fb-root"></div>  
  2. <script>  
  3.   window.fbAsyncInit = function() {  
  4.     FB.init({appId: 'your_fb_app_id', status: true, cookie: true,  
  5.              xfbml: true});  
  6.   };  
  7.   (function() {  
  8.     var e = document.createElement('script'); e.async = true;  
  9.     e.src = document.location.protocol +  
  10.       '//connect.facebook.net/en_US/all.js';  
  11.     document.getElementById('fb-root').appendChild(e);  
  12.   }());  
  13. </script>  
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:
meta values Howto: Integrate Facebook Open Graph With Wordpress
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:
view plaincopy to clipboardprint?
  1. <fb:like href="<?php the_permalink() ?>" layout="button_count" show_faces="false" width="450" action="like" colorscheme="light"></fb:like>  
Next, get a friend to Like it. You should see something similar appearing in his Facebook profile:
facebook like in profile Howto: Integrate Facebook Open Graph With Wordpress

Extra: WordPress Plugin

If somehow you failed to install the codes or need this to be done quick and easy – there’s a WordPress plugin for that.
Facebook Open Graph Meta in WordPress is a WordPress plugin that adds Facebook meta data to avoid no thumbnail issue, wrong title issue, wrong description issue, etc.
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)