Yellow Rose Web Design

Setting up a Facebook Like Button.

I’m going to apologize in advance for getting overly technical with this post and for how wordy I tend to get when that happens. Putting my geekdom aside, however, I hope you find it useful.

It’s been almost 3 months now since Facebook announced they were taking over – uh, I mean expanding to the rest of the web. (Read more about it here.) Since then we’ve all seen the FB “Like” button cropping up on sites all over the Internet, and if you’re like me, you’ve been innundated with FB status updates from bored teenagers who have discovered the new “Like farms.” (BTW, hey Mark Z, if you get this message, think ahead next time about the timing and rolling something like this out right before summer vacation hits!) As one of the first people to implement the “Like” and “Comment” buttons on my site (And I mean very first. Before they even fixed the errors in their documentation.), I’d like to share some of my experiences with you.

I’ll spare you the hair-pulling moments when I first put the FB code onto a few pages of my site, only to get errors and warnings basically telling me,“You’re doing it wrong!” Thanks, Facebook, for letting me know that. It was your code! No, you don’t need to hear about that. The documentation has (quietly) been corrected. You might want to just start out with the very basic “Like” button. If you use WordPress, you’re in luck. There’s a Plugin for that. I use it and highly recommend it. If you want to take it to the next level, like I did, I’ll let you in on a few tricks – some of which I discovered by accident; others by trial and error. (Facebook seems to have updated the documentation once again with a little more information about it. That could have saved some hair-pulling 3 months ago.)

Ready? Let’s get started.

Step One: Set up a Facebook Application

You can go to the FB Developer’s site to register your own personal website as an application here: http://developers.facebook.com/setup/

Before the hair-pulling commences, be sure the link to your site is the full link and includes the slash / at the end. It will give you some sample code, and your Application ID. (If you build your site in HTML, you can grab the sample code for your site.) You’ll need your Application ID and your personal User ID for the meta tags in the next steps.

Step Two: Finding Your Facebook ID

Don’t know your profile User ID? Enter this into the address bar (not the search bar) of your browser: graph.facebook.com/YourUserName

