Rails TurbolinksのFacebookプラグインページがロードされない

Question

私のRailsアプリではFacebookのプラグインページをロードしていますが、ターボリンクのために各ページが読み込まれません。私はthis script on this pageを試しましたが、今はロードされません。私は何をしましたか？

私はこのスクリプトでfacebook.coffee作成：

$ -> 
    loadFacebookSDK() 
    bindFacebookEvents() unless window.fbEventsBound 

bindFacebookEvents = -> 
    $(document) 
    .on('page:fetch', saveFacebookRoot) 
    .on('page:change', restoreFacebookRoot) 
    .on('page:load', -> 
     FB?.XFBML.parse() 
    ) 
    @fbEventsBound = true 

saveFacebookRoot = -> 
    if $('#fb-root').length 
    @fbRoot = $('#fb-root').detach() 

restoreFacebookRoot = -> 
    if @fbRoot? 
    if $('#fb-root').length 
     $('#fb-root').replaceWith @fbRoot 
    else 
     $('body').append @fbRoot 

loadFacebookSDK = -> 
    window.fbAsyncInit = initializeFacebookSDK 
    $.getScript("//connect.facebook.net/cs_CZ/sdk.js#xfbml=1&version=v2.6") 

initializeFacebookSDK = -> 
    FB.init 
    appId : 'YOUR_APP_ID' 
    status : true 
    cookie : true 
    xfbml : true 

をそして、私application.jsに私はそれを必要とします。ビューで

私はこのコードを持っている：

<div id="fb-root"></div> 
<div class="fb-page" data-href="https://www.facebook.com/mypage/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/mypage/"><a href="https://www.facebook.com/mypage/">MyPage</a></blockquote></div></div> 

Facebookのプラグインのページがロードされていません。なぜか分からないのですか？私はappIdを見ていたが、プラグインのページには含まれていなかった。

Answer 1

これは私のために働いた...ページにFacebookのドキュメント間の組み合わせのいくつかの並べ替え、スクリプトがあなたは違いがloadFacebookSDK機能である

$ -> 
    loadFacebookSDK() 
    bindFacebookEvents() unless window.fbEventsBound 

bindFacebookEvents = -> 
    $(document) 
    .on('page:fetch', saveFacebookRoot) 
    .on('page:change', restoreFacebookRoot) 
    .on('page:load', -> 
     FB.XFBML.parse() 
    ) 
    @fbEventsBound = true 

saveFacebookRoot = -> 
    if $('#fb-root').length 
    @fbRoot = $('#fb-root').detach() 

restoreFacebookRoot = -> 
    if @fbRoot? 
    if $('#fb-root').length 
     $('#fb-root').replaceWith @fbRoot 
    else 
     $('body').append @fbRoot 

loadFacebookSDK = -> 
    ((d, s, id) -> 
    js = d.getElementsByTagName(s)[0] 
    fjs = d.getElementsByTagName(s)[0] 
    return if d.getElementById(id) 
    js = d.createElement(s) 
    js.id = id 
    js.src = "https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5" 
    fjs.parentNode.insertBefore(js, fjs) 
)(document, 'script', 'facebook-jssdk') 

initializeFacebookSDK = -> 
    FB.init 
    # appId : 'YOUR_APP_ID' 
    status : true 
    cookie : true 
    xfbml : true 

をリンク。質問にコメントしたところで、$ .getScript（）はリクエストのクエリ/パラメータ部分を削除します。この質問を見つけた誰のために

Answer 2

、私は問題を解決し、この主旨を見つけた：https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00

// FacebookSDK 
// https://developers.facebook.com/docs/plugins/page-plugin/ 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); 
    js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); // Replace 'facebook-jssdk' with your page id. 

// Compatibility with Turbolinks 5 
(function($) { 
    var fbRoot; 

    function saveFacebookRoot() { 
    if ($('#fb-root').length) { 
     fbRoot = $('#fb-root').detach(); 
    } 
    }; 

    function restoreFacebookRoot() { 
    if (fbRoot != null) { 
     if ($('#fb-root').length) { 
     $('#fb-root').replaceWith(fbRoot); 
     } else { 
     $('body').append(fbRoot); 
     } 
    } 

    if (typeof FB !== "undefined" && FB !== null) { // Instance of FacebookSDK 
     FB.XFBML.parse(); 
    } 
    }; 

    document.addEventListener('turbolinks:request-start', saveFacebookRoot) 
    document.addEventListener('turbolinks:load', restoreFacebookRoot) 
}(jQuery));