The Right Way to Use the Facebook Like Button

This has annoyed me for a long time, so I’m finally going to fix this for the entire world once and for all.

You’ve probably all found yourself on a Facebook page and have seen something like this:

(Try it out on the Oreo page for yourself).

What’s annoying about this? Rather than including a Like button in the tab, they point you to the button at the top of the Page. Sometimes this is more egregious like in the case of BMW’s Page.

From a design standpoint, I don’t know what’s visually less appealing than a giant arrow jutting out of your Page. What’s more, it’s not necessary. It’s possible to embed a Like button that does the same thing as the button on the top of the Page right into your tab content. No giant arrow necessary.

For each of these Pages, what you’re seeing is their default landing page for anyone who has not already Liked the page. If you happen to the admin of a Page, you can set this by going to Edit Page, then Manage Permissions. Select the tab you want to be the landing tab under “Default Landing Tab.” Note that there is no way to change the default tab for those who have already Liked the page. They go to the Wall by default.

It might be a good idea to have a default landing tab. It can increase the conversions of your visitors to Likes. An additional tactic is to require that you Like a page before you can get access to additional content. They’re often called “reveal tabs.” There’s one on Dose of Digital’s Facebook page on the tab for new publications (if you’re not already a fan). [If you want to know what a reveal tab is and how to do this, then check out this great post from All Facebook.] Reveal tabs could help with converting visitors to Likes, but with Facebook’s new approach to its algorithms, there’s less focus on the number of Likes versus how engaging your content is. Check out this white paper for full details:  Major Facebook Changes and What They Mean for Your Brand (919 downloads). For my money, I now want people coming directly to the Wall where they can start engaging with the content I’ve created, so there is no default landing tab on the Dose of Digital Facebook Page. I think an argument could be made either way, so if you’re interested in doing this, then I’m going to show you how.

I’ve actually written about embedding the Like button into tabs before, but today I want to show you a bit more advanced version that works even better including the full code that you’ll need to get it to work.

One word of caution. I’m going to give the very simple explanation of how to do this, but even this will be a bit complex for some people. I’ll do my best.

What we’re going to do is something like this as seen on the Dose of Digital Facebook page. Notice there’s no giant arrow, but rather an actual, functioning Like button embedded right in the tab (see red box):

In order to do this, you’ll need to do a few things if you’re starting from scratch. However, I’m going to give you most of what you need. The good news (to some) is that you can use basic HTML, which is really simple and every programmer knows. All you’re going to do is create a new Facebook application. This sounds really hard, but you’re not creating Farmville (thankfully). Applications can be really simple and consist of just a few lines of code. Here’s how you do it:

First, let’s code our application and then we’ll create a place for it within Facebook. We’re going to make this as simple as possible…just a few words and the Like button. You can make it as complex as you want once you have the basic idea down. Get out your favorite code editor program. For something simple like this, try out Notepad + (it’s free and works great). You can download all the code you need right here. It’s a shell of what you’ll need with room for you to make edits. In fact, you’ll have to edit this file to customize it to work for your tab. Don’t be alarmed. I’ve included detailed instructions in the file itself that show you what you need to change. Everything that you need to change I started out with “***”. So, just look for those three asterisks and change what’s there according to the instructions next to the asterisks. Simple.

Save your file with the name “index.php” (be sure to save it as a .php file type).

All of the code in here will allow you to show one version of the page to people who have not liked the page yet and another version to people who have liked the page. The like button will only be visible to people who haven’t liked the page. When someone clicks the embedded like button, their browser will reload with the URL of your choice. This could redirect people to your Wall or to the version of your tab that is just for people who have already liked the page. Instructions for how to set up one or the other are included in the code sample you just downloaded.

Now you need to host your application somewhere. That is, you need to host the file somewhere on a server. If you’ve got your own hosting account, use that. If you don’t know how to host a file, then I’ve probably lost you already. Sorry…can’t make it any simpler. You can get a hosting account from any one of the millions of providers. Once your file is hosted somewhere, make note of the full path to your file, something like this:

http://www.myhostingsite.com/facebookstuff/app/index.php

You will also need to host two more files in the same root (folder) as your “index.php” file. These are required to make sure that the javascript and a couple other bits of the code work correctly. These files are from Facebook. You don’t need to edit these two, just host them in the same root (folder) as your “index.php”. Here are the two files:

facebook.php

fb_ca_chain_bundle.crt

If you don’t get these two files and put them in the right place, the application we’re creating won’t work. Period. So, you can’t skip this step.