Make sure it’s your Personal Profile and not a FB Page. You should see something like this with your own name and a bit of information about you. (This is my personal profile graph: http://graph.facebook.com/yellowrosekat)

Now you’re ready for the code. Some words of caution. Once you’ve set up the Admin for a site, it’s virtually impossible to remove that User ID as Admin. FB warns that you can’t. It took a lot of back-end removing Facebook Pages and other code-hacking for me to figure it out, so be prepared to be Admin for life on the site where your ID is listed first.

Also, be aware that you could potentially end up with a long list of Facebook Pages that you Admin.

Step Three: Install the Like Button Code

If you haven’t already, install the Like Plugin on your WordPress site. Recommended settings: Display Above OR Below the content. You can check both, but it isn’t necessary to have it in both places unless you want it to look like FB took over your site. Leave Display on Individual Posts, Individual Pages and on the Home Page checked. You never know what someone might happen to “Like” so why not give them every opportunity?

This is the setting that I used. I chose below the content because most people want to read something before they know if they Like it and may not scroll back to the top. Feel free to play with the display settings, but the default options should work just fine.

If you’re building your page in HTML, you can visit the Javascript SDK page on the FB Developer’s site to get the necessary Javascript code for the enhanced Like button.

Step Four: Add your Application ID and Admin (User ID) Meta Tags

You’ll put this code into the Head section of your main (Home) page:

• <meta property=”fb:app_id” content=”YourApplicationID” />
• <meta property=”fb:admins” content=”YourUserID” />

Both IDs will be 15 digit numbers. Even within WordPress, you’ll need to manipulate a bit of code for this. On the Appearance Dashboard, go to Editor and you’ll see a list of PHP pages on your site. The code goes in the Header.php page. I like to put it just before the <title> tag so I can easily find it again.

Step Five: Add the “Open Graph” (og:) meta tags to individual posts and pages

Here, each page gets its own individual meta tags. Once again, I’ve found a Plugin for WordPress where you won’t have to manipulate additional code. The “Add Your Own Headers” Plugin works great with this feature. I like to enter the meta tags in Notepad as one single line of code so no line breaks interfere with anything. I’m using in my example the site I’m building to put the book, Trek to Texas, online. For pages that aren’t directly from the book (About, Contact, Support, etc.) I use <meta property=”og:type” content=”website” /> just to let FB know these are website pages. You’ll want to select your “og:type” accordingly. You can find the full list of types and information on the FB Open Graph Protocol available in my Resources section.

Once activated, the Add Your Own Header plugin appears at the bottom of the page/post Editor in WordPress:

Each property is fairly self-explanatory. The only part you need to change is the Content Attribute shown in bold to match your website page. Be sure that the URL goes directly to the site page where it’s listed (see Facebook’s Guidelines below), and the Title and Type are relevant to the page. Facebook doesn’t allow you to change this information once you’ve received a certain number of Likes on the page. Do not change the Property Attribute.

• <meta property=”og:title” content=”Welcome to Trek to Texas” />
• <meta property=”og:type” content=”book” />
• <meta property=”og:url” content=”http://trektotexas.com/2010/02/welcome/” />
• <meta property=”og:image” content=”http://trektotexas.com/images/trek-to-texas-bookcover.png” />
• <link rel=”image_src” href=”http://trektotexas.com/images/trek-to-texas-bookcover.png” />This last line isn’t really related to the Like button, but I included it because I often use it on my pages along with the other meta tags. Have you ever noticed some sites allow only one image thumbnail choice when Sharing a link on your Facebook profile?
  link rel=”image_src” tells Facebook which image from your site you wish to use as the thumbnail image so you can control what FB users see on their newsfeed links.

Note: The image used must be in your site’s directory; it can’t be from a different site or FB will show it as a “?” image or no image at all when it finally gets onto their site.

Step Six: “Liking” a page creates a Facebook Page

Once you’ve completed all of the steps above, make sure you’re logged into the account that you set up as an Admin in Step 4, and you can Like one of your own pages. After a few minutes, depending on the speed of Facebook’s servers, an “Admin” link should magically appear on your web page! This link takes you (And ONLY you. No one else sees it unless they’re a listed Admin in the meta tag and also Like the page.) directly to a Facebook Fan Page where you have access to the same information as any Facebook Page. When you post to the wall of the Page, it will show up in your fans’ newsfeed just as a normal Facebook page would. What shows up on the newsfeed for your fans includes a link back to your site.

I’ll repeat my words of caution: you could potentially end up with a long list of Facebook Pages that you Admin! I do not recommend Liking every page on your site or blog right away. The purpose isn’t to show others how popular you are with “Likes”. It’s to gain insight into what Your Customers Like. If you see a particular page that has several Likes, or wish to send promotions to people who have Liked the page, all you have to do is Like the page to create a Facebook Page. That’s IF you have followed all the steps above prior to people using the Like button.

What I learned

Why do I have to go through all these steps? Can’t I just add the “Like” button to my site? Sure, you can. But if you want to use Facebook’s tools to help you analyze a page on your site that’s getting several Likes, if you’ve followed these steps when setting up the page, you’ll have Insight into your users that can help you identify key characteristics to narrow down your Target Market. Are they primarily male or female? What are their other interests? What other pages have they liked? What age group are they in? These are all essential characteristics that any business should know about their current customers to help analyze if your business is on target with your Target Customers.

Did you notice the 23 Likes in the image at the beginning of this post? It’s from a giveaway I did on my personal blog. I was pleasantly surprised to see that many people Liked the giveaway while only 6 people commented. (One of the Likes and Comments was me.) Curious to learn why the giveaway was so popular, I Liked the page. And waited. And waited. No Admin link appeared. No Facebook Page showed up in my list of Pages I admin. What did I do wrong? I had set myself up as Admin for the blog. I had created an application for it. I realized after only a little hair-pulling that I had forgotten Step 5, setting up the meta tags for that page. Could I recover and still add the tags later? I tried, and yes! The Admin link and Facebook page appeared! With ONE fan. Me.

A test of setting everything up beforehand, following Steps 1 – 5 before users Like the page achieved the desired result: Users Like the page first, I see that the page is getting popular, so I log into Facebook and Like the page, and Voila! All the page’s fans are there! Step 5 was the most crucial in getting everything to work. Yes, it’s also the most time-consuming because every individual page should have its own Title, and URL at least. In my example of the genealogy book, I use the bookcover for the majority of the images on all the pages, and the “Type” will often remain the same.

In the end, you just never know what people are going to Like on your website. Some people are more comfortable clicking a Like button than leaving a comment or sharing on Facebook or Twitter. The information you can get from it can be invaluable to your site and your business. And it’s a pretty good feeling when someone says, “I like you!”

Resources

Facebook Links:

• Create an Application: http://developers.facebook.com/setup/
• Javascript SDK: http://developers.facebook.com/docs/reference/javascript/
• Open Graph Protocol and what it can do: http://developers.facebook.com/docs/opengraph
• Supported Object Types for pages: http://developers.facebook.com/docs/opengraph#types
• URL Linter (where you can test your link to see if the code works properly and how Facebook reads it):http://developers.facebook.com/tools/lint/
• Social Plugins Main Page: http://developers.facebook.com/plugins
• Facebook’s Guidelines for using the logo and Like button: http://www.facebook.com/brandpermissions/logos.php

WordPress Plugins:

• Facebook Like Button Plugin
• Facebook Activity Widget Plugin
• Add Your Own Headers Plugin