फेसबुक शेयर रेल के साथ लोड नहीं बटन turbolinks

Question

मैं फेसबुक सामान्य दिशा-निर्देश पीछा कर रहा था साझा करें बटन (सामाजिक प्लग-इन) 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 फ़ाइल (turbolinks से पहले) में fb_share.js फ़ाइल शामिल करता हूं तो यह बिल्कुल दिखाई नहीं देता है।

Answer 1

एफएस सोशल प्लगइन्स के साथ प्रतिस्थापित करने के लिए तत्वों को देखने के लिए, फेसबुक जेएस एसडीके केवल एचटीएमएल दस्तावेज़ के माध्यम से पर प्रारंभ होता है।

और जे एस एसडीके फिर से एम्बेड करने के लिए, जैसा कि आप fb_share फोन करके कोशिश कर रहे हैं की कोशिश कर रहा, बेकार है - क्योंकि उस कोड को विशेष नहीं लिखा है इसे फिर से एम्बेड करते हैं, यदि वह पहले से एम्बेड किया गया है।

सही रास्ता एसडीके पर बाद में जाकर जोड़ा सामग्री के लिए फिर से दस्तावेज़ को पार्स करने के लिए, FB.XFBML.parse कॉल करने के लिए है।

Answer 2

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 3

TurboLinks 5 यह मेरे लिए काम किया के लिए!

data-turbolinks-permanent को fb-root तत्व में जोड़ना आवश्यक है!

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