Speaking of hosting, you will need an SSL certificate for the domain where the files are hosted. Having a secure version is a requirement of all applications starting October 1, 2011. All applications (including custom tabs, which are applications after all) must have a secure version. If your domain already has an SSL, you’re in business. If not, look for a shared SSL or buy your own certificate for the domain where you’re going to host the application files.

Another alternative (that’s free for small, basic applications) is to use Heroku. When you created your application, on the settings screen, you might have noticed this:

Heroku is one of the partners that Facebook recommends to host applications. It’s a great platform, but it can be a little tricky for people to use since it requires using git to modify files. If you have no idea what that means, then you can try the tutorial that Heroku has created (which is pretty good), but be prepared to spend a little time on it if you have no programming experience. Heroku comes with an SSL for all applications it hosts on the platform, so this gets you a secure version to meet the Facebook requirement, plus free hosting (assuming you can dedicate the time to set it up).

Now let’s create an application on Facebook. Go here and click “Create New App” in the upper-right.

In the pop-up, fill in “App Display Name” and “App Namespace”. The former is the name that people will see when they get to your tab. So, this could be “My Welcome Tab”, for example. The latter is simply name that’s primarily used in coding and people won’t see. Make it something as simple as possible, so you if you need to recall it later, you can. While the “App Display Name” can be the same thing as one already in existence, the App Namespace must be unique, like a URL. So, you may need to try a few things until you find one that’s not taken.

Accept the terms, create the app. Get past the CAPTCHA.

If you don’t have a mobile number or credit card associated with your account, you’ll be asked to supply one of these to verify your account. Follow the steps to do so.

The next screen you’ll see is this one:

We’re only going to worry about a couple things on this page. Since we’re adding a tab to an existing Facebook page, we want to be sure we complete the “Page Tab” information. Click “Page Tab” and you’ll get this:

For the “Page Tab Name”, fill in what you want people to see in the tab when it is displayed in the the left column of your Facebook Page where the links for Wall, Photos, etc. are. For “Page Tab URL” and “Secure Page Tab URL” this is the URL where the files for your application code can be found. Specifically, you need the URL for the “index.php” file we created and hosted in step one. This could be something like:

http://www.myhostedfiles.com/apps/index.php

Important note here…for the “Secure Page Tab URL”, you’re URL needs to be “https”, not “http”. Just adding the “s” doesn’t make it secure. Re-read the bit above about SSLs if you can’t remember the details. You can leave the “Page Tab Edit URL” box blank.

That’s it. Save Changes.

Now, you want to add this application (i.e., page tab) to your brand’s Facebook Page. While logged in as an admin of the Page, go to this URL:  https://www.facebook.com/apps/application.php?id=XXX. Substitute the “XYZ” with the application id for the application you just created. This can be found at the top of the page for your application in the developer screen (red box).

In the left column of the Application Profile Page, click “Add to My Page” (red box).

Select the Facebook Page that you are admin for to which you want to add the application (i.e. custom landing tab) we just created.

Almost done.

Next, head over to the Page you just added the application to and click the “Edit Page” from the top . Click on “Apps” in the left column. Find the name of the application you just created. Click “Edit Settings” under the app.

In the pop-up, you’ll see “Available (add)”. Click “add”. There will now be a new tab consisting of your app in the left column of your page.

If you want to make this new tab the default landing tab for people that haven’t Liked your page, you can set this by going to Edit Page, then Manage Permissions. Select the tab you want to be the landing tab under “Default Landing Tab.” Note that there is no way to change the default tab for those who have already Liked the page. They go to the Wall by default.

That’s it. Go to your Page and you’ll see the new tab added in the left column with all your other tabs. If you want to add an image thumbnail to replace the little gears, you can do that in your application settings. There’s a link you click that reads “Edit Icon.” As the page owner, you can change the order of these links too. Just click on “More” and then “Edit” at the bottom of the expanded list. You can remove any links and drag and drop to reorder them. Make sure your top 5 or 6 are up towards the top because that’s what most people will see by default and they won’t click “More” in most cases.

That’s it.

Now you’ve got a Like button embedded right in your tab without having to resort to some hokey looking arrow or exaggerated, fake Like button that people can’t click. What’s even better is that you’re doing it better than most of the biggest brands in the world. Congratulations.

If you run into technical problems, please leave a comment and I’ll do my best to help you out. If you need some real support to make basic applications like this one up to the most complex ones you can imagine, then use the contact page to get in touch with us. My colleagues here at Possible Worldwide have developed applications for some of the biggest brands in the world and we’d be happy to do it for you as well.

If you found this helpful, then why not Like Dose of Digital. Heck, I’ll even add the Like button right here for you: