my github
english | español

Use Facebook Open Graph and Insights On Your Website: Part I

ogp logo

Open graph is a protocol that will help you "integrate" your website with Facebook, letting you like, comment or subscribe to an URL. For a complete list of Social Plugins you can click here. Using Facebook Insights you will see the statistics of by date and how many likes or comments you have.

I'll tell you the truth, i think i still don't know how to use it to it's full extent, but this two part "guide" can help you with the basics. This will show you how to customize the information that will be shared when you post to your Wall an URL of your website, and how to put a Like Button and Comments Box.

The first thing you need to know is that for everything to work, you'll need to use these metatags on your HEAD section of the webpage (the example used is so you should change it accordingly:

<meta property="fb:admins" content="815916987" />
<meta property="og:title" content="" />
<meta property="og:description" content="Personal blog and sandbox of Waldo Urribarri" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:image" content=""/>

So... Some of that information will be pretty easy to fill.

- fb:admins: The id of the people that can see the Insights of your page. If you want to add yourself, copy and paste this link to your browser using your Facebook username and use the id provided: . You can use multiple fb:admins tags. This tag will be just usefull when you add your page to Facebook Insights.

- og:title: The title that will be shown when someone posts your URL to their Wall.

- og:description: The description that will be shown when someone posts your URL to their Wall.

- og:url: This is where it gets a little tricky (at least for me). This is the URL that will be used to Like and Comment when you add those plugins. So, if you have an og:url like and add a Like Button or Comments Box to your index.html, every Like and Comment will be associated with that URL. As you can see, here on my site i have a Like Button and Comment box for each post, so everytime you view the full post, i change this parameter (and the others) accordingly using PHP.

- og:type: This tag is used to "tell" Facebook the type of content thats being shared. I just put "website", but for more information you can go to

- og:image: The URL of the image that will be shown when someone posts your URL to their Wall. I think there is a minimum and maximum image size, so just to be sure it will work you can make it 200x200 pixels.

Ok, awesome. Does it work now? Well, yes... Try it yourself. Upload your testing page with those metatags and then post it on your Facebook page. Now you have some of your work done. You still haven't put your Like Button and Comments Box, but that i will explain that on a second post.