Turn your website into a Facebook app for the like button or comments

Facebook offers a number of free plugins that help your website come to life with social interaction, which also promotes your site through the Facebook profiles of those who interact with your site.

These plugins include the Like / Recommend / Send buttons, comments, and more.

I think the best way to implement these plugins on your site is to turn your website or blog into a Facebook app. This means you create an app and add some codes to your website to create a versatile connection between your site and Facebook. Here’s how you do that.

Step One: Create a Facebook app

Don’t worry, you don’t need to learn a programming language to create this “App,” although you should be fairly comfortable with HTML and editing your theme files.

Create New App button on Facebook Developers site

First, you create the app. Go to https://developers.facebook.com/ and register for a developer account. Then click Apps, followed by the “Create New App” button that will appear on the right hand of the page.

Next, you create the name for your blog’s Facebook App. If your blog has a branded name, you can enter that. If it does not, you can enter “Firstname Lastname’s Blog,” which is the route I chose when I created the app for this blog.

Enter the name of your blog

This leads you to a screen that shows basic information for your App. You need to copy your App ID and enter your domain. So if your website is at www.example.com, you would enter “example.com.”

Now scroll down. Click “Website” and enter the home url of your blog.

That’s all you need to do here! Now, it’s time to input some code into your website.

Step Two: Add Open Graph Meta Tags to your header

Contrary to what you might think, OG Meta Tags does not mean “Original Gangsta.” It means “Open Graph.” Open Graph meta tags are codes you put in your website that tell Facebook what the page is and what it’s about and how to display information about the page when someone shares it on Facebook.

The format for an “open graph” meta tag is:

<meta property=”og:_____” content=””>

Here are the meta tags you can put in the head of your website, between <head> and </head>:

<meta property=”og:title” content=”________”/> —The title you want Facebook to display
<meta property=”og:type” content=”________”/> — Use “article” for an individual blog post, “blog” for the main page of the blog, “restaurant” if you are a restaurant… Facebook has a list of types allowed.
<meta property=”og:url” content=”________”/> —The URL to your page
<meta property=”og:description” content=”________”/> — Self explanatory
<meta property=”og:image” content=”________”/> — An image that you want Facebook to use as the thumbnail when people reference this page on Facebook. The official open graph guidelines say it’s required, but if you leave it blank, then Facebook will usually pick a picture.
<meta property=”fb:app_id” content=”__________”/> — The app ID you got in step one. NOTE that this property is FB:app_id, not OG:app_id.

There are other tags you can add, too.

You can make your open graph meta tags dynamic

If your site is run by WordPress, Blogger, or another content management system, you will add these tags to the header of your site’s template. That means you need to make them dynamic so they have different content on different pages and blog posts. I have a tutorial that shows how to make dynamic open graph meta tags this with WordPress, but I will have a tutorial for Blogger soon.

Step 3: Load the Facebook Javascript into your blog

Facebook plugins using Javascript need the script loaded into each page. A the very top of the page, or the theme template, place this:

<html xmlns:fb=”http://ogp.me/ns/fb#”>

Then, paste this code just after the <body> tag of your template, filling in your app ID:

<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=YOUR APP ID”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

And you’re done!

Your page is now  considered a Facebook App, as far as Facebook is concerned. It can now use Facebook’s social plugins to drive social interactivity using the comments plugin, the Like button, the Subscribe button, and other features.

Leave a Reply

Your email address will not be published. Required fields are marked *