Facebook Like Button Issues

Slow Down- A Cautionary Tale

So my one piece of advice to all of you about to head down the Facebook interaction path is “Slow Down Cowboy”! If you rush in and start trying things without understanding how all the pieces work, you will be cursing and screaming and smashing your computer within a few short minutes!!

Or maybe you already started and you are here because you can’t figure out how the puzzle gets put together. I admit, I am no FB guru, but I spent LOTS of hours getting my stuff to work after reading 47 gazillion different posts that each had a wee bit more of the information- but none all in one place!

So, while this all fresh in my mind, and in case I ever have the sorry job of trying to make this type of thing work again, I am documenting my steps for posterity.

This Facebook write up is not for the faint of heart. If you are trying to do something simple, then you may not run into any issues. However if you are trying to go beyond the (somewhat pathetic) examples provide by the Facebook documentation, then you may have a bit of trouble. I am fairly technical and ran into trouble, so if I can pass along some helpful hints based on the issues I ran into, and save someone the aggravation I experienced, then this write up will be worth it

Facebook, behinds the scenes, is building a huge web of interconnecting People, Applications and Pages. Obviously there is not just one server (computer) storing this information, but many. It takes time for all the servers in the Facebook rendering space to catch up and have the same, most recent and accurate snapshot of the Web. Information is cached to make rendering happen faster, and if the cached information is incorrect, it can take a while before it is flushed and replaced with the correct information.

You should read all the way through the Facebook documentation and this document, before you take any steps. If you plunge ahead and start working before or while you are reading and you screw something up, well then- don’t say I didn’t warn you!!!

Get a Facebook Account

I started my process by trying to set up a Facebook Page, that was just a page- that is, a page not associated with a user account. A “Facebook Page” is an unfortunate moniker for a representation of a business or group or some other entity that might not be an actual person. I wanted to set up a page to represent Easy Scraps. More on that in the next step.

I already had an account and was used to Facebook “pages” that were part of my Facebook interaction. Typically, when I log into Facebook, I go to either my Profile page or Home page to see what’s going on in my Facebook world. However in this case I was led to believe that I could set up just a Page that would represent Easy Scraps without an account associated with it. It is possible to do so, however once you start trying to do anything with that page, you are going to be prompted to upgrade to a Facebook account.

In my case I upgraded my account, and this became the user that I used for creating Facebook applications for use with a “Like” button. More on that later.

So do yourself a favor. Sit a minute and think about what you want your user account to look like. What user name do you want to use? If you have multiple email addresses, which one do you want to use? It is a lot harder (or in some cases impossible) to change things once you have made your choices.

To create an account, just go to http://www.facebook.com and sign up. You will be required to have at least an email address and password. This will be your login information.

Looking ahead:

If you do not have an account before the next step, you will still need an email address and password in order to create a Facebook Business Page. That will be your login information for the Page. The Facebook Business page will be a limited type of Facebook account, unless you create a normal Facebook user account in this step.

Set up a Facebook Page- maybe

What are you trying to accomplish? If you want to have a page that represents your business or group or Band, etc. on Facebook, then a “Facebook Business Page” might be what you would like to have. I am going to call this an “Entity” or “Facebook Business Page” from here on, in order to differentiate it from what some of us may refer to as a Facebook page, i.e. generally the Profile or Home page of a personal account. Your Entity will have a wall, information and links, and you can actually do some things that a normal user account can do, but not everything. For instance an Entity can “Like” other businesses and post things on other walls, but it cannot administer applications for example.

On your Entity page, set up information about the entity- the description, mission, category , products, awards, etc. At some point you can choose Administrators and for that you will need a user account like I described above. Or you may be requested to “upgrade” your page to an account, which is ultimately what happened during my configuration initiative. The documentation on setting up an Entity (“Business Page” or just” Page” in Facebook vernacular) is not too bad from what I remember and I was able to set it up fairly easily. The part I felt was lacking was the information about having to upgrade to a user account, in most cases, rather than just being a “Page”.

I would recommend creating an image for your entity, as well. This image will be shown next to any posts that might be made while you are logged in as your entity.

As the entity, you can post things to your own wall so that anyone who likes your page and visits it can see what is happening related to your business (or group or band etc.). You can also post to others’ walls or “Like” other entities. There are some things that you can’t do while logged in as an Entity (it escapes me just now what those are- sorry!). If you have created the Entity using a normal Facebook account, that account will be an Administrator and you will be able to switch back and forth between the two. So you can post as your entity, or switch back to your full user if you need to.

