Facebook przycisk akcji nie ładuje z Rails turbolinks

Question

Śledziłem Facebooka ogólne guidlines włączenie przycisku Share (Plugin społeczne) 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 . 

Przycisk renderuje się podczas ładowania pierwszej strony, działa również poprawnie. Ale nie jest renderowany podczas przechodzenia do następnej strony iz powrotem.

Dołączenie pliku fb_share.js do pliku application.js (przed turbolinkami) nie pojawia się w ogóle.

Answer 1

JS SDK na Facebooku przechodzi przez dokument HTML po po inicjalizacji, aby wyszukać elementy do zastąpienia wtyczkami społecznościowymi FB.

i próbuje ponownie osadzić JS SDK, jak próbujesz wywołując fb_share, jest bezużyteczny - dlatego, że kod jest napisany specjalnie do nie osadzić go ponownie, jeżeli został on już wbudowany.

Aby uzyskać pakiet SDK do ponownego przeanalizowania dokumentu w przypadku treści dodanych później, należy zadzwonić pod numer FB.XFBML.parse.

Answer 2

Dla Turbolinks 5, jest to jedyna rzecz, która pracowała dla mnie: 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 3

Dla TurboLinks 5 Ten pracował dla mnie!

Konieczne jest dodanie data-turbolinks-permanent do elementu głównego fb!

<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>