Turbolinks 5.0 and Facebook SDK
<p>Last week I upgraded to Rails 5 which is using Turbolinks 5.0. I used the following script to load the Facebook like button with Turbolinks 3.0:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>fb_root = null
fb_events_bound = false

$ -&gt;
  loadFacebookSDK()
  bindFacebookEvents() unless fb_events_bound

bindFacebookEvents = -&gt;
  $(document)
    .on('page:fetch', saveFacebookRoot)
    .on('page:change', restoreFacebookRoot)
    .on('page:load', -&gt;
      FB?.XFBML.parse()
    )
  fb_events_bound = true

saveFacebookRoot = -&gt;
  fb_root = $('#fb-root').detach()

restoreFacebookRoot = -&gt;
  if $('#fb-root').length &gt; 0
    $('#fb-root').replaceWith fb_root
  else
    $('body').append fb_root

loadFacebookSDK = -&gt;
  window.fbAsyncInit = initializeFacebookSDK
  $.getScript("//connect.facebook.net/nl_NL/all.js#xfbml=1")

initializeFacebookSDK = -&gt;
  FB.init
    appId     : 'YOUR_APP_ID'
    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
    status    : true
    cookie    : true
    xfbml     : true</code></pre>
</div>
</div>
</p>

<p>With Turbolinks 5.0 the like button will only show when the page gets reloaded. When I don't reload the page and just click on a link I get this error:</p>

<pre><code>Blocked a frame with origin "https://www.facebook.com" from accessing a frame with origin "http://localhost:3000".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.
</code></pre>

<p>Does anyone know how to fix this?</p>