Search for “Facebook Business Page” to find the URL to get started. I found it here:

http://www.facebook.com/pages/create.php

You will need to have decided on a name for your Entity, and you will sign up with an already existing Facebook account, or you will be required to sign up with an email address and password in order to create the limited account I spoke of earlier.

When you set up the Facebook application/user account write down the ID. It is usually included in all the URLs you click when logged into Facebook. For instance if you click on the Profiles link etc. the account ID will usually be in the URL. I say usually, because once you set up a user name, that is used in the URL rather than the ID. So while you are just starting out and still can find the ID easily, write it down for safe keeping.

Add a “Like Box” to another Web Page

A Facebook “Like Box” can be generated and placed on another web page and this will point to your Entity page.

The documentation is not great on differentiating a “Like Box” and a “Like” button. Basically, a “Like Box” will point to a Facebook Business page, and pull in posts from the wall and show a selection of users who have “Liked” your Entity.

From the Setup (or Get Started) dialog on your Facebook Page, there will be a button that says “Like Box”. If you click it you will be brought to a page that contains a code generator. The code generator will ask for your URL. This is the URL that you will use to view and Edit your Entity. I would recommend bookmarking this page right after you create the Business Page, but you can always search for your Entity Name in the Facebook search toolbar while you are logged in to Facebook in order to find it.

This code generator does a pretty good job. You can as far as I remember, cut and paste it into another web page and it works well. I was using it with other Facebook calls, which is a VERY long saga written about in the next sections.

Off to the Races- Maybe

If that is all you wanted to accomplish- set up a Facebook Page to represent your entity and perhaps add a “Like Box” box to a web page on another site, then you are finished!

I placed my “Like Box” on a page in my web site that discussed how Easy Scraps was represented on Facebook.

Sigh, if only I had stopped there!

“Like” Button Woes

Alas, I decided that it would be cool to add a Facebook “Like” button (not a box as described earlier). This scenario enables you to add a Button to a regular web site page i.e. not a Facebook page. Visitors to your site who are already logged in to Facebook can click the button and a story will be posted on their Facebook profile page with a link back to your site. There is functionality to allow a Facebook Login button to be added as well. I wanted to add that figuring that it would be nice for users to be able to login right there.

I read the documentation and it seemed easy enough. However, the example was not the best one they could have used and they did not really discuss such real world issues like allowing different parts of your site to be “Liked” or dynamic content or individual items on the same page to be “Liked”, for instance in the case of a Blog.

I dove right in and just started cutting and pasting their examples trying to make it work with my pages. That was the first rookie mistake!! The biggest hassle is that if things start getting used, Facebook tracks it and doesn’t always let go of the information properly. So once you or other visitors start “liking” your site or pages, you could be stuck.

So again, my advice to you- Slow Down!! Take things one step at a time!!

Site or Pages or Posts?

First decide how many items are you going to want the “Like” button to apply to? If there is just a single place that you want the button to be, and it is going to be set up to “Like” you entire site, than things aren’t that bad and you can probably muddle through by following the Facebook documentation.

In my case I originally wanted to have the “Like” button apply to the site in general. But then I changed my mind and decided to have a the button apply to several different areas of the site- in my case Albums, Rubber Stamps and Other Products. And I also decided to enable the “Like” button on individual posts in my Blog. From what I had read, all of that was possible, but nothing actually told me how. And to complicate matters, I had already starting using the Like Button to target my site and several friends had clicked it, so now Facebook had a hold of it. So, it became a bit tougher to get where I wanted to go, but I did manage to figure it out. So here is how I did it…

Read the documentation

I am not going to let you get away without reading the official documentation. In fact, maybe you will read it, understand everything and be good to go. If not, then hopefully the information documented here can help a bit.

You can start here: http://developers.facebook.com/docs/reference/plugins/like/

Understanding Open Graph Protocol is really important. Basically these tags, when included in the HEAD section of a Web page on your site, make your page equivalent to a Facebook Page. Read about it here:

http://developers.facebook.com/docs/opengraph/

Again, the example is pretty lame, so I will show you how I finally set up my tags later in the program

IFrame or XFBML

You are going to have to read the documentation on this. I am not enough of a Facebook guru to describe why you would use on over the other. The documentation does have some good coverage on this topic.

For my purposes, I wanted to utilize the markup language, so my writing will be skewed towards that. The XFBML is a suite of tags that you can include in your web page to describe certain Facebook functionality. There are tags for logging in and for “Social Plugins” such as the “Like” button. These tags are parsed and filled in with additional information by the Facebook JavaScript library (JSDK).

