Facebook SDK和rails 4 Turbolinks

Question

我很难尝试将javascript Facebook SDK加载到我的rails 4应用程序中。有没有一种好的方法可以使涡轮连接正确工作？

如果我将这段代码添加到我的JS应用程序资产中。 这不是由于turbolinks正常工作：

<div id="fb-root"></div> 
<script> 
    window.fbAsyncInit = function() { 
    // init the FB JS SDK 
    FB.init({ 
     appId  : 'YOUR_APP_ID',      // App ID from the app dashboard 
     channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms 
     status  : true,         // Check Facebook Login status 
     xfbml  : true         // Look for social plugins on the page 
    }); 

    // Additional initialization code such as adding Event Listeners goes here 
    }; 

    // Load the SDK asynchronously 
    (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/all.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
</script> 

感谢

Answer 1

你会发现这里Turbolinks整合了Facebook SDK妥善解决：

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

Answer 2

我有一个问题当我使用turbo链接在页面之间导航时，Like Box不加载。我的解决方案是在我的assets/javascripts文件夹中创建一个social.js.coffee。在这个文件中它只是

$(document).on 'page:change', -> 
    FB.init({ status: true, cookie: true, xfbml: true }); 

我知道它有很多摆在它自己的文件;-)，但当时的想法是，我知道谷歌分析，Twitter和其他人将具有相同的冲突，这将也是安置这些解决方案的好地方。

Answer 3

如果你把你的Facebook的JS代码在您的视图的结尾，使用flush在你的控制器行动，以确保它是完全正确Turbolinks重装：

def show 
    # ... 
    render :show, flush: true 
end 

工作就像一个魅力。

Answer 4

我按照@gALLonallen提出的解决方案进行了一些小修改。刚刚创建了一个名为turbo.js有以下内容的文件：

$(document).on('turbolinks:load', function() { 

    FB.init({ status: true, cookie: true, xfbml: true }); 

}); 

而且//= require query前application.js中添加//= require turbo，并开始为我工作。我正在使用rails 4.2.6和ruby 2.3.1与turbo links 5。对我来说，在修复之前，turbo链接正在我的本地工作，但在部署到分期或产品时不会。

Answer 5

报价this answer

如果你喜欢使用原生Turbolinks 5个事件，您可以将此脚本添加到您的Rails资产：

// 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/ja_JP/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)); 

来源：https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00