4

我很难将 javascript Facebook SDK 快速加载到我的 rails 4 应用程序中。有没有一种好方法可以让它与 turbolinks 一起正常工作？

如果我将此代码添加到我的 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>

谢谢

4

5 回答 5

10

您将在此处找到将 Facebook SDK 与 Turbolinks 集成的合适解决方案：

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

于 2013-07-25T19:28:27.323 回答
7

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

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

我知道放入它自己的文件有很多;-)，但我的想法是我知道谷歌分析、推特和其他人会有同样的冲突，这也将是容纳这些解决方案的好地方。

于 2013-10-11T14:45:30.000 回答
2

引用这个答案

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

于 2017-02-27T16:07:55.147 回答
0

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

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

像魅力一样工作。

于 2015-08-06T07:33:09.990 回答
0

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

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

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

});

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

于 2016-08-03T13:49:08.633 回答