Monday, 12 November 2012

How To Integrate FaceBook Open Graph - For WordPress And Blogger

By  integrating FaceBook Open Graph Protocol one can easily share content with FaceBook friends. Whenever someone like the content , it gets published on their FB profile if the Open Graph Protocol is implemented correctly.

With the Open Graph, your app becomes a part of the user’s identity and social graph. Through a single API, you can deeply integrate into key points of distribution on Facebook such as Timeline, News Feed, Ticker and App Tabs. You’ll be able to drive new users and create a deep, persistent connection between them and your app.

How To  Integrate FaceBook  Open Graph For WordPress:

You can install a OG Plugin available on  or DIY by following the following steps:

1. Create   A Facebook App:

A. Logon to Facebook, go to the Developer’s page.
B. Click "Set up a new app" button on the top right corner.
C. Give a name to your new app, agree to Facebook terms, hit Create app.
D. Go to Web Site tab, fill up Site URL and Site Domain.
E. Make a note of the “Application ID” and save the changes.

2. HTML Changes

A. Goto  your theme’s header file (header.php) . Always keep a backup copy just in case anything goes wrong.   
B.  Look for this following line of code, or one that starts with:

     <html mlns="…  Replace it with
    <html xmlns="" xmlns:og=""

3. Add OG Meta Tags:

The OG Meta Tags   communicate to the Facebook APIs and  integrate your website with the Open Graph protocol. (Facebook calls this “turning your web pages into graph objects.) The tags must be placed within the <head> </head> tags of your HTML file.
The required Open Graph tags are:

A) fb:app_id This is the numeric value provided when you created your Facebook app;
B) fb:admins Numeric Facebook User IDs. Separate multiple IDs with commas .
C) og:title The title of your page/object as it should appear within the graph, e.g. “My Page Title”;
D) og:type The type of your object, e.g., “movie”. Here’s a complete list of supported og types;
E) og:image The full URL to the image to represent your object within the graph. It must be at least 50px by 50px, have a maximum aspect ratio of 3:1, and be in either PNG, JPEG or GIF format. You can include multiple og:image tags to associate multiple images with your page;
F) og:url The full URL of the page on which the tag is added.

To implement these tags for posts, paste the following code right after <head> tag, or before </head> tag.

1. <?php if (have_posts()):while(have_posts()):the_post(); endwhileendif;?>  
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. <!-- if page is content page -->  
6. <?php if (is_single()) { ?>  
7. <meta property="og:url" content="<?php the_permalink() ?>"/>  
8. <meta property="og:title" content="<?php single_post_title(''); ?>" />
9. <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />  
10. <meta property="og:type" content="article" />  
11. <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)); }?>" />  
12. <!-- if page is others -->  
13. <?php } else { ?> 
14. <meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
15. <meta property="og:description" content="<?php bloginfo('description'); ?>" />  
16. <meta property="og:type" content="website" />  
17. <meta property="og:image" content="logo.jpg" /> <?php } ?>  

Values to be altered in the code above are:

1. Line 3: Replace your_fb_app_id with the Application ID (The one you made a note of in Step One).
2. 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.
3. 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.
4. Line 12: This line determines the image that represents your post. If your theme supportsWordPress Post Thumbnails, it should work fine.
5. But if it doesn’t then replace line 12 with : <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:

function catch_that_image() {  
    global $post, $posts;  
    $first_img = '';  
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);  
    $first_img = $matches [1] [0];  
            //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.

4. Insert Facebook Javascript SDK

The following Javascript gives you to access all of the features of the Graph API and Dialogs.

Place it in header.php, right after <body>

<div id="fb-root"></div>  
  window.fbAsyncInit = function() {  
    FB.init({appId: 'your_fb_app_id', status: true, cookie: true,  
             xfbml: true});  
  (function() {  
    var e = document.createElement('script'); e.async = true;  
    e.src = document.location.protocol +  

Replace your_fb_app_id in Line 4 with Application ID from Step 1 earlier.

Finally test the code

Use the Object Debugger to validate your objects to make sure you have included the needed meta tags.

How To  Integrate FaceBook  Open Graph For Blogger:

Step 1: Go to Blogger’s Dashboard > Layout > Design > Edit HTML tab.

Step 2: Find the HTML attribution marked in bold:

<html ...... xmlns:expr=''>
After this add the Open Graph Protocol name namespace:
It will look like:

<html ...... xmlns:expr='' xmlns:og=''>

Step 3: Find <head> and below it add the following META tags:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='http://www.your-blog-logo.jpg' property='og:image'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta content='Your-App-ID' property='fb:app_id'/>
<meta content='Your-Facebook-Profile-ID' property='fb:admins'/>

Replace the Facebook App Id and the Profile Id in the code above as explained before.

Finally test the code

Use the Object Debugger to validate your objects to make sure you have included the needed meta tags.

1 comment:

  1. Hi,
    I've correctly inserted the code in my WP but I still have issues with the posts and the error is this:

    This is the code I've inserter in my site. Can you help to find the problem please?


    In HEAD I've inserted this:

    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="ID)); ?>">
    <meta property="og:image" content="">

    <meta property="og:site_name" content="">
    <meta property="og:description" content="">

    In BODY I've inserted this:

    window.fbAsyncInit = function() {
    FB.init({appId: '342582249174051', status: true, cookie: true,
    xfbml: true});
    (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +