WPLift is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

How To: Manually Add a WordPress Site to Facebook Open Graph

Last Updated on April 22nd, 2021

Published on March 6th, 2012


Share This Article

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="https://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="https://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="https://www.example.com/2012/02/post-title/"/>
<meta property="og:image" content="https://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="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?> xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="https://gmpg.org/xfn/11">

Article Continues Below

<!–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


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

&amp;lt;div id=&amp;quot;fb-root&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
window.fbAsyncInit = function() {
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
var js, id = ‘facebook-jssdk’; if (d.getElementById(id)) {return;}
js = d.createElement(‘script’); js.id = id; js.async = true;
js.src = &amp;quot;//connect.facebook.net/en_US/all.js&amp;quot;;


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:

Article Continues Below


&amp;lt;!– Facebook Like Button–&amp;gt;

&amp;lt;!– Facebook Send Button–&amp;gt;

&amp;lt;!– Facebook LiveStream –&amp;gt;
&amp;lt;fb:live-stream event_app_id=&amp;quot;your_app_id_here&amp;quot; width=&amp;quot;400&amp;quot; height=&amp;quot;500&amp;quot; always_post_to_friends=&amp;quot;false&amp;quot;&amp;gt;&amp;lt;/fb:live-stream&amp;gt;


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).

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