Contact Us
  • Tutorial: Integrate your Website with Facebook's Open Graph & Social Plugins

    Now that you have created a Facebook App ID for your website, you need to associate that App ID with your website, by modifying the <html> tag for your site and, on each page, adding the Open Graph meta data to facilitate the Facebook Social Plugins.

    The essential meta tags you need to add to your website pages

    NOTE: This part requires at least some knowledge of Web coding, as you must edit the HTML of your website pages.

    NOTE: If your website is built on the WordPress CMS, read our tutorial on adding the Open Graph meta tags to your WordPress website or blog.

    Step 1: Modify your <html> Tag

    You’ll need to modify your <html> tags to include some Facebook-specific tags:

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:og="http://ogp.me/ns#"
    xmlns:fb="http://www.facebook.com/2008/fbml">

    Step 2: Add the Open Graph Meta Tags

    These meta tags communicate to the Facebook APIs the information necessary to 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:

    • fb:app_id This is the numeric value provided when you created your Facebook app;
    • fb:admins Numeric Facebook User IDs. Separate multiple IDs with commas if you want more than one user to access Insights. (See feature box, below);
    • og:title The title of your page/object as it should appear within the graph, e.g. “My Page Title”;
    • og:type The type of your object, e.g., “movie”. Here’s a complete list of supported og types;
    • 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;
    • og:url The full URL of the page on which the tag is added.

    How to find out a Facebook user’s numeric Facebook ID

    Navigate to the user’s personal profile.

    If the user has a “vanity URL” (eg facebook.com/timware):
    From your browser’s address bar, copy just the user name (whatever is between “facebook.com/” and, if there is one, “?”):

    Facebook Vanity URL with Parameters

    or

    Facebook Vanity URL - No Parameters

    Then go to this URL: http://graph.facebook.com/[username], substituting the username for “[username]”, and you’ll see the info about that user that’s available in the Open Graph, including the user’s ID:

    Facebook Open Graph Data

    If the user doesn’t have a vanity URL:
    Just visit their Facebook profile and, in your browser’s address bar, you’ll see something like this:

    Facebook Profile User ID

    The string of numbers following http://www.facebook.com/profile.php?id= is the value you want for the user’s Facebook ID.

    You now have the numeric user IDs for use with your Open Graph meta tags.

    Adding the Open Graph meta tags to your website page(s)

    Here are the Open Graph meta tags that should (You can place them after the <title> tags and “description” meta tag):

    <head>
    <meta property="fb:app_id" content="YOUR-APP-ID" />
    <meta property="fb:admins" content="USER_ID,USER_ID"/>
    <meta property="og:title" content="Page Title"/>
    <meta property="og:type" content="TYPE"/>
    <meta property="og:url" content="http://www.mydomain.com/page-url"/>
    <meta property="og:image" content="http://URL-TO-IMAGE"/>
    <meta property="og:description" content="Description of page content" />
    ...
    </head>

    You can read more about this on Facebook’s Open Graph Protocol page.

    Step 3: Add the Like Button or other Social Plugins to your Website Pages

    Facebook’s Social Plugins integrate your website with Facebook, once you have created a Facebook application for your website to make it an “object” in the Open Graph.

    First, as mentioned earlier, you must add a call to the JavaScript SDK, if you use the XFBML/HTML5 version of the social plugin (which I recommend).

    You will add the below code right after the opening <body> tag on each Web page.

    <div id="fb-root"></div><script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    Adding the Like Button to your Web Pages

    Facebook generates the Social Plugins code for you, on its Social Plugins page.

    You should choose one of the two flavors of XFBML, either HTML5 or XFBML. If you use the iFrame version, you won’t get user-interaction data via Insights, and users won’t be able to add a comment to the Like they make.

    However, for users who can’t modify their WordPress code, either the iFrame method or the use of a WordPress plugin will be their only options.

    The Social Plugins you can use on your website are:

    For each plugin you wish to add to your Web pages, simply visit the plugin page, add the parameters into the “configurator” (as Facebook calls it), then click the “Get Code” button.

    Facebook now enforces your associating the plugin with an existing App ID that you admin. You will probably want to associate with the Facebook application you created for your site or blog to get an App ID, and your site should appear in the pull-down menu next to “This script uses the app ID of your app”.

    Just add the code Facebook provides for your plugin where you want it to appear on your Web pages.

    “Like” or “Recommend”?

    The Like Button comes in two flavors — “Like” or “Recommend” — and, for some types of content, “Recommend” may be more appropriate than “Like”, say an article on a natural disaster or other such bad news. Otherwise, we generally recommend using Like over Recommend.

    NEXT: Using Google Analytics Social Tracking & Facebook Domain Insights to Track Social Actions on Your Website

    Comments

    1. How can you tie together a facebook page and an app id?  Can you just use the Open Graph ID for the page as the app ID?

      • The App ID is generated by Facebook and you can’t change it. As for how to “tie together” a facebook page & an App ID, I don’t understand your question.

    2. Hallo Tim, I put facebook like button to my Facebook Apps.

      e.g on http://apps.facebook.com/MY_APPS

      But open graph not working well. How to put open graph (meta) if target URL is a Facebook apps?

      example of my code
      any wrong with my way?

      • You only have to add the OG meta tags to the web page to which you’re adding the Like button, and set og:url to the app’s URL.
        This should work fine.

    3. GilbertMizrahi says:

      Hi Tim,

      I have question. I have seen some web sites that offer a discount or another incentive when people like their FB page. The flow is something like this. User visits a web site; the is a call to action button to click to like the FB page; When the user clicks the button and like the FB page  some new content is displayed, such a code discount or a download link.

      In most case the FB like button appears on a popup window along a twitter button to share on Twitter. The content on the page of the website is revealed when a user likes the FB page, send the tweet, or both.

      So, my question is how do you program that functionality?

      • GilbertMizrahi says:

        Tim, Thanks for answering. However, my questions was not how to create a gated fan tab, but how to program a similar capability on an external website. People have to like the FB page of the owner of the website or Tweet about it to “reveal” some content (a coupon, a free download, etc).

    4. I have a website you can track beers. How can I have it post a beer a user tracker to their facebook timeline when they click the add beer button? Which facebook addon would I use?

    Speak Your Mind

    *