{"id":9712,"date":"2011-05-10T22:37:33","date_gmt":"2011-05-10T14:37:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=9712"},"modified":"2025-04-04T01:04:39","modified_gmt":"2025-04-03T17:04:39","slug":"facebook-open-graph-wordpress","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/facebook-open-graph-wordpress\/","title":{"rendered":"How to Integrate Facebook Open Graph With WordPress"},"content":{"rendered":"

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

In today\u2019s post, we are going to look into how to integrate Facebook Open Graph with a self-hosted WordPress<\/strong> in a detailed step-by-step guide. It will require editing your existing WordPress Themes<\/a> and creating a Facebook application (if you don\u2019t have one).<\/p>\n

Ready? Let\u2019s fire up the browser and your favourite code editor<\/a>. Full guide after jump.<\/p>\n

Step 1. Create a facebook App<\/h2>\n

We\u2019ll need an Application ID<\/strong> and to get that, you\u2019ll need to create a Facebook App. If you already have a one, move on to step 2.<\/p>\n

Creating an application is easy, here\u2019s what you do:<\/p>\n

    \n
  1. Logon to Facebook<\/a>, go to the Developer\u2019s page<\/a>.<\/li>\n
  2. Click \u201cSet up a new app<\/strong><\/a>\u201d button on the top right corner.<\/li>\n
  3. Give a name<\/strong> to your new app, agree<\/strong> to Facebook terms, hit Create app<\/strong>. <\/li>\n
    \"create<\/figure>\n
  4. Go to Web Site<\/strong> tab, fill up Site URL<\/em> and Site Domain<\/em>.<\/li>\n
  5. Note down the value of Application ID<\/strong> somewhere and hit the \u201cSave Changes<\/strong>\u201d button. <\/li>\n
    \"get<\/figure>\n<\/ol>\n

    That\u2019s all! You can always come back later to fill up the rest of the information.<\/p>\n

    Step 2. Replace <HTML> Tag<\/h2>\n

    Open up your theme\u2019s header file (header.php)<\/em> in your favorite editor. Always keep a backup copy just in case anything goes wrong.<\/p>\n

    Look for this following line of code, or one that starts with <html xmlns=\u201dhttps:\/\/www.w3.org\/\u2026<\/p>\n

    <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\" <?php language_attributes(); ?>><\/pre>\n
    Replace it with:<\/p>\n
    <html xmlns=\"https:\/\/www.w3.org\/1999\/xhtml\" xmlns:og=\"https:\/\/ogp.me\/ns#\" xmlns:fb=\"https:\/\/www.facebook.com\/2008\/fbml\"><\/pre>\n
    Keep header.php open, we are going to need it for the 3rd step.<\/p>\n
    Step 3. Insert OG <Meta> tags<\/h2>\n
    Paste the following code right after <head><\/code> tag, or before <\/head><\/code> tag.<\/p>\n
    <?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>\r\n <!-- the default values -->\r\n <meta property=\"fb:app_id\" content=\"your_fb_app_id\" \/>\r\n <meta property=\"fb:admins\" content=\"your_fb_admin_id\" \/>\r\n \r\n <!-- if page is content page -->\r\n <?php if (is_single()) { ?>\r\n <meta property=\"og:url\" content=\"<?php the_permalink() ?>\"\/>\r\n <meta property=\"og:title\" content=\"<?php single_post_title(''); ?>\" \/>\r\n <meta property=\"og:description\" content=\"<?php echo strip_tags(get_the_excerpt($post->ID)); ?>\" \/>\r\n <meta property=\"og:type\" content=\"article\" \/>\r\n <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)); }?>\" \/>\r\n \r\n <!-- if page is others -->\r\n <?php } else { ?>\r\n <meta property=\"og:site_name\" content=\"<?php bloginfo('name'); ?>\" \/>\r\n <meta property=\"og:description\" content=\"<?php bloginfo('description'); ?>\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:image\" content=\"logo.jpg\" \/> <?php } ?><\/pre>\n
    Here are some of the the values you\u2019ll need to alter:<\/p>\n