• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

It seems like many WordPress users are having trouble with Facebook sharing. The most common issue is Facebook not showing thumbnail image for posts when shared or liked, or Facebook is showing wrong thumbnail image, incorrect title, or not picking up excerpt. This can be easily resolved by using some Facebook Plugins for WordPress. However, it can also be solved easily by manually adding Facebook’s Open Graph Meta Tags in the header.php of your WordPress Theme. In this short tutorial, you will learn two things:

  • How to add Facebook Open Graph Meta Tags to your WordPress Theme’s Header.php
  • How to manually add Facebook Social Plugins into WordPress using XFBML and Javascript SDK

Facebook Open Graph Meta Tags and WordPress

Facebook developer website claims that Open Graph Protocol is a core component of Facebook platform. Using this, website owners can connect their web pages directly to the Facebook platform. Their content will be treated as a Facebook page and they can publish updates on the walls of the users who like their content. It also allows website owners to tell Facebook what their content is about and how it should be treated on the Open Social Graph Protocol.

Open Graph Protocol’s meta tags are a simple way to describe your content. These are similar to your HTML meta tags, Facebook has expanded them to include more properties so that website publishers can define their content more accurately.


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta property="fb:app_id" content="Your_FB_APP_ID" />
<meta property="og:title" content="Title of your Post, Page or Content "/>
<meta property="og:description" content="A brief description of the content"/>
<meta property="og:url" content="http://www.example.com/2012/02/post-title/"/>
<meta property="og:image" content="http://www.example.com/wp-content/uploads/2012/02/flowers.jpg"/>
<meta property="og:type" content="article"/>
<meta property="og:site_name" content="Name of the Website"/>

In the above example, a webpage is described using Open Social Graph Meta Tags for title, image, description, etc. The fb:app_id property allows you to attach your content to a Facebook application of your own. Also notice the first line of the code where it describes the XML Namespace as OG for Open Graph Protocol and fb for FBML (Facebook Markup Language). XML Namespaces are a way to declare the source of the vocabulary used in an XML document. An XML document can declare multiple sources of vocabular. By default we have xhtml, but in the code above we have also declared FBML and OG, just so that our Facebook Meta Tags and other FBML tags are not confusing to anyone looking at the source.

Now let’s see how we can display these meta tags in a WordPress powered site’s header.php, replace Your_FB_APP_ID with your Facebook Application ID, you can create a new app here.

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">

<!--Facebook OpenGraph Meta Tags -->
<meta property="fb:app_id" content="Your_FB_APP_ID" />
<meta property="og:title" content="<?php the_title(); ?>"/>
<meta property="og:description" content="<?php echo $post->post_excerpt;?>"/>
<meta property="og:url" content="<?php the_permalink(); ?>"/>
<meta property="og:image" content="<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '', '' ); echo $src[0];
?>"/>
<meta property="og:type" content="<?php  if (is_single() || is_page()) { echo "article"; } else { echo "website";}
?>"/>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>"/>

<--End of Facebook OpenGraph Meta Tags-->

In the above example, notice the og:image tag. We can repeat this tag to include many images so that anybody sharing the link can choose from a predefined set of images. Once done, you can test your Meta Tags by using this Debugger.

Manually Adding Facebook Social Plugins in WordPress using XFBML

In the second part of this tutorial we will add Facebook Social Pluginsusing Facebook XFBML and JavascriptSDK. Remember, most social plugins can also be added using iFrames but many experts do not recommend them at all because iframes can slowdown the pageload time. To add XFBML Social Plugins we need to first prepare the ground for them by adding this piece of code right after the

<body>

tag in our WordPress theme’s ‘header.php’.

<body>
  <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '[YOUR_APP_ID]', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });
    };

    // Load the SDK Asynchronously
    (function(d){
      var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js";
      d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
  </script>

This code loads Facebook JavascriptSDK asynchronously so that loading your Facebook plugins does not affect pageload time. After that we can add Facebook Social Plugins into our website’s theme, selective posts, pages or Widgets by using the default XFBML tags. Some examples are below:


<!-- Facebook Like Button-->
<fb:like></fb:like>

<!-- Facebook Send Button-->
<fb:send></fb:send>

<!-- Facebook LiveStream -->
<fb:live-stream event_app_id="your_app_id_here" width="400" height="500" always_post_to_friends="false"></fb:live-stream>

Now that we have started rolling and feeling confident, let’s have a look at what other things we can do using the Open Graph Protocol.

Using Facebook’s Open Graph Protocol, Facebook developers and even non-developers can create simple Facebook Apps for their websites. These apps can allow website visitors to share their activities on a website with their friends or subscribers on Facebook. One such activity is the like button, however Facebook’s Open Graph allows you to create and define your own custom actions that a user can perform on your website. For example, watching a video or listening to an audio file.

We have already reviewed a few excellent WordPress Plugins that allow you to integrate your website with the Facebook Platform. However, this author is still looking for a plugin that provides an easy platform to WordPress users to build Facebook Apps using the Open Graph Protocol without leaving their websites.

Until such a plugin arrives, Facebook Developer center has some documentation you can look at with examples and tools. It is all quite simple, you create an app, and then you authenticate users, who then publish their actions with the objects on your website to their social channels (i.e. The Ticker, Timeline, and News Feed).


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

11 Comments

  1. Thanks for the tutorial. The author of this article plus ME is eagerly waiting for a way to build facebook apps using wordpress to publish actions directly to facebook. Hope something arrives soon!!

  2. Steve Webster

    In the adding open graph meta tag section, is it possible to explain more about the image value. I’m a bit of a wp novice and the image value is coming up as an error in the debug.Would it be possible to explain how you find the relevant code for images in a theme + also expand on how we can add extra images as mentioned in the article.

    Thanks for the great post.

    • Anonymous

      @d5c18ea7109bb12d4df520eb31c0b2a3:disqus  The code actually looks into a post for post thumbnail image and returns an array, we then print the url of the first image in the array. I understand that this is not an ideal situation in some cases. Like for example when you have no featured image or post thumbnail? In that situation, I would recommend you to use the code described in this post by Alex Moss:

      Alex’s code creates a function which looks for a thumbnail or featured image, when none is found it falls back to showing a default image. 

  3. can you create simple tutorial for intergrating wordpress + facebook user’s interaction via ticker, timeline on facebook. cant find any wordpress plugin that can do this.

  4. I every time emailed this blog post page to all my contacts, as if like to read it afterward my contacts
    will too.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors