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:
fb_root = null
fb_events_bound = false
$ ->
loadFacebookSDK()
bindFacebookEvents() unless fb_events_bound
bindFacebookEvents = ->
$(document)
.on('page:fetch', saveFacebookRoot)
.on('page:change', restoreFacebookRoot)
.on('page:load', ->
FB?.XFBML.parse()
)
fb_events_bound = true
saveFacebookRoot = ->
fb_root = $('#fb-root').detach()
restoreFacebookRoot = ->
if $('#fb-root').length > 0
$('#fb-root').replaceWith fb_root
else
$('body').append fb_root
loadFacebookSDK = ->
window.fbAsyncInit = initializeFacebookSDK
$.getScript("//connect.facebook.net/nl_NL/all.js#xfbml=1")
initializeFacebookSDK = ->
FB.init
appId : 'YOUR_APP_ID'
channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
status : true
cookie : true
xfbml : true
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:
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.
Does anyone know how to fix this?
Here is a way to integrate Turbolinks 5 with Facebook SDK.
In your layout template:
Then in your javascript using jQuery here:
Then use any Facebook plugins using the data-turbolinks-no-cache attribute like this:
Here is the gist and here is a blog post explaining how it works
If you prefer to use native Turbolinks 5 events, you can add this script to your Rails assets:
From: https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00
The reasons for this is because some of the events was renamed in
Turbolinks 5
and its not compatible withTurbolinks 3
. my suggestion is try creating a file underjavascripts/
folder calledcompatibility.coffee
compatibility.coffee