0

방금 ​​Facebook Like/Send 플러그인을 내 페이지에 추가했습니다. 나는 내 dev 컴퓨터의 플러그인을 QA'd하고 모든 것이 완벽하게 작동했다. 라이브 웹 사이트 (http://www.raveradar.com)에 사이트를 게시하면 "보내기"버튼에 문제가 발생하기 시작했습니다.Facebook 보내기 버튼 - 취소 버튼 작동하지 않음

문제는 보내기 단추에만 영향을주고, "보내기"를 클릭하면 새 양식이 열리지 만 이상하게도이 양식의 취소 단추는 더 이상 작동하지 않습니다. 즉, 취소 버튼을 클릭하면 플라이 아웃 폼이 사라지지 않습니다. 오류가없고 아무것도 없습니다. 내가 생각할 수있는 것은 이것이 일종의 CSS 문제이지만 모든 브라우저에서 localhost를 사용하고 있다는 것이 혼란 스럽다. CSS 문제라면 경험하지 않아야합니까?

도움을 주시면 대단히 감사하겠습니다.

HTML 태그 :

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

바디 :

<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> 

페이지 CSS (raveRadar.css) :

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

}

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

}

편집 : 나는 '

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. 

: 크롬 콘솔을 검사 후, 나는 오류 내가 "취소"버튼을 클릭 할 때 발생되고 있음을 볼 수있다 내 dev에 컴퓨터, 그리고 내 라이브 웹 사이트 에서이 오류가 점점. 왜 내 로컬 호스트에서 작동하지만 내 서버에서는 작동하지 않는지 이해할 수 없습니다. 해결 방법이 있습니까?

+0

브라우저로 보내지는 HTML은 무엇입니까? – DMCS

+0

내가 따라 가지 않겠습니까, 더 구체적으로 할 수 있습니까? –

+0

또한 웹 브라우저에서 보는 내용을 VIEW SOURCE에 게시하십시오. 위 질문에서 볼 수있는 것은 서버 측 코드입니다. – DMCS

답변

1

크롬 콘솔의 오류 항목이 "정상"이며 문제와 관련이 없습니다. 나는 그것도 보지만, 그 몫은 여전히 ​​효과가있다.

나는 FF와 Chrome을 사용하여 사이트를 테스트했으며, 내가 로그인했는지 여부에 관계없이 보내기 버튼이 정상적으로 작동하고 있습니다. 전송 버튼과 취소 버튼 모두 플라이 아웃에서 작동합니다.

내가 좋아하는 URL을 linted, 그리고 그것이 올바르게 linted되고있다 (일반적으로 대부분의 사람들의 문제의 근원이다).

특정 브라우저와 관련이 있는지 궁금합니다. 어쩌면 다른 위치에 자원을 가리키는 상자에 호스트 파일 항목이있을 수 있습니다.

+0

좋아요, 내일 다른 위치에서 확인하여 무슨 일이 일어나는지 확인하겠습니다. 내 dev에 컴퓨터에서 크롬, IE, 오페라, FF 및 사파리 동일한 결과를 테스트했습니다. 호스트 항목만큼이나 단순하기를 바랍니다. 도움을 주셔서 감사합니다 :) –

+0

내 dev 컴퓨터와 무슨 일인지 모르지만 그것은 다른 컴퓨터에서 올바르게 표시되고있는 것 같습니다. 감사. –

0

최근 Andrew Craswell과 동일한 문제가 발생했지만 불행히도 다른 컴퓨터에서 테스트 한 결과 다른 결과가 나오지 않았습니다. 취소 단추는 여전히 작동하지 않으며 공유 모달을 해제 할 수 없습니다.

.fb_iframe_widget { display: block !important; } 

제거이 행이 완전히 문제를 해결 :

일부 사냥 주위 & 최소한의 테스트 케이스까지 한 후, 나는 우리가 우리의 글로벌 CSS 파일에이 일을하고, 내 문제는 CSS 관련이 있음을 발견 .웹킷이 아닌 웹킷 &에서 이러한 현상이 발생했다는 사실은 주목할 가치가 있습니다.

이 정보가 도움이 되었기를 바랍니다.