Facebook SDK和rails 4 Turbolinks

我很难尝试将javascript Facebook SDK加载到我的rails 4应用程序中。 是否有一种很好的方法可以使用turbolinks使其正常工作？

如果我在我的JS应用程序资产上添加此代码。 由于turbolinks，它无法正常工作：

  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'));  

谢谢

Answer 1

您可以在此处找到将Facebook SDK与Turbolinks集成的正确解决方案：

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 }); 

我知道它有很多东西放在它自己的文件中;-)，但我的想法是我知道谷歌分析，推特和其他人会有相同的冲突，这也是一个很好的地方来容纳这些解决方案。

Answer 3

引用这个答案

如果您更喜欢使用本机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

Answer 4

如果您将Facebook JS代码放在视图的末尾，请在控制器操作中使用flush ，以确保使用Turbolinks完全重新加载：

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

工作就像一个魅力。

Answer 5

我按照@gallonallen建议的解决方案进行了一些小修改。 刚刚创建了一个名为turbo.js的文件，内容如下：

 $(document).on('turbolinks:load', function() { FB.init({ status: true, cookie: true, xfbml: true }); }); 

并在//= require query之前添加//= require turbo在application.js中//= require turbo并且它开始为我工作。 我使用rails 4.2.6和ruby 2.3.1与turbo links 5 。 对我来说，在修复之前，turbo链接在我的本地工作，但在部署到staging或prod时没有。