Facebook Plugin Page In Rails Turbolinks Doesn't Load

in my Rails app I am loading Facebook plugin page, but because of turbolinks it doesnt load each page (only sometimes). I tried this script on this page , but now it never loads. W

Solution 1:

This worked for me ... Some sort of combination between Facebook's docs and the script on the page you linked

$ ->
  loadFacebookSDK()
  bindFacebookEvents() unless window.fbEventsBound

bindFacebookEvents = ->
  $(document)
    .on('page:fetch', saveFacebookRoot)
    .on('page:change', restoreFacebookRoot)
    .on('page:load', ->
      FB.XFBML.parse()
    )
  @fbEventsBound = true

saveFacebookRoot = ->
  if$('#fb-root').length
    @fbRoot = $('#fb-root').detach()

restoreFacebookRoot = ->
  if @fbRoot?
    if$('#fb-root').length
      $('#fb-root').replaceWith @fbRootelse$('body').append @fbRoot

loadFacebookSDK = ->
  ((d, s, id) ->
    js = d.getElementsByTagName(s)[0]
    fjs = d.getElementsByTagName(s)[0]
    returnif d.getElementById(id)
    js = d.createElement(s)
    js.id = id
    js.src = "https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v2.5"
    fjs.parentNode.insertBefore(js, fjs)
  )(document, 'script', 'facebook-jssdk')

initializeFacebookSDK = ->
  FB.init
    # appId : 'YOUR_APP_ID'
    status : true
    cookie : true
    xfbml : true

The difference is in the loadFacebookSDK function. Notice that as I commented in the question, $.getScript() removes the query/parameters part of the request.

Solution 2:

For anyone else who finds this question, I found this gist, which solves the problem: 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;

  functionsaveFacebookRoot() {
    if ($('#fb-root').length) {
      fbRoot = $('#fb-root').detach();
    }
  };

  functionrestoreFacebookRoot() {
    if (fbRoot != null) {
      if ($('#fb-root').length) {
        $('#fb-root').replaceWith(fbRoot);
      } else {
        $('body').append(fbRoot);
      }
    }

    if (typeofFB !== "undefined" && FB !== null) { // Instance of FacebookSDKFB.XFBML.parse();
    }
  };

  document.addEventListener('turbolinks:request-start', saveFacebookRoot)
  document.addEventListener('turbolinks:load', restoreFacebookRoot)
}(jQuery));

Solution 3:

in turbolink 5, you just need to add data-turbolinks-permanent to the container https://github.com/turbolinks/turbolinks#issuecomment-282997683

<div data-turbolinks-permanent id="fb-root"></div>