Facebook Like Box 소셜 플러그인이 Turbolinks에서 작동하지 않습니다.

Question

Like Box 소셜 플러그인 (https://developers.facebook.com/docs/reference/plugins/like-box/)을 사용 중이며 잘 작동합니다.

문제는 Turbolinks가있는 Rails 4 응용 프로그램에서 사용하고 있습니다. 페이지를 새로 고침 할 때마다 같은 상자가 나타납니다. 링크를 클릭하면 다음 페이지가로드되고 좋아요 상자가 표시되지 않습니다.

나는 이미 시도했지만 작동하지 않았다 =/

http://reed.github.io/turbolinks-compatibility/facebook.html

이 문제를 해결하는 방법에 어떤 아이디어가?

Answer 1

원래 질문에 게시 한 링크가 아주 좋습니다.

1) saveFacebookRoot : 나중에 div#fb-root을 복원 할 수 있도록하기 위해 필요합니다. 이것은 page:fetch에 호출됩니다. DoM이 여전히 이전 페이지 인 동안 page:fetch이 호출됩니다. 예 : 새 페이지가 이전 페이지를 대체하지 않았습니다.

2) restoreFacebookRoot : div#fb-root을 페이지에 다시 추가 할 수 있어야합니다. page:change에서 호출됩니다. page:change은 새 DoM을 사용할 수있을 때 호출됩니다.

3) 거기에 약간의 오타가 있습니다. 우리는 대신 page:load

FB.XFBML.parse() // Correct 

이 전화를해야합니다

FB?.XFBML.parse() // InCorrect 

이 페이지가 처음 다시로드 할 때 만 page:change는이 세 가지 중이라는 것을 기억하십시오.

여기서 트릭은 글로벌 변수 fb_root과 fb_events_bound을 사용하는 것입니다. 이들은 다른 모든 페이지에서 액세스 할 수 있어야합니다. 그러나 이것이 우리가 터보 링크를 처음부터 싫어하는 이유입니다.

참고 : http://reed.github.io/turbolinks-compatibility/facebook.html

Answer 2

observejs 설치 :

<div as="FB" class="fb-comments" data-href="<%= request.original_url %>"></div> 

그런 다음 내 예에 새로운 자바 스크립트 폴더에 스크립트 (fb.coffee를 만듭니다

이

gem 'observejs' 

그런 다음 위젯에 태그를 추가) :

ObserveJS.bind 'FB', class 
    root: document.createElement('div') 
    @::root.id = 'fb-root' 

    loaded: => 
    if !document.body.contains(@root) 
     document.body.appendChild(@root) 

    if FB? 
     FB.XFBML.parse() 
    else 
     @initialize() 

    initialize: => 
    js = document.createElement('script') 

    script = document.getElementsByTagName('script')[0] 
    js = document.createElement('script') 
    js.id = 'facebook-jssdk' 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID&version=VERSION_OF_API" 
    script.parentNode.insertBefore(js, script) 

application.js에 js 파일을 포함하십시오.

//= require observejs 
//= require fb