The official documentation regarding the JSDK is here:

http://developers.facebook.com/docs/reference/javascript/

The documentation on how to set this up and use the XFBML and JSDK may have worked at some point, but it was not exactly accurate when I tried it, so I will show what I ended up using in the final iteration of my code. More on this later…

Set up a Facebook Application

After reading the documentation, you will understand that you need to set up an application. At least, as in my case, if you are using the JavaScript library and the XFBML tags. While it is possible to change things related to your application eventually, my experience was that initially I was not able to do so (and by I, I really mean a lot of others as well!). After the application is created, there is a link to be able to edit it, but the link gives you an error. It took a couple of days before I was able to go back and edit the applications!! So again, think about what you would like to do ahead of time to avoid mistakes because Facebook can hold onto those mistakes and won’t let go until it is good and ready.

In my case, I wanted to have buttons to different parts of my Web site, and a button on individual posts to my blog. So I ultimately set up 2 applications- one for my Blog and one for the site. I probably could have gotten away with a single one, but I also had visions of allowing the Blog to be included in a Facebook page, and so that was another reason I set up the second application.

Note: read about building a Facebook application that actually DOES something here:

http://developers.facebook.com/docs/guides/canvas/

In the case of setting up a Facebook “Like” button by using the JSDK and the XFBML tags, the application isn’t really going to do anything, as far as I can tell, other than be a placeholder or pointer for pages on your site that you want to add Facebook functionality to. In the example here, that is a simple “Like” button.

First things first- walk thru the documentation here:

http://developers.facebook.com/

This site is a launching point for documentation as well as starting and editing an application.

You can go here to set up a Facebook application:

http://developers.facebook.com/setup/

So here are the helpful tips for setting up an application.

If you are going to set up an application for your site and/or for different web pages directly off your site, give it a name that is relevant to what the application will do. For instance, “Like yoursiteName”
You will be asked to login or sign up with Facebook at some point- use the account you created previously
When prompted for a URL, for most cases you will probably want to enter:

http://www.yoursiteName.com/

Once the application is set up, you can edit it if need be, just as long as Facebook decides to be ready to let you. I found that initially, I wasn’t able to. I kept getting an error. Many other people reported the same thing. Eventually (I think it was about 24-48 hours later), I was able to get to the applications that I created in order to edit them.

