In the last couple of years, a well-known social website Facebook has spread all over the whole Internet. There exist almost 1000 million of user accounts on the website and people spent there in average 405 minutes per month.
Why I should care about Facebook and its plugins ‘n stuff?
That’s an easy one! Everybody is on Facebook, everybody knows it and almost everybody likes to see some of it on your websites. The Like Button gives you an instant overview of how many users do actually care about your post, the Comments plugin enables your site to take advantage of Facebook’s well-tested and well-known comment application and The Like Box enables users to like your Facebook Page and view its stream directly from your website. In addition to that, the best thing about this is that you get access to the Facebook Insights Tool which provides Facebook Platform developers and Facebook Page owners with statistics of visitors.
The basic integration
Integrating parts of Facebook into your website has never been easier. The most simple way of doing it is by navigating to Facebook Social Plugins page, choosing your desired widget and fill in the form which then generates some code you have to insert into each page. Although the aforementioned way of doing it works in most cases, some web developers prefer to maintain a greater amount of control over what is displayed when somebody likes, sends or shares the webpage. In the following article we will talk about how to install the Open Graph and some additional tips and tricks for WordPress users (though you may probably apply it to different types of sites).
Add Open Graph to your website
Adding Open Graph to your website is quite an easy process. Firstly, fire up your favorite html editor (in case of me, it is definitely Sublime Text 2), navigate to the root of your website and open the index file (in case you have a static website consisting of .html files, you need to do the process to each of them). Starting from the very top, we first have to edit the HTML property. Insert this code as opening html tag:
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml">
In the <head> section of your website, we need to insert some meta properties which help Facebook to recognize the page and set appropriate post image, url, title and description for it.
fb:admins and fb:app_id
Facebook needs to somehow recognize your website so you have to insert a meta property called fb:admins or fb:app_id in the <head> section of the html file. Open Facebook Insight website and click on the big green button on the top right hand corner that says ‘Insights for your website’. Then, if you don’t have any Facebook application created, in the ‘Link with’ part, choose your name and it generates a meta tag for you below (e.g. <meta property=”fb:admins” content=”100001525584300″ /> . Now, copy the tag into your website’s index (in <head> section). Let’s continue with other important Open Graph meta properties that define your page. 
og:url
Meta property og:url describes the full address to the current page. It may look something like this: <meta property=”og:url” content=”<your website here>”/>
og:title
Common sense tells us that this property defines the title of the page. Insert this line of code below: <meta property=”og:title” content=”<Your website’s name here>” />
og:description
This is the text that shows as a description when somebody shares your page on Facebook. Pay attention to the fact, that it is limited to 300 characters so choose your words carefully. Insert this below: <meta property=”og:description” content=”<description of article or page>” />
og:type
For most websites this is “article”. If you want to see the full list of all available types, navigate to the Facebook official docs. Insert this below: <meta property=”og:type” content=”article” />
og:image
This meta property is one of the most important and useful ones. It sets the thumbnail image for the page which then shows on the Facebook as the image of the status (like, share). Copy this line of code: <meta property=”og:image” content=”<full address to the image here>” /> All the images referenced by og:image must be at least 200px in both dimensions.
og:locale
og:locale sets the language of the page so Facebook knows if it should display ‘Like’ instead of ‘Páči sa mi to’ (in Slovak langauge). For my mother tongue it would look something like this: <meta property=”og:locale” content=”sk_SK” /> Complete list of all supported locales in one place can be found here.
After it’s done
It may look something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="sk-SK" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Životný úspech</title>
<!-- Facebook Opengraph -->
<meta property="fb:admins" content="100001525584300,100001826410221" />
<meta property="fb:app_id" content="218758264881501" />
<meta property="og:locale" content="sk_SK" />
<meta property="og:url" content="http://www.zivotnyuspech.eu/"/>
<meta property="og:description" content="Životný úspech očami mladej generácie" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.zivotnyuspech.eu/wp-content/themes/DelicateNews/images/zivotnyuspech_facebook_icon.png" />
<meta itemprop="name" content="Životný úspech"/>
<meta itemprop="description" content="Životný úspech očami mladej generácie" />
</head>
<body>
</body>
</html>
Add Open Graph to your WordPress blog
Adding Open Graph meta tags to your WordPress blog is pretty much the same as I have described before except that the content is dynamic and you will need to do some modifications to the previous code. The meta tags are different when we are on the home page than when we are on an article or page. In order to make a difference, we will use a PHP if clause. In addition to that, the content of meta tags is going to be filled dynamically by WordPress functions. Don’t understand? Never mind, I’ll show you how it looks so keep reading. First thing we need to do is to open your ‘header.php’ file in the WordPress theme folder. Open your favorite ftp client (I use FileZilla) and establish a connection to your webhosting. Navigate to your WordPress website folder. 
Then go to the ‘wp-content’ -> ‘themes’ -> <name of your theme> (for example, I’m using Trim of elegantthemes.com) and there should be the ‘header.php’ file. Open it up. Now, edit the <html> tag so it looks something like this:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?> xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml">
Then, before the closing tag of <head> (</head>), copy-and-paste the code below:
<?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?>
<!-- Facebook Opengraph -->
<meta property="fb:admins" content="<your admin id number - get that on the Facebook Insight page>" />
<meta property="og:locale" content="<your locale>" />
<?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 get_the_excerpt(); ?>" />
<meta property="og:type" content="article" />
<meta itemprop="name" content="<?php single_post_title(''); ?>"/>
<meta itemprop="description" content="<?php echo get_the_excerpt(); ?>" />
<?php
if(has_post_thumbnail()) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 300,225 ), false, '' );
echo '<meta property="og:image" content="'.$src[0].'" />';
} else {
?>
<meta property="og:image" content="<?php bloginfo('template_url') ?>/images/zivotnyuspech_facebook_icon.png" />
<?php } } else { ?>
<meta property="og:url" content="<http://www.yourwebiste.com/>"/>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<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 bloginfo('template_url') ?>/images/zivotnyuspech_facebook_icon.png" />
<meta itemprop="name" content="<?php bloginfo('name'); ?>"/>
<meta itemprop="description" content="<?php bloginfo('description'); ?>" />
<?php } ?>
Code in <….> should be edited to match your website parameters. So, some explanation, right? <?php if (have_posts()):while(have_posts()):the_post();endwhile;endif;?> It loads the post’s attributes (if there is a post). <?php if (is_single()) { ?> If you are located on an article or page (so it is single), there should be different og:image, og:url, og:type and og:description. That’s why we divide the code into if clause.
if(has_post_thumbnail()) {
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 300,225 ), false, '' );
echo '<meta property="og:image" content="'.$src[0].'" />';
} else {
?>
<meta property="og:image" content="<?php bloginfo('template_url') ?>/images/<your predefined image>" />
What this does is that if there is a post thumbnail (the ‘Featured Image’), it sets that image to be the one showing in the Facebook status. If there is no image, it shows a predefined image for the status. It’s a ‘hack’ made by myself 🙂 <?php } } else { ?> If we are on the home page, show different meta tags.
Integrating Facebook Social Plugins into your website or WordPress blog
So far so good. We have successfully installed Open Graph. Now it’s time to move on and do the most important part of this tutorial – integrate Facebook Like Button, Comments and Like Box. Firstly, you have to create a Facebook Application. Navigate to Facebook Developers page and click on the ‘Create New App’. Give it a name and continue. After creating the app, include the JavaScript SDK on your page. If you are doing this on your website, you have to do this once per each page (or in case it is dynamic website, just once in the index file). If using WordPress, insert this into the ‘header.php’ file right after the <body> opening tag.
When you created the app on Facebook, a special App ID was assigned to it. 
Copy the id into the code where it says <your app id>. In case you have different locale than en_GB, change that also in the code in this part: js.src = “//connect.facebook.net/<your locale>/all.js#xfbml=1&appId=<your app id>”; Now you can easily insert any kind of Facebook Social Widgets into your website or blog. Visit their site, select a widget and generate code for it. To give you an example of the Like Button, insert following code somewhere in the <body> part (for example, below your article).
In WordPress powered website, the usual place where the above code is placed in the ‘loop-single.php’ template file located in the root of your theme folder on your webserver. In most cases, the file ‘loop-single.php’ includes the part shown below…
'<!-- end .entry_content --> </div> <!-- end .post-content --> </article> <!-- end .post -->'.esc_attr__('Pages','Trim').': ', 'after' => '
', 'next_or_number' => 'number')); ?> ----PUT THE CODE HERE----—-PUT THE CODE HERE—- should be replaced with the actual Facebook widget code. Put there the following code if you want a working Facebook Like button with 450 px of width, no faces (they aren’t shown) and font Arial.
” data-send=”true” data-width=”450″ data-show-faces=”false” data-font=”arial”>The advantage of WordPress is that instead of hardcoding the urls of the pages where the Like Buttons are located, we simply put <?php the_permalink(); ?> php code and it automatically generates the url for us.
And there it is, Facebook Like Button working with everything. When somebody likes your post, it shows on his timeline with the picture, description, link and title you’ve set before in the Open Graph part of the tutorial. Wonderful, isn’t it?
Facebook Debugger
Many times I run into plenty of errors and broken timeline statues when integrating Facebook into my websites. Luckily, a great tool, Facebook Debugger, exists. It helps you to find an error in the code and gives us advice on wrong meta properties. Paste your website’s address there and if you have done everything correctly, there shouldn’t be any large mistakes (there might be some warnings).
Facebook Insights
This free tool enables web developers to inspect the metrics of their websites, Facebook pages and Faceboko applications. It was the main reason why we have integrated Open Graph meta tags into our website. You can track the number of times people clicked the Like Button, how many people you have reached by that action, referral traffic and much more. After completing this guide, take a look at the Facebook Insights Dashboard and give it a play. To learn more about the insights, please visit Facebook’s docs.
What next?
I hope this article was helpful to you and that you are now able to integrate Open Graph and Facebook into your website by your own. Have any problem, question or suggestion? Please use the comment section below to express yourself. Thank you.
Image: Flickr.com
Join the Conversation
Leave a comment
Lamosty.com 
Do you use any PhpStorm plugin that validates the jQuery og selectors?
LikeLike
Hello doctordoom,
no, I’m not aware of any such a plugin. Why do you need to validate og selectors? You just look them up on the Internet and copy-paste them into the editor, don’t you? 🙂
LikeLike