CODEWITHSUNDEEP
cssfacebookfacebook-javascript-sdksendfacebook-social-plugins
Andrew Craswell
Andrew Craswell

Reputation: 674

Facebook Send Button - Cancel Button Not Functioning

I just added a Facebook Like/Send plugin onto my page. I QA'd the plugin on my dev machine and everything worked perfect. When I published the site to my live website (http://www.raveradar.com) the "Send" button began having problems.

The problem is only effecting the Send button, when you click "Send" a new form opens up, but oddly enough the Cancel button on this form does not function anymore. That is, when the Cancel button is clicked the flyout form does not disappear. No errors, nothing. All I can figure is that this is some sort of CSS problem, but what confuses me is that this was working on localhost in all browsers. If it was a CSS problem shouldn't I have experienced it?

Any help is greatly appreciated.

HTML tag:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

Body:

<body onload="LoadRaveRadarMap('<%=ConfigurationManager.AppSettings["bingMapsKey"].ToString() %>');">

<!-- Setup Facebook JavaScript SDK -->
<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '<%=ConfigurationManager.AppSettings["raveRadarAppID"].ToString() %>',
            channelUrl: '//ConfigurationManager.AppSettings["raveRadarDomain"].ToString() %>/scripts/channel.html',
            status: true,
            cookie: true,
            xfbml: true
        });
    };

    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Services>
            <asp:servicereference Path="WcfRaveRadar.svc" />
        </Services>
    </asp:ScriptManager>

    <div id="container">
        <!-- Rave Radar Map - The source of all awesomeness! -->
        <div id="raveMapContainer" class="raveMap" />

        <!-- Facebook 'Like' button -->
        <div id="fbLike">
            <fb:like ref="top_left" href="<%=ConfigurationManager.AppSettings["raveRadarDomain"].ToString() %>" send="true" layout="button_count" width="129" show_faces="true" font="arial"></fb:like>
        </div>
    </div>
</form>

Page CSS (raveRadar.css):

.raveMap {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;

}

#fbLike {
position: absolute;
top: 35px;
z-index: 1002;
width: 129px;

}

EDIT: After inspecting the Chrome console, I can see that an error IS being thrown when I click the "Cancel" button:

Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/dialog/oauth?api_key=288300704552515&app_id=288300704552515&channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df148fbcbb4%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent.parent%26transport%3Dpostmessage&client_id=288300704552515&display=none&domain=localhost&locale=en_US&origin=1&redirect_uri=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df1d2b95ec4%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent%26transport%3Dpostmessage%26frame%3Df3797f333c&response_type=token%2Csigned_request%2Ccode&sdk=joey from frame with URL http://www.facebook.com/plugins/send_button_form_shell.php?api_key=288300704552515&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df8557776c%26origin%3Dhttp%253A%252F%252Flocalhost%253A50280%252Ff14432130c%26relation%3Dparent.parent%26transport%3Dpostmessage&controllerID=ut2r33_4&error=&extended_social_context=false&locale=en_US&nodeRef=top_left&nodeURL=http%3A%2F%2Fwww.raveradar.com%2F&sdk=joey. Domains, protocols and ports must match.

I'm getting this error on both my dev machine, and my live website. I just don't understand why it works on my localhost, but not on my server. Are there any workarounds?

Upvotes: 0

Views: 785

Answers (2)

Mike P.
Mike P.

Reputation: 1930

I recently ran into an identical issue as Andrew Craswell, but unfortunately for me, testing it on a different machine did not yield different results; the Cancel button was still non-functional and the Share modal could not be dismissed.

After some hunting around & working down to minimal test cases, I found out that my issue was CSS related, we were doing this in our global CSS file:

.fb_iframe_widget { display: block !important; }

Removing this line fixed the issue entirely. It's worth noting that this happened in both Webkit & non-Webkit browsers.

Hopefully this helps anyone else who may run into this problem.

Upvotes: 0

DMCS
DMCS

Reputation: 31870

The error item in the chrome console is "normal" and is not related to your issue. I see it too, but the share still works.

I've tested your site with both FF and Chrome, and the send button is working normally whether or not I'm logged in. Both send and cancel button work on the fly-out too.

I linted the url being liked, and it is being linted correctly (usually this is the source of most people's issues).

I'm wondering if it is related to your particular browser. Maybe there's a host file entry on your box that is pointing resources at a different location.

Upvotes: 1

Related Questions