Facebook Connect button not showing up in Safari/Chrome

Asked 1/5, 2009 at 7:54 Answered 16/7, 2013 at 9:45

My implementation of Facebook Connect (just a simple login button, fb:login-button) works perfectly on Firefox and IE.

But the same button is not showing up in Safari/Chrome (Webkit).

Here's what's ironic. In my debugging effort, I saved the page (that contains fb:login-button) up as a static page and then load it in Safari. And the button shows up, everything works!

The exact same page (with the exact same HTML source) rendered by my PHP has no way for bringing up the button.

I'm trying hard to support Webkit here but I'm close to giving up. Can anybody help?

Arango answered 1/5, 2009 at 7:54 Comment(4)

Can you post your source code, or better yet, a link to a live example? – Scotia 1/5, 2009 at 9:7

Sure. The dynamic page - dev.hailer.my/main/fbconnect The static page - dev.hailer.my/test_fb.html Both page rendered the same codes; and only the static page works in Webkit. – Arango 2/5, 2009 at 12:23

I'm having the same problem. Does the test page still work if you put it in the "main" folder? – Vanitavanity 22/7, 2009 at 3:13

Same here, this question was asked a year ago :) – Paigepaik 21/4, 2010 at 15:30

I found one more way this can occur (the blame-myself-for-being-stupid way); it's probably not common, but in the event is saves anyone else the hassle, here it is:

This symptom can also be caused by various security tools blocking facebook resources.

In my case, I'd installed Facebook Disconnect ages ago in Chrome as a plugin and forgotten all about it being installed. I also had a second installation of Chrome that was seemingly identical (but did not have Facebook Disconnect). The first would properly load the fb:login-button, and the other would not; took me ages before I looked at the plugins, because Facebook Disconnect didn't have an icon and so its presence was pretty easy for me to miss.

Here's what you'll see if some sort of security plugin is preventing facebook resources from loading. Just look at the html that renders in the browser using developer tools.

In a normal chrome session you'll end up with something like this:

<fb:login-button><a class="fb_button fb_button_medium"><span class="fb_button_text">Your text here</span></a></fb:login-button>

But in the version with facebook's resources disabled you'll end up with this:

<fb:login-button>Your text here</fb:login-button>

Like I said, pretty obvious in retrospect.

Text answered 7/10, 2011 at 6:1 Comment(1)

+1 for mentioning Disconnect Extension. Took me a while to figure it out :-) – Stepsister 19/2, 2014 at 11:4

Had the same problem but it was not related to anything like a plugin or malformed content. It seems if you enable country filtering on your facebook page it has an issue with the like button, this should be fairly obvious. Facebook gets your location from your profile and not your IP address.

Make sure to disable country locking if you plan on using the social plugins.

Altissimo answered 15/11, 2012 at 14:31 Comment(0)

This can be due to having ClickToFlash installed. Either disable it, or check "Automatically load invisible Flash views" in the ClickToFlash settings.

Feints answered 1/2, 2010 at 22:36 Comment(0)

What we found out is that Safari (and maybe some older versions of Chrome or other WebKIT browsers) have a problem with Facebook's code using the innerHTML JS function if your page arrives with an XHTML response header (application/xhtml+xml). Using text/html solves the issue.

In case of JSF2, which we use, the implementing the fix was as simple as wrapping the FB button like this:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:fb="http://www.facebook.com/2008/fbml"
    xmlns:f="http://java.sun.com/jsf/core">

...

    <f:view contentType="text/html">
        <fb:login-button>Login using Facebook</fb:login-button>
    </f:view>

Facebook bug report here:
http://bugs.developers.facebook.net/show_bug.cgi?id=5545

Baer answered 23/6, 2011 at 15:36 Comment(0)

I had this problem with the Facebook button not showing at all and it took me forever to figure out what it was. Luckily after days of hair pulling I will now share the answer with everyone. In my situation I simply didn't have xfbml enabled. In my FB.init I had it set to false:

    FB.init({
        appId       : 'app_id', // App ID
        status      : true, // check login status
        cookie      : true, // enable cookies to allow the server to access the session
        xfbml       : false,  // parse XFBML
        oauth       : true // enable OAuth 2.0
    });

I changed this to "true" (xfbml) and the login buttons works great now! :P Good luck!

Blubber answered 20/4, 2012 at 1:5 Comment(0)

This happened when I had the wrong domain in callback_url in config/facebooker.yml. Apparently it uses that to load the js files.

Decennium answered 27/2, 2010 at 2:51 Comment(0)

I had the same problem but I resolved it by making sure the URL in my app settings was exactly the same as the one for my site (i.e. it didn't work when I accessed my site without the www.).

Eyestrain answered 5/12, 2010 at 6:15 Comment(0)

I have tried every suggested solution here and it didn't work for me. But now I finally found the solution.

Facebook requires now a secured (https) for Canvas (Secure Canvas URL). The unsecured one will be deprecated soon.

Here is the main difference, Chrome doesn't like https connections with invalid certifications. On a localhost, it is very likely you have stunnel installed to allow https connection for the localhost. Firefox is ok with the self created SSL certificate and allows you to add an exception when trying to access that site. Chrome doesn't allow it out of the box.

enter image description here