How To Integrate Your Website With Open Graph

Like If You Have A Website.
Share If You Have A Friend With Website

When a website gets liked or shared on Facebook, it's a win. A connection has been made between the user and the web page itself. A scraping tool is used to gather information from the site's code. The scraped information is parsed and a "graph" object is born. Just like a native Facebook post, the graph object will show up in the News Feed and Activity Log of the user's Facebook profile. If you have not integrated open graph into your website, the unpredictable scraping results could be very undesirable. There are a few integration options available to web developers, some more complex than others. Wordpress and other services have widgets and plugins that perform these tasks for you. If you are not using Wordpress follow this very basic "how to" and optimize your website for the social graph.

The Open Graph Protocol


Facebook's use of Open Graph protocol allows web developers a certain level of customization when information is scraped from a website that has been "shared" or "liked". The open graph or "og" information is populated by META tags on the source page. These tags are added to the <head> of your HTML document turning the website into a Facebook "graph" object. When linked to a Facebook Page, the object or post can be tracked using Insights. This "how to" assumes a basic knowledge of HTML and access to the root directory of the site to be integrated.

Step 1: Modify your <head> Tag


You'll need to modify your <head> tag to include Open Graph namespaces. We chose this method recommended by the Facebook Open Graph Developers.

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<title>Your Web Page<title/>


Step 2. Assign Your Facebook Admin ID


You don't have to be a Facebook Developer or even have an account to integrate a website with open graph. To get all the benefits of the social graph we recommend you sign up with Facebook, go to Insights, and register your domain. Use the "fb:admins" property to assign your Admin ID. All Facebook users have an Admin ID associated with their account, this is different than a Page ID. If you don't know your Admin ID, log into Facebook and follow this link.

https://developers.facebook.com/tools/explorer/

Paste the "fb:admins" meta tag into the <head> of your web page and replace "Admin ID" with your Admin ID number.

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<title>Your Web Page<title/>
<meta property="fb:admins" content="Admin ID" />


Step 3. Define Your Website Name


Include your website or company name with the "og:site_name" property. Replace "site Name" and paste the tag into the <head> of your page.

<meta property="fb:admins" content="Admin ID" />
<meta property="og:site_name" content="Website Name" />


Step 4. Choose The Website Type


The "og:type" property tag allows you to specify what kind of content is on your web page. You can choose types like blog, company, article, product, and book. For a complete list of og types go to the Open Graph Object Types resource page.

https://developers.facebook.com/docs/reference/opengraph/object-type

Paste the "og:type" meta tag into the <head> of your web page.

Replace "Type" and paste the "og:type" meta tag into the <head> of your web page.


<meta property="og:site_name" content="Website Name" />
<meta property="og:type" content="Type" />


Step 5. Add Your Title


Decide the title of your graph object with "og:title". This is going to be the title on the post that people will see.

Open Graph Title Property

Replace "Your Title Here" and paste the "og:title" meta tag into the <head> of your web page.


<meta property="og:type" content="website" />
<meta property="og:title" content="Your Title Here" />


Step 6. Define Your URL


This is the URL that will be used to identify your site/object and will also serve as it's permanent ID. Use an absolute URL with the "og:url" property.

Open Graph URL Property

Replace "Your Domain Here" and paste the "og:url" meta tag into the <head> of your web page.


<meta property="og:title" content="Your Title Here" />
<meta property="og:url" content="http://www.Your Domain Here.com" />


Step 7. Describe Your Site


The "og:description" tag populates the 1-2 sentence snippet that describes the post. This is your opportunity to verbally entice friends of friends to click through the post and like your web page.

Open Graph URL Property

Replace "Your Description Here" and paste the "og:description" meta tag into the <head> of your web page.


<meta property="og:url" content="http://www.Your Domain Here.com" />
<meta property="og:description" content="Your Description Here" />


Step 8. Set Your Preview Image


The scraper will try and grab an image to display by default. Choose an image that is no bigger than 1200px by 630px and no smaller than 600px by 315px. The "og:image" property uses an absolute URL.

Open Graph Image Property

Replace "Image File Here" and paste the "og:image" meta tag into the <head> of your web page.


<meta property="og:description" content="Your Description Here" />
<meta property="og:image" content="http://www.yourdomain.com/Image File Here" />


Step 9. Add Optional Data


Open Graph has many more tags that you can use to distinguish your object and have it better represent your website. We added "og:locale" to designate to the scraper what language our content is in. There are many useful tags available and you can create custom properties for your site using the Facebook Developer Tools.


<meta property="og:image" content="http://www.yourdomain.com/Image File Here" />
<meta property="og:locale" content="en_US" />


Step 10. Creating The Like Button


The most ubiquitous Social Plug-in is the Like button. If a Facebook user visits your site and clicks on it, a post gets added to their News Feed and the life of your object begins. All of their friends can see that post, click on it and be directed to your page. There are a few versions of the Like button, we are using the HTML5 version that uses JavaScript. Click on this link to the Facebook Developer page and create your like button.

https://developers.facebook.com/docs/plugins/like-button/

Paste the Javascript snippet right under the opening <body> tag.


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

Place the code for your plugin wherever you want the Like button to appear on your page.

<div class="fb-like" data-href="http://www.Your Domain Here.com/" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>


Debugging And Testing


Before you go live with your site and click on that Like button, make sure Facebook is able to parse the page properly. The easiest way to do this is with the Open Graph Object Debugger. Simply input your URL into the Debugger and verify that all of your og meta tags are working properly.

https://developers.facebook.com/tools/debug/

I Like What You've Done


Once you get the all clear from the Debugger, give life to your graph object by clicking it. See our final results by clicking the Like button below.

We hope this tutorial was able to help you integrate your website into the social graph.