Home/ Questions/Q 7087023
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T07:37:21+00:00

I just added a Facebook Like/Send plugin onto my page. I QA’d the plugin

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0