Facebook SDK and 4 Turbolinks Rails

Question

It is hard for me to upload the javascript Facebook SDK to my 4 rails app. Is there a good way to make it work with turbo sciences?

if I add this code to my JS application assets. It does not work properly due to turbo pumps:

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : 'YOUR_APP_ID', // App ID from the app dashboard channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // Additional initialization code such as adding Event Listeners goes here }; // Load the SDK asynchronously (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/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> 

thanks

Answer 1

You will find the right solution for integrating Facebook SDK with Turbolinks here:

http://reed.imtqy.com/turbolinks-compatibility/facebook.html

Answer 2

I had a problem with Like Box, which does not load when I navigate between pages using turbo links. My solution was to create social.js.coffee in my assets/javascripts folder. In this file, it simply has

 $(document).on 'page:change', -> FB.init({ status: true, cookie: true, xfbml: true }); 

I know it a lot to add my own file to it ;-), but the idea was that I know that Google analytics, twitter and others will have the same conflicts, and this will be a great place to post these solutions.

Answer 3

Quote this answer

If you prefer to use your own Turbolinks 5 events, you can add this script to your Rails resources:

 // 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/ja_JP/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)); 

From: https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00

Answer 4

If you put your Facebook JS code at the end of your view, use flush in your controller action to ensure it reboots completely using Turbolinks:

 def show # ... render :show, flush: true end 

Worked like a charm.

Answer 5

I followed the solution suggested by @gallonallen with some slight modification. just created a file called turbo.js with the following contents:

 $(document).on('turbolinks:load', function() { FB.init({ status: true, cookie: true, xfbml: true }); }); 

And added //= require turbo in application.js before //= require query , and it started working for me. I am using rails 4.2.6 and ruby 2.3.1 with turbo links 5 . For me, before fixing, the turbo links worked on my local one, but not when deployed for production or production.