Update: Since writing this, Facebook has altered the look of the Application Settings page. Now there’s only two major settings that you need to set, and they’re both on the Web Site tab: The Site URL and the Site Domain. Set those correctly and your App will work with SFC. Set them incorrectly, and it will not. So, much simpler, really. :)

The majority of the email I get from users of the Simple Facebook Connect plugin is questions regarding how to setup their Facebook Application. It’s really not that hard to do, but the plethora of options can seem somewhat intimidating. So here’s the basics of what you need to do.

After creating your application, you’ll need to visit the Apps section in the Facebook Developer Home area. Here you’ll find your application, and the all critical “Edit Settings” link.

Main Application Screen

Firstly, never give out your Application Secret. If you give this out by accident, then use the Reset Secret Key link to get a new one.

Anyway, from here, you want to go into the settings. The settings area is divided into six main sections, but most of the settings are irrelevant. See, you’re building a “Connect” application, not a “Canvas” one. So most of these are meaningless for you. The following ones are what you actually care about:

Application name

Obviously, you want the name of your Application to make sense. I suggest using the same name as your website. You can even use your domain name here if you like. Just be aware that this name is what the Fans of your site will see in their Applications area.

Basic Information

The Basic Information section is important as well, fill it in as you see fit. I also recommend uploading good icons and/or logos for your site. Gives it that finished look.

Contact Information

Contact Information is obviously important as well, but don’t worry about all those extra URLs. They really apply more to Canvas apps. Of course, if you want to make special pages on your site for them and provide the URLs here, feel free.

Authentication Settings

The Authentication Settings page is surprisingly important. Those top two boxes need to be unchecked for a Facebook Connect application. Why? Because when they are unchecked, your Application becomes an “External Website” as far as Facebook is concerned. If you have either them checked, then your app’s Canvas section becomes active and you might have users trying to add it to their profiles and such, resulting in broken pages and a general bad user experience.

Connect Settings

The Connect Settings page is probably the most important one. These settings must be filled in and they must be absolutely accurate. Specifically, the URLs must be the URLs that are actually used by your site. Capitalization matters. The leading “www” or lack of one matters. Whatever the URL your site is in the browser is what you MUST put into these fields. Anything less and your site will not work.

Advanced Settings

The Advanced Settings screen contains these three fields which you need to set in the same way I did. The email domain no longer exists, however. They removed that in favor of a different approach, so you can ignore that field.

Application Profile

Finally, after you have saved those settings, take the time to go back to the main application screen and click the “Edit Application Profile” link. You’ll be taken here, where you can set up the “look” of your application page on Facebook. This includes what tabs are visible, the stuff in the Info section, etc. You can add extra Applications tabs to this page and generally customize all sorts of stuff. None of that affects your site, but it does affect how the App Page looks in Facebook. The more polished it is, the more likely people will “Fan” your Application. And Fans get updates from when you publish posts to the Wall. Great way to drive traffic to your content.

Hope this helps! Mainly, I hope this reduces the number of questions I get about this process. Enjoy SFC!

Shortlink:

204 Comments

  1. […] Otto on WordPress Blog: How to Set Up Your Facebook Connection Application (Excellent!) […]

  2. I tried this, but when I write the adress of my page it sais that it’s not valid. What should I do?

  3. I verified that I have all these settings properly on my blog, but when I try signing in with my Facebook credentials (which gives me the same result here on your blog), and then try to post the comment I get the JS alert box telling me “Please enter your name”. I don’t know what I may have messed up here since obviously this DOES work. Any idea what setting(s) I should look at?

    • There is no “Please enter your name” alert box on this site. There’s no javascript to do anything of the sort, in fact.

      If you have some javascript on your theme checking for a name entry, then you need to remove it. The SFC comments plugin works on the back end. Basically, it fills in the blank name behind the scenes, using FB data. So if your theme is trying to force the user to enter a name, then that needs to be disabled.

  4. When tryng to share a post on my facebook account I am getting the “Share this story?” pop-up box but it is greyed out with the following message “Sorry, your request cannot be processed”. The webpage is http://www.eastkeilorfc.com. Can you provide any assistance.

  5. “I tried this, but when I write the adress of my page it sais that it’s not valid. What should I do?”

    I had this problem, make sure you have an / at the end of the URL or it’ll say invalid..

  6. Hi Otto,

    great tool, thanks for that!

    Another question i have is, if there is a possibilty to “target=”_blank”” the published posts. I’ve had some people complaining about when they clicked the post they would leave fb.

    Regards

    Sebastian

  7. hiiii, ive been trying to get a picture in my info box under my profile pic or somewhere on my profile. but im not too sure how to do it ]= im very frustrated , it’s like 3.43 am right now and i still cnt get this done. i made an application but it dosnet seem to be working :S i was wondering if you could help me with this ]=

  8. Hello Otto,
    It looks like as a nice idea for plugin. I have one problem, and I am in interesting where is it. When I put Api key. Aplication secret and aplication ID, on right side I get
    Facebook Platform Status

    RSS Error: WP HTTP Error: Couldn’t resolve host ‘www.facebook.com’
    is it problem with FB or with my WP?
    thanks

    • That error basically means that your webserver doesn’t have DNS resolution and so it can’t talk directly to other servers on the net. Usually this is caused by an overzealous security configuration, or by the server being firewalled. You’ll have to ask your hosting service about it.

  9. I have this Error on my Editor Site:

    If you can see this, then there is some form of problem showing you the Facebook publishing buttons. This may be caused by a plugin conflict or some form of bad javascript on this page. Try reloading or disabling other plugins to find the source of the problem.

    What can this be???

  10. Hi! Been trying to change my setup to see if that’s what causing problems when installing the plugin. But…I get this message, what is it I’m doing wrong?

    “Validation failed.

    URL för bokmärke must be relative to your Canvas Page URL.”

  11. Hey Otto, great plugin. This is probably a dumbass question, but where do I find the User profile number for the SFC Status widget?

    • Not a dumb question, because FB makes it annoyingly difficult to find your user ID number.

      Easiest way I’ve found: Go to your profile. Hover over your picture or click it to get the change picture URL. In the URL, there’s a parameter called “ID”. That’s your user ID number.

  12. Hi Otto, is Lorenzo :)
    As everybody: great plugin!

    Unfortunately I have a problem with the FB connect button in the comments area: it seems to work fine (I can log in with my FB user and then write a comment) but after the click on the button, there are no changes: I cannot see the FB profile information (photo and connected message) instead of FB button and input fields!

    Please, can you help me?

    Thankyou
    Lore

    P.S. I posted the same question on WordPress Forum as Lorenzoghi.
    P.P.S. Please excuse me for my terrible english!

  13. Now is right. You can see the problem :)

  14. I am trying to use the publish feature, it says there is a problem with the settings. I uninstall and reinstall and the old settings remain. How do I start over so that no settings remain, ie; api keys and extended permission settings.

  15. I got it, thanks i blew away and re-created my app and followed the directions. Viola.

  16. I’m new and didn’t realise the application itself was the actual wall on FB. So I inadvertently entered the wrong API Key, App Secret & App ID for the Find Us On Facebook widget. I’ve tried various uninstalls, delete & reload, clear cache: but the plug-in does not give me the page where I can re-enter the correct FB Application ID. I have created the FB App okay with the above instructions. Is there a way I can restart widget again so no settings remain, to re-enter the correct FB details? Many thanks in advance.

  17. Many, many thanks. It’s so simple when you know how. (I said I was new :0 ) Cheers and thanks again. Best wishes.

  18. I’m running into a strange thing – see http://www.romililly.com/wp-romililly/vivamus-sed-mi-non/

    The “Connect with Facebook” is text only and not clickable. Is this a failing on my applications settings?

    Thanks in advance!

  19. I wish I found your instructions when I started to learn facebook!

    You answered a SFC question today for me, I was hoping to ask you a FB question. I know it is not your responsibility, but I would appreciate it. I have spent hours on the facebook site, the closest I can come to a place to ask for help is on the developer forum. This one even came close to an answer. http://forum.developers.facebook.com/viewtopic.php?id=61706 But the warning when obtaining a user id indicates not to ask questions like this there.

    None of the help pages on facebook I went through address this.

    I am new to facebook and set up a page, for our news site, SFC is allowing all this to happen. When reaching the over 25 like limit, I saw the offer to request a user name. I requested “LondonderryNews” was told it could not be changed, paused, made sure it was right and selected it.

    The problem is it went to my personal account and not the page.

    http://www.facebook.com/pages/Londonderry-News/116519185061796?v=wall
    Is the Page I wanted it to be associated with.

    My personal page (Steve Young) is now http://www.facebook.com/LondonderryNews

    I can open the page http://www.facebook.com/username/ when logged on, and set my page name. I can not select “LondonderryNews” because it is taken, because I assigned it to my personal account.

    Do you know how I could fix this?

    I see I can ask for a new name (ONCE) for my personal account (I do not need one for that) if I do would it free up “LondonderryNews” for my page?

    Or did I keep myself from using that in any other way forever?

  20. I can tell you that I will NEVER assign the wrong name again!

    Although I have not been working with facebook very long, I have a feeling that “Facebook support” is a lot like “military intelligence” I have yet to find my way out of the Help maze.

    I think I will have a beer I hope you can join me!

  21. Hi Otto,

    I have followed all the instructions carefully, but when somebody clicks “connect with facebook” on my site, they get this error: “ERROR: Facebook user not recognized.”

    Any idea what is causing this?

    Many thanks

    • That error message is pretty straightforward, I think. The user is trying to login to the site with Facebook, but the site has no idea who they are because they have not hooked their WP account to their FB account yet. Or, to put it in simpler terms, the Facebook “user” was not “recognized”.

      Log in normally, then go to Users->My Profile and connect your two accounts.

      • Ok, that has worked for my account, thank you!

        So if any new users visit my website and click “connect with facebook”, will they get the same error? I was hoping that the connect with facebook feature would eliminate the need for people to register with wordpress. Do they need to register first, then connect their accounts as I have just done?

        thanks again for your swift response!

  22. I’m trying to get jomsocial to work on this site using single sign-on via a facebook connect plugin. I’m creating my app via Facebook for the API Key/Secret and can’t get past

    Validation failed.

    URL must point to a directory (i.e., end with a ‘/’ or a dynamic page (i.e., have a ‘?’ somewhere).

  23. […] than re-invent the wheel, I’m going to refer you to Otto’s page that explains some of the steps you’ll need to take to get it configured properly. There have […]

  24. Hey Otto,

    First of all, thanks for the great plugin! I got it to publish to Facebook without any problems, but I tried to get the Like/Recommend features to work but no luck. The button appears as expected, but when you click on it the button changes color and a 1 appears next to it. Nothing else happens and if you refresh the page it goes back to default. I had some friends test it and it ended with the same result. I tried the login/register and other connect related plugins and none of those seem to be working either.

    I have disabled them all for the night (so none of my readers get confused by them) and will look into it again tomorrow. I doubt this is enough information to give you a clear idea of what is wrong, but if you have any ideas/tips, I would really appreciate it.

    I am very happy the publish feature works though. :)

  25. Hi Otto… thanks for posting these tips. Everything works fine for me, until I “submit” and I get the following error: “You need to have at least 5 total users or 10 monthly active users before you can submit your application.”

    I know this sounds dumb, but I’m not quite clear on what this means, and how to correct it. Any insight you can you provide is appreciated.

    Thanks

  26. How is it possible to get this to work with a FB group?

  27. Thanks for the help, although I’m still having troubles. Can you please tell me what this means?

    API Error Code: 100
    API Error Description: Invalid parameter

    Error Message: next is not owned by the application.

    Thanks,
    Nick

  28. People seem to like commenting on my posts that are linked to facebook on facebook rather than on my site, francescadecaire.com. Do you have a plugin that will transfer these comments to my website?
    thank you for your time,
    francesca

    • Not yet, and that is my most requested feature. :)

      I’m currently about 30% through with a complete rewrite of the plugin to use the new FB APIs, I’ll make sure that will get in there.

      It will take about a month though. Sorry. :(

  29. When I try to post comments using SFC and facebook on my blog, I get an error from wordpress:
    “Error: please fill the required fields (name, email).”

    Any workaround for that?

  30. Hi Otto, awesome plugin! I already done some customizing this and the Twitter connect and they’re amazing. I do have one feature request/customization I’m wondering if you’ve run into before. I don’t want the Like and Tweet buttons on my individual pages, just single posts and the front page. I know how to use the WP Conditionals, but looking at the plugin code, I don’t know where I could put in if statements. Any help would be greatly appreciated, definitely donating to the beer fund when I get paid for this site I’m building!

    • Ha, cancel that, I figured it out, like a moron I simply forgot a bracket! For anyone else wondering, I simply added:
      if(is_single()||is_front_page()){ after function get_sfc_like_button($args='') { through the plug-in editor. Don’t forget the closing bracket for the if statement right before the closing bracket for the function!

  31. WHERE is ‘The Connect Settings page’ ?

    Looks like Facebook has changed it since you posted this.

  32. Additionally, I get the same response as LARRY. “You need to have at least 5 total users or 10 monthly active users before you can submit your application.”

  33. Mmmh, strange. I can’t seem to find the Authentication Settings for my facebook app. On the settings page, the menu on the left only says ‘about’, ‘web site’, ‘facebook integration’, ‘mobile and devices’, and ‘advanced’. Any idea on what i’m doing wrong or where i can find the Authentication Settings? Thanks!

  34. Hello,

    First, thanks for this great plugin. I am really looking forward to using it to its fullest potential.

    I have a small problem. I have activated both plugins (Simple Facebook Connect & Simple Twitter Connect) and unable to login with either one on my website. When I hit the Connect with Facebook button, it doesn’t take me anywhere, i.e. it just refreshes the login page.

    When I hit the Connect with Twitter button, it takes me to Twitter where I enter my login information, but when it comes back to the website it says – Twitter user not recognized.

    Can you help me get both of these functions running?

    Here is the link to my login page – http://www.emagine-group.com/wp-login.php

    Thanks!

  35. Thanks for your sharing,I will try,never use facebook before,this post very helpful for me.

  36. Hello,

    Please help, confused!

    Im getting this error “If you can see this, then there is some form of problem showing you the Facebook publishing buttons. This may be caused by a plugin conflict or some form of bad javascript on this page. Try reloading or disabling other plugins to find the source of the problem.”

    Here is what I am trying to do:

    I recently installed wordpress on the server, with the website. Now all we want to do is for the blog to post on their facebook fan page. I understand when I go back and “EDIT” the post, the facebook feature is on the right middle of the page. But as you can see from the error above i have done something wrong. I think its from the facebook developers page. Im deff doing something wrong there. When you create an application how is it supposed to know what fan page im talking about.

    Can you help me figure this out? its for a non-profit organization and there in need of this help.

    you can email me directly at gjiro@betbiznetwork.com. If possible a phone conversation? 9143745221

  37. Hi Otto,

    Hope you’re fine. I have a question regarding the FB App Like Box.
    Everytime I go to a blog with this feature and I click “I like”, a pop up windows appears several times.
    I use firefox, and even if I allow firefox to show pop up windows for the site, the problem remains.
    So this “I like” button doesn’t work or it is not linked to FB, for the only way to have a blog’s FB site “liked” is to do it manually, going directly to the FB site and clicking it there.
    I’ve add this like box to my own blog, so I fear this happens to those who see it.
    Is there a way to have the FB Site automatically “liked” from the blog or you just have to go to facebook for it?
    Hope you can help me with this, and hope you can understand my rudimentary english explanation.
    Best Regards. Macarena

  38. This page is out of date. The facebook settings pages look nothing like this now. Sorry it wasn’t helpful to me at all since facebook app settings are completely different than what is shown here. I am using WordPress 3.0.1 and sorry but I must mention that I am getting the message… “SFC-Comments doesn’t work with sites that require registration to comment. Use SFC-Login and SFC-Register to allow users to register on your site.” I reviewed your fix for non-working Comments Login and they were not helpful at all. Please show an EXAMPLE of where to put the three lines of code into the comments.php file. I know you are tired of hearing about it but perhaps a CLEAR example would help. Thanks

  39. @C3: I use an old theme, which has a file called comments.php
    There I had to find the lines for the input fields of name, email and url, and wrap them. They look like this now:

    <input type="text" name="author" id="author" value="" size="22" tabindex="1" />
    Name

    <input type="text" name="email" id="email" value="" size="22" tabindex="2" />
    Mail (will not be published)

    <input type="text" name="url" id="url" value="" size="22" tabindex="3" />
    Website

    But the exact look and feel of labels and input fields depend on the theme you are using.

  40. Sorry, the HTML code was messed up, try this and replace all [ by and all ] by >.

    [div id="comment-user-details"]
    [?php do_action('alt_comment_login'); ?]
    [p][input type="text" name="author" id="author" value="[?php echo $comment_author; ?]" size="22" tabindex="1" /]
    [label for="author">[small]Name [?php if ($req) echo "(required)"; ?][/small>[/label>[/p]

    [p][input type="text" name="email" id="email" value="[?php echo $comment_author_email; ?]" size="22" tabindex="2" /]
    [label for="email"][small]Mail (will not be published) [?php if ($req) echo "(required)"; ?][/small][/label][/p]

    [p][input type="text" name="url" id="url" value="[?php echo $comment_author_url; ?]" size="22" tabindex="3" /]
    [label for="url"][small]Website[/small][/label][/p]
    [/div]

  41. Outside of FB itself, there is really not much good guidance on FB apps on the web, so I think the support from this page alone is pretty awesome.

    Could someone possibly point me in the right direction for understanding how to collect information from a FB Connect or Login button that I place on my site? (My JS knowledge is low, so I apologize in advance). I’ve installed the base FB JS SDK on my site, and I use XFBML to insert a Connect or Login button (all attached to the appropriately related app). All of this seems to work fine (i.e., they show up and visitors can click and login or register). I’ve even set the permissions – only for public info plus right to email.

    However, how do I collect this information? There is some parsing explanation on FB, but I’m honestly too ignorant to figure it out (since I’ve tried for a couple days). Do I need to set up a Canvas page and run certain PHP script to parse the information?

    Any help is greatly appreciated.

  42. Hi Otto, sorry for this super simple questions, but I don’t know what site URL to put in to create my Facebook app. Thanks in advance!

  43. I was doing that, but I didn’t realize I had to put a “/” on the end. Thanks!

  44. Everything was going great until I updated the plugin and FacePage made their changes. Totally messed everything up. So I thought I would try a fresh app. not realizing that all my blog posts to my facepage would disappear. (effing facebook)In so creating an new app, it took FB a long time to QUIT referring to my deleted app. Most annoying. Now I have no idea what to start with as everything as totally changed since you have done this excellent tutorial…slightly miffed at FacePage…

  45. I cannot get it to grant publish permissions. The FB screen is stuck on stupid after I allowed access (appears to be a continual refresh loop)

  46. Okay, I had to take a break and step back from this. I re-read every post and sentence line by line.

    My errors were two fold. wrong app setting and WP supercache. Needless to say, I recant my previous posts.

    Appears so far I got it to work.

    I really appreciate this plugin and the time you put into it. Thanks a million!

  47. Hmm. The settings page of the plugin in wordpress seems not to save my information. I enter the App-ID, App-Secret, and API-Key, but the App-ID and API-Key immediately get lost. Any idea what is causing this?

  48. Hi Otto,

    Your plugin is so great and helpful.
    I have one issue or I want few more customizations.
    On login, I want to check if the email from FB account was exist in WP db record, is it possible? And how it is being done?

  49. I am setting up my Facebook Application for the second time. The first time around I never got any grief until I deleted the test app. I am now adding it for the second time and my domain is being rejected. (http://www.takemehome.co.za)

    Yes I tried entering it as “http://takemehome.co.za/” and “http://www.takemehome.co.za/” but I still get errors. I’m a little frustrated, please help as the above solutions don’t work for me.

    Regards,
    Thamsanqa Bengu

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.