동작이 사용자 벽에 표시되지 않음

Question

나는 성공적으로이 문제를 해결하기 위해 며칠을 보냈습니다. 문제는 사용자가 같은 버튼을 클릭 할 때 벽에있는 것을 좋아한다는 것을 나타내지 않는다는 것입니다. 코드가 localhost의 테스트 설정에서 올바르게 작동하지만 프로덕션 환경에서는 작동하지 않습니다.

내 고객은 이미지 갤러리 플러그인을 사용하여 사용자가 미리보기 이미지를 클릭 할 때 더 큰 버전의 이미지를 표시하는 FancyBox라고하는 라이트 박스 플러그인을 사용합니다. 그는 나를 fancybox마다 facebook을 추가하라고 요청했다.

fanybox가 동적으로 생성되었으므로 fancybox가 렌더링 될 때마다 button iframe과 같은 새로운 기능을 생성합니다. like 버튼 iframe에서 사용하는 URL은 사용자가 클릭 한 그림에 고유합니다. 이 코드는 갤러리 URL에 & photo =/location/of/photo.jpg를 추가합니다. 그런 다음 전체 맞춤 URL이 encodeURIComponent()를 통해 전달되어 iframe으로 전달됩니다. 여기

이

var currentURL = document.URL, 
    currentIMG = $("#fancybox-img").attr("src").split("http://www.downsplash.com").pop(); 
if (currentURL.match("&photo=")) { 
    var currentURL = currentURL.split("&photo=").shift(); 
}; 
var thisURL = encodeURIComponent(currentURL + "&photo=" + currentIMG); 
<span id="fancybox-title-over"> 
    <div id="facebook-like" style="display:inline-block;"> 
     <iframe src="//www.facebook.com/plugins/like.php?href=" + thisURL + "&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=true&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21&amp;appId=314592468583405" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe> 
    </div> 
</span> 

Here is a link to the code running in production.

등 버튼 코드가 ​​차질없이 작동하는 것 같다 iframe이를 생성하는 데 사용되는 코드입니다, 당신이 좋아하고 사진을 달리 할 수 ​​있습니다. 유일한 문제는 사진을 좋아할 때 사용자 벽에 아무 것도 나타나지 않는다는 것입니다.

참고 : 로컬 호스트에서이 코드를 테스트 할 때이 페이스 북에 게시 않습니다/& 사진 =/위치 /의 사용자 정의없이 photo.jpg를

그냥 기본 URL을 사용하는 경우

1. 모든 것이 제대로 작동 .

나는 왜이 좋아하는 것들이 사용자의 페이스 북 벽에 나타나지 않는지 잘 모르겠다. 누구든지 아이디어가 있습니까?

Answer 1

Heera으로 지적했듯이 생산 코드는 작동하지만 페이스 북이 사용자 벽에 게시하면 & photo =/location/of/photo.jpg를 제외한 포트폴리오의 URL을 게시합니다. 페이스 북에 포트폴리오 URL과 아무것도 제공하지 않는 헤더에 Open Graph 메타 태그가 있기 때문에 이러한 상황이 발생합니다.

<meta property="og:url" content="http://www.downsplash.com/?portfolio=portraits"> 

이미 포트폴리오 URL을 좋아했기 때문에 내 벽에 게시물을 볼 수 없었습니다. 이 오픈 그래프 태그는 'Simple Facebook Connect'및 'Tweet, Like, Google+, Share'플러그인에 의해 헤더에 자동으로 추가됩니다. 이것은 또한 내 코드가 localhost 테스트 사이트에서 작동하는 이유를 설명합니다. 왜냐하면 Facebook에서 사진을 좋아할 때 open graph 태그에 대해 localhost를 검색 할 수 없기 때문입니다.

도움 주셔서 감사합니다.

편집 :이 플러그인을 비활성화 제대로 HTML에 표시 내 오픈 그래프 태그, 나는 주어진 URL에 대한 오픈 그래프 태그를 캐시 페이스 북에 관련된 문제가 발생한 것을 확인했다 후

. 이로 인해 이전 잘못된 URL 리디렉션이 계속 발생했습니다. Facebook's Open Graph Debugger을 방문하고 URL을 입력하여 문제를 해결했습니다. 이로 인해 Facebook은 열린 그래프 태그의 캐시를 새로 고칩니다.