Facebook分享按钮未加载Rails turbolinks

Question

我正在关注Facebook的一般指导,包括分享按钮(社交插件) https://developers.facebook.com/docs/plugins/share-button

_social.html.erb

<div id="fb-root"><div class="fb-share-button" data-href="http://www.example.com" data-layout="button_count"></div></div>

fb_share.js

var fb_share;
fb_share = 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.3&appId=xxxxxxxxxxxxxxx";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk');

$(document).ready(fb_share);
$(document).on('page:load', fb_share)

的application.js

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .

该按钮在第一页加载时呈现,也可正常工作.但导航到下一页并返回时不会呈现.

如果我在application.js文件中包含fb_share.js文件(在turbolinks之前)它根本不显示.

Answer 1

对于Turbolinks 5,这是唯一对我有用的东西: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));

Answer 2

Facebook JS SDK 仅浏览一次HTML 文档HTML 文档，以查找要替换为 FB 社交插件的元素。

\n\n

当您尝试调用 时，尝试再次嵌入 JS SDKfb_share是无用的 \xe2\x80\x93 因为该代码是专门编写的，如果它已经被嵌入，则

\n\n

让 SDK 再次解析文档以获取稍后添加的内容的正确方法是调用FB.XFBML.parse。

\n