When you first start out, after you have created your applications, you need to authorize the Facebook Developer Application. If you go to the Facebook Developers Page ( http://developers.facebook.com/ ) , there should be a link at the top that says “My Apps”. Click that. The first time you visit it, the site will prompt you to authorize the Facebook Developers Application. Click OK. Once authorized, you can always go to “My Apps”, (you must be logged into Facebook) here to view/edit your applications:

http://www.facebook.com/developers/apps.php

As an alternative, you can go to the Home page of your user account- the account you used to create the applications. Go to the “Apps” link on the left hand side and you will see the Developers Application. Click on that and it will list the applications you have created. You can click on them in order to bring up the editing functionality.

When you view your Application you will be able to see the Application ID, and this is what you will need in order to load and initialize the JavaScript library and parse the XFBML tags that you wish to utilize in your web page.

You can click “Edit Settings” on the right hand side to view/edit information about your application. Under ”About” , some things you will need to fill in if they aren’t filled in already are:

Application Name- You might want to use something like “Like yoursiteName”
Description- “This application will allow users to like yoursiteName”
Logo
Support email-
Contact email

Under “Web site”, it will list:

Application ID (you can’t edit this)
Site Domain (I left this blank, although I did address the domain in my code. See this resolution later in this document)
Site URL- this is one of the CRITICAL pieces of information you need to enter correctly. It must end in a “/” . If you are going to add a Like Button to point to your site, or a Page off of your site, then you need to set this to the top level URL of your site. For instance I used:

http://www.yoursiteName.com/

This was the correct setting for “Like” buttons that will point to either

1. Your web site. For this case you want a Facebook user to be able to click “Like” and a link to your web site, http://www.yoursiteName.com/, will show up on their Facebook page

2. A specific page in your web site, i.e. http://www.yoursiteName.com/somePage.html . For this case you want a Facebook user to be able to click “Like” and a link to a page within your web site, http://www.yoursiteName.com/SomePage.html , will show up on their Facebook page

3. I believe this will also work for a blog article or other such item on a particular page, however I used a different set up for this configuration, ultimately.

Under “Facebook Integration”, it will list things like:

Canvas Page
Canvas URL
And assorted other inputs. These are settings if you are building an application that is actually going to do something. In this particular case, where the application is just holding an Application ID for use with the “Like” button, we don’t need to fill in anything here.

For my Blog I decided that I wanted the Like button to apply to individual items on the Blog. I set up a separate application with the site URL set to:

http://www.yoursiteName.com/blog/

The other settings were similar to the set up for the “Like” button for the site.

As an aside, I also wanted to allow my Blog to be included in a window on my Facebook account page, so created another application and set this application a little bit differently.

site URL- I pointed to the area of my blog that was the container for all the blog entries. In my case, I used

http://www.yoursiteName.com/blog/

Canvas Page- This is a name you will give to your application so that Facebook can reference it from http://apps.facebook.com/ . I named mine yoursiteNameBlog .
Canvas URL- This is the top level URL that will be used to find your application on your web site to be called for integration into Facebook (via the Canvas Page you just named above). I set mine to the top level directory of my blog http://www.yoursiteName.com/blog/
I chose IFrame and using Scroll Bars as the other choices did not appear to work very well when I tried those.
Tab URL- I pointed to the Web Page that was my actual Blog page, and that is stored in the directory referenced by the Canvas URL . In my case this was:
myBlogPage.php .

This is just the first step in setting things up properly for the “Like” button. The next critical piece is setting up the Open Graph Protocol tags that will be placed in your web pages, and that will allow Facebook to draw the connection between the applications you just created, the “Like” button you want to add to your Web page, and a browser link to your Web site or particular Web Page.

Open Graph Protocol

This is critical to making the “Like” button work. These tags are understood by Facebook and are placed in your web page(s). Facebook will read these tags to help make the connection between Facebook “things” like Applications and Administrators and users etc., and Web site “things” like URLS that point to your site or pages within your site, or individual items on a web page. In your site

If everything is set up properly, the Like button will set up a link to your site (or page within your site or item on a page within your site. There are several mandatory tags you must set up within the HEAD section of your Web page.

Meta Tags

If you are trying to set up a like button that points to your site in general, you would edit each page (more than likely starting with the index.html page) that you will include the “Like” button and set up the tags like so:

og:url must be set up to match the URL that the Like button will point to. This must also be a page that is relative to the site URL that you set up in your Facebook Application earlier. If you want the “Like” button to point to your site in general, you would set the value of this to be:

http://www.yoursiteName.com/

If you want the “Like” button to point to a page within your web site, then you would set og:url to be

http://www.yoursiteName.com/somePage.html

fb:admins must be set to the numerical values of the Adminstrator account. If you have more than one account, you can separate the IDs with a comma. When you set up the Administrator Facebook account, you sign up and sign in usually thereafter using your email address. This is not what you use here. Also, if you have gone into account settings for the Administrator, and set up a user name, do not use this here either. The Id should be the numerical value of your Facebook account Id.

If you have not set up a user name, you will usually see the ID in the URL when you access the profile page of the Administrator.

If you did set up a user name, that user name will now be used in the URL. The easiest way to find the ID, is to go to the Profile page of the Administrator account, and then choose the Wall link on the left hand side. Go to the Photos tab and click on a picture. You should see your ID in the URL for that picture. If you see multiple id, it is the one that is after “uid=”. It is not the once that is after “fbid=”.

If the Admins setting is wrong you will see an error message that is something like this:

“You failed to provide a valid list of administators. You need to supply the administors using either a fb:app_id meta tag, or using a fb:admins meta tag to specify a comma-delimited list of Facebook users. “

fb:app_id is the ID of the application you set up to be used with the “Like” button. According to the documentation you could use either the app_id or the admins or both. Some people complained that using both didn’t work, but it worked fine for me once I got all the other pieces set up properly.

I used both so that the correct application would be found.

og:type If you are utilizing the “Like” button to like your site or a page in your site, the type should be set to “website”. If you are trying to “Like” multiple, individual items on a page, then the documentation says to set the type to “article”.

Interestingly enough, for adding a “Like” button to multiple, individual items on a page (posts on a blog), I had success by setting my meta tags like so:

Notice that there is no URL meta tag, but I believe the Facebook parsing mechanism falls back to the information as specified in the Site URL of the Facebook Application. In this particular case, the Site URL was set to http://www.yoursiteName.com/blog/. I believe this is used to determine the normalized form of the default URL. In the case of out blog it is http://www.yoursiteName.com/blog/defaultBlogPage.php

og:type in the case of multiple, individual items on a page, could be set to “article”. However, if you do this, apparently there is no Administration page for this “Like” instance generated for you (if you are logged in as the Administrator), whereas with the type of “website” the Administration page is generated and the link displayed. I decided I want to have a page for each article, so I created my own tag set to a namespace I defined as easyscraps (see the section on Namespaces, but the declaration looks like this: xmlns:easyscraps=http://www.easyscraps.com/ns#).

So my type meta tag looks like so:

NameSpaces

The tags listed above utilize JavaScript name spaces. In general, you need to tell the browser what “og” and “fb” mean. FireFox seems to be able to figure things out with less of an issue, but IE will stop dead in the water unless you set the namespace up properly. To do this you must add the following line (or modify the existing line if it is already there) before your HEAD section. This is usually the first line or so:

<head>

The sections in red are the ones that need to get added if you already had that line included in your web page. Note that I set up one up for Easy Scraps. More on this later.

Finally- Adding the Like Button Code

Finally, we have all the pieces in place to add the code that will render a Facebook “Like” button in our web page. Again, I went with the XFBML rendering rather than the IFrame method. And again, the documentation was less than perfect, however I finally got the JavaScript Code with my web pages to work like so:

Added the namespace declarations as described in the previous section
Added the Open Graph meta tags into the HEAD section as described in the previous section
Added the XFBML tags to include the “Like” button and a Facebook Login Button into the HTML of my web page where I wanted the button to display. This is described below.
Added the JavaScript code that loads the SDK. This is a library of JavaScript functions that was written by Facebook to parse the XFBML tags and create the “Like” button and make it place a link on a user’s Facebook page when clicked.
Added the JavaScript code to display the user’s name that is Logged in to Facebook.

Like Button XFBML

This is the markup I added into my web page to display the “Like” button (as well as the Login button, and there is also a place holder to enable the user name to be shown if the user is logged in.

<fb:login-button autologoutlink=”true”></fb:login-button>

<fb:like href=”http://www.yoursiteName.com/” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

</div>

Notice the line href=”http://www.yoursiteName.com/” . This sets up the “Like” button to “Like” your site in general. It should match the Open Graph meta tag like so:

If you are adding a “Like” button to “Like” a particular page in your site, the documentation is pretty thin on this. The only way I was able to get it to work was as follows:

<fb:login-button autologoutlink=”true”></fb:login-button>

<fb:like href=”http://www.yoursiteName.com/somePage.html” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

</div>

Notice the line href=”http://www.yoursiteName.com/somePage.html” . This sets up the “Like” button to “Like” you’re a particular page within your site called somePage.html. It should match the Open Graph meta tag like so:

If you are adding a “Like” button to “Like” multiple items on a particular page in your site, for instance a blog post, the documentation is pretty thin on this. The only way I was able to get it to work was as follows:

<fb:like href=”http://www.yoursiteName.com/ yourBlog/someBlogPost.php” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

For a dynamic blog like B2Evolution the “Like” button markup would be placed like so:

<fb:like href=”<?php $Item->permanent_url();?>” ref=”<?php $Item->anchor_id();?>” show_faces=”false” width=”520″ colorscheme=”light”></fb:like>

in the _item_block_inc.php file that is part of the skin.

Notice the line href=”http://www.yoursiteName.com/ yourBlog/someBlogPost.php l” . This sets up the “Like” button to “Like” an individual blog post. In this case, it did not match the og:url meta tag, which I actually didn’t set at all. Facebook determined a normalized URL, I believe from the post URL and the Site URL set up in the Facebook application settings.

In this case the normalized URL was determined to be http://www.yoursiteName.com/ yourBlog/yourDefaultBlogPage.php

Load and Initializing the Facebook JavaScript

The documentation on loading and initializing the is ok, but again there seemed to be issues. The way that I got mine to work was as follows:

window.fbAsyncInit = function() {

FB.init({appId: ‘yourApplicationID’, channelUrl : ‘http://www.yourSiteName.com/Channel.html’, status:true, cookie: true, xfbml: true });

/* All the events registered */

FB.Event.subscribe(‘auth.login’, function(response) {

// do something with response

//some_custom_login_function ();

//alert(“response.status in auth.login is ” + response.status);

});

FB.Event.subscribe(‘auth.logout’, function(response) {

// do something with response

// some_custom_logout_function ();

//alert(“response.status in auth.logout is ” + response.status);

});

//FB.Canvas.setSize({ width: 320, height: 50 });

FB.getLoginStatus(function(response) {

//alert(“response.status is ” + response.status);

var oFbBlock = document.getElementById(“facebookBlock”);

if (response.session) {

// logged in and connected user, someone you know

// some_custom_login_function ();

//Look up the Facebook user name and display it on the page

//alert(“response.session is ” + response.session);

if (oFbBlock) oFbBlock.style.display=”block”;

var query = FB.Data.query(‘select name, uid from user where uid=me()’);

query.wait(function(rows) {

document.getElementById(‘nameBlock’).innerHTML =

‘Welcome ‘ + rows[0].name;

});

//FB.Connect.get_loggedInUser(); //This is an old call from Facebook code that is being phased out

} else {

// no user session available, someone you dont know

//alert(“no response.session”);

if (oFbBlock) oFbBlock.style.display=”block”;

//No user name. Hide the block that shows the user name typically.

var oFbNameSpan = document.getElementById(“nameBlock”);

if (oFbNameSpan) oFbNameSpan.style.display=”none”;

}

}, true);

};

(function() {

var e = document.createElement(‘script’);

e.type = ‘text/javascript’;

e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;

e.async = true;

document.getElementById(‘fb-root’).appendChild(e);

}());

</script>

Linter

In order to test your pages, my recommendation would be to set up a different page that you can test with. For instance, if the web page on which you are going to add the “Like” button is called “somePage.html”, copy and rename the page to somePage_Test.html and test with that. That way, in case you misspell or set things up incorrectly at first, Facebook may cache the errors, but if the page is not a real page, then there will be less.

If you sent information up incorrectly, then Facebook may cache the information with the wrong settings. This was the case when I had some things set incorrectly.

There is a web application called Linter (find it here: http://developers.facebook.com/tools/lint) that can help determine if your site is correctly set up for the “Like” button. If you enter http://www.yourSiteName.come or http://www.yourSiteName.come/yourBlogLink/

Facebook will attempt to parse the web page you enter to check whether the “Like” button and Open Graph tags have been set up correctly. If not, you will see errors, or perhaps the links that are generated will be bad.

Linter should also clear the cache so that you can start over with new values filled in to see why the Facebook “Like Buttons” are generated incorrectly. However, the cache is not always cleared and you might have to wait 48 hours for the cache to clear!!

Pages you Admin

http://www.facebook.com/pages/manage/

Sometimes you won’t see the pages you are supposed to be Administering unless you “Like” the page in question using the “Like” button.

Cache it in!

It seems that Facebook really likes your information. So much so that they hold onto it for a while. Even if you tell it to stop. Some ways of avoiding caching issues are:

Don’t try anything until AFTER you have read all the documentation!
Use test pages and test URLs initially rather than the actual page names for pages of your site.
Check spelling of your site/pages!!!
Use Linter to test initially, rather than the “Like” button
Wait 2-3 days and then try it again
I noticed that on my blog posts, if I changed the names of the pages when they were cached incorrectly, I could go back and try it again with the new post names.

Good Luck!

So there you have it. Hopefully, all my mistakes written down for you, so you may avoid the same pitfalls and hopefully get your “Like” button added to your site a lot more quickly and easily than I was able too!!!

Additional Issues

If you created a ”Facebook Business page”, which created a limited Facebook account, and then upgraded to a normal user account, you may be prompted while on the Business profile Page, to use Facebook as the limited account or the full user account. This is great if you would like to allow the Business to “Like” things.“

However, I sometimes saw a glitch whereby if you are using Facebook as your “Facebook Business Page” you may not even see the “Like button” or the Hello message as I have built into the Easy Scraps web pages. I have not been able to track down why.

If you are trying to display the “Login” button, and it doesn’t change properly from “Login” to “Logout” when you log in to Facebook, then it is probably because you haven’t allowed access for your application. A User needs to allow the application (the one you set up way back in one of the first steps ) to have access to their information before the Login button will work.

I saw errors occasionally in the Facebook button handling until I, as the application’s Administrator, logged in and went to the application’s Admin page and clicked “Like”.

Original post blogged on Easy Scraps Blog- Tech Corner.

Slow Down- A Cautionary Tale

Get a Facebook Account

Set up a Facebook Page- maybe

Add a “Like Box” to another Web Page

Off to the Races- Maybe

“Like” Button Woes

Site or Pages or Posts?

Read the documentation

IFrame or XFBML

Set up a Facebook Application