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文檔在初始化一次去，尋找元素與FB社交插件來代替。

並嘗試再次嵌入JS SDK，因為您正在嘗試調用fb_share ，這是無用的 - 因為該代碼是專門編寫的，如果它已經嵌入，則不會再次嵌入它。

讓SDK再次解析文檔的正確方法是調用FB.XFBML.parse 。

Answer 3

對於TurboLinks 5，這對我有用！

有必要在fb-root元素中添加data-turbolinks-permanent ！

<div id="fb-root" data-turbolinks-permanent></div>
<script>
(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/de_DE/sdk.js#xfbml=1&version=v2.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

document.addEventListener("turbolinks:load", function() {
  if(window.FB) {
    FB.XFBML.parse();
  }
});
</script>