Open Graph Protocol for Facebook Explained with Examples

What is Open Graph Protocol and Why Do You Need It?

Open Graph protocol is a protocol (i.e. a set of rules) that is used to integrate any web page into the social graph.

For example, Facebook can be your social graph or social circle.

Once the web page is integrated it behaves like the object of the social graph (Facebook) i.e. it has the same functionality as a Facebook page.

Through the Open Graph protocol, you can tell Facebook how your shared contents should be displayed on Facebook.

This protocol tells facebook which title, URL, image, and description of your blog post/page should be used when your content is shared on facebook.

Open Graph Protocol Meta Tags

To turn your web page into a graph object, you need to use Open Graph protocol meta tags and the ‘like’ button.

Following are examples of such meta tags:

  1. <meta property=”og:title” content=” “/>
  2. <meta property=”og:type” content=””/>
  3. <meta property=”og:url” content=””/>
  4. <meta property=”og:image” content=””/>
  5. <meta property=”fb:admins” content=””/>
  6. <meta property=”og:site_name” content=””/>
  7. <meta property=”og:description” content=””/>

The Easiest Way to Implement Open Graph Protocol

If you are using WordPress, you can use the WordPress for SEO Plugin by Yoast to add open graph protocol meta tags on your website.

Once you have added the plugin, follow the steps below:

  1. Go to plugin settings (SEO > Social)
  2. Click on the checkbox ‘Add Open Graph Meta Data’
  3. Click on ‘Add Facebook Admin Button’
  4. Click on the ‘Save Settings’ button.

 

Get the E-book (52 Pages)

Get the E-Book (37 Pages)

Manually Implementing Open Graph Protocol

If you don’t use WordPress or you want to add these Meta tags manually then follow the steps below:

Step-1: Create a Facebook Page or Facebook Application and then claim your domain by associating it with Facebook Page/App. In this way, you can use Facebook Page/App insight.

Step-2: Note down the value of the application ID if you have created a Facebook App. Otherwise, just note down the value of Facebook Admin ID which you can determine from your Facebook Insight Page.

Step-3: Open your theme’s header file (generally header.php) and add following code just before the <head> tag on your web page:

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

Step-4: Copy-paste the following code at the bottom of your functions.php file and upload it to the server. This code will get the first image from the post and display it.

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

  if(empty($first_img)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

 

Step-5: Add following open graph protocol meta tags in the head section (<head>…</head>) of your header.php page:

<?php if (have_posts()):while(have_posts()):the_post(); endwhile; endif;?>  
<meta property="fb:admins" content="your_fb_admin_id" />  
$facebook_image= catch_that_image();  
<?php if (is_single()) { ?>  
<meta property="og:url" content="<?php the_permalink() ?>"/>  
<meta property="og:title" content="<?php single_post_title(''); ?>" />  
<meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />  
<meta property="og:type" content="article" />  
<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)); }?>" />  

<?php } else { ?>  
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />  
<meta property="og:description" content="<?php bloginfo('description'); ?>" />  
<meta property="og:type" content="website" />  
<meta property="og:image" content="<?php echo $facebook_image;?>" /> <?php } ?>

Replace ‘your_fb_admin_id’ with your Facebook Admin ID.

Note: og:type means the type of the object. Since our object is a piece of content (article, blog post, video, photo, etc) I have used ‘article’ as the object type. You can see the complete list of supported object types here.

Step-6: Once you have added your special meta tags, you can now add the Facebook ‘like’ button code into the body section (<body>..</body>) of your web pages. You can get the ‘like’ button code from here.

You can either add the HTML 5 code or XFBML (Extensible facebook markup language) code to add the ‘like’ button to your web page. Through the ‘like’ button, Facebook users can share your web page contents with other facebook users.

If a Facebook user (who ‘liked’ you content) happens to be your friend and you are already logged into the facebook, then the like button will display the name and photo of that friend.

If you are logged out of facebook, then the ‘like’ button will look like this:

Step-7: Test your open graph meta tags here: https://developers.facebook.com/tools/debug

That’s it. You have successfully used the open graph protocol :)

Example of a Web Page Which Uses The Open Graph Protocol

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>Himanshu's Open Graph Protocol</title>
<meta http-equiv="Content-Type" content="text/html;charset=WINDOWS-1252" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="stylesheet" type="text/css" href="event-education.css" />
<meta name="verify-v1" content="so4y/3aLT7/7bUUB9f6iVXN0tv8upRwaccek7JKB1gs=" >
<meta property="og:title" content="Himanshu's Open Graph Protocol"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.eventeducation.com/test.php"/>
<meta property="og:image" content="https://www.eventeducation.com/images/982336_wedding_dayandouan_th.jpg"/>
<meta property="fb:admins" content="himanshu160"/>
<meta property="og:site_name" content="Event Education"/>
<meta property="og:description" content="Event Education provides free courses on event planning and management to event professionals worldwide."/>

</head>

<body>

<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=501839739845103";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
.
.
.
</body>
</html>

Related Articles

 

Do you know the difference between Digital Analytics and Google Analytics?


99.99% of course creators themselves don’t know the difference between Digital analytics, Google Analytics (GA) and Google Tag Manager (GTM).

So they are teaching GA and GTM in the name of teaching Digital analytics.

They just copy each other. Monkey see, monkey do.

But Digital analytics is not about GA, GTM.

It is about analyzing and interpreting data, setting up goals, strategies and KPIs.

It’s about creating strategic roadmap for your business.


Digital Analytics is the core skill. Google Analytics is just a tool used to implement ‘Digital Analytics’.

You can also implement ‘Digital analytics’ via other tools like ‘adobe analytics’, ‘kissmetrics’ etc.

Using Google Analytics without the good understanding of ‘Digital analytics’ is like driving around in a car, in a big city without understanding the traffic rules and road signs.

You are either likely to end up somewhere other than your destination or you get involved in an accident.


You learn data analysis and interpretation from Digital analytics and not from Google Analytics.

The direction in which your analysis will move, will determine the direction in which your marketing campaigns and eventually your company will move to get the highest possible return on investment.

You get that direction from ‘Digital analytics’ and not from ‘Google Analytics’.


You learn to set up KPIs, strategies and measurement framework for your business from ‘Digital analytics’ and not from ‘Google Analytics’.

So if you are taking a course only on 'Google Analytics’, you are learning to use one of the tools of ‘Digital analytics’. You are not learning the ‘Digital analytics’ itself.

Since any person can learn to use Google Analytics in couple of weeks, you do no get any competitive advantage in the marketplace just by knowing GA.

You need to know lot more than GA in order to work in digital analytics and marketing field.


So what I have done, if you are interested, is I have put together a completely free training that will teach you exactly how I have been able to leverage digital analytics to generate floods of news sales and customers and how you can literally copy what I have done to get similar results.

Here what You'll Learn On This FREE Web Class!


1) The number 1 reason why most marketers and business owners are not able to scale their advertising and maximise sales.

2) Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

3) The number 1 reason why conversion optimization is not working for your business.

4) How to advertise on any marketing platform for FREE with an unlimited budget.

5) How to learn and master digital analytics in record time.

 
 

My best selling books on Digital Analytics and Conversion Optimization

Maths and Stats for Web Analytics and Conversion Optimization
This expert guide will teach you how to leverage the knowledge of maths and statistics in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

Attribution Modelling in Google Analytics and Beyond
Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

Himanshu Sharma

Digital Marketing Consultant and Founder of Optimizesmart.com

Himanshu helps business owners and marketing professionals in generating more sales and ROI by fixing their website tracking issues, helping them understand their true customers purchase journey and helping them determine the most effective marketing channels for investment.

He has over 12 years experience in digital analytics and digital marketing.

He was nominated for the Digital Analytics Association's Awards for Excellence.

The Digital Analytics Association is a world renowned not-for-profit association which helps organisations overcome the challenges of data acquisition and application.

He is the author of four best-selling books on analytics and conversion optimization:

error: Alert: Content is protected !!