Facebook SDK и рельсы 4 Turbolinks

Мне трудно быстро загрузить javascript Facebook SDK в мое приложение rails 4. Есть ли хороший способ заставить его работать правильно с турболинками?

если я добавлю этот код в свои активы приложения JS. Он не работает должным образом из-за турболинков:

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

Благодарность


ruby-on-rails facebook turbolinks
person Jonnyx Delavilla    schedule 20.07.2013    source источник
comment
Можете ли вы изложить свою проблему, проверенные решения, добавить код?   -  person Mike Szyndel    schedule 20.07.2013

Ответы (5)


arrow_upward
10
arrow_downward

Вы найдете подходящее решение для интеграции Facebook SDK с Turbolinks здесь:

http://reed.github.io/turbolinks-compatibility/facebook.html

person Pierre Olivier Martel    schedule 25.07.2013

arrow_upward
7
arrow_downward

У меня была проблема с тем, что окно «Мне нравится» не загружалось, когда я перемещался между страницами с помощью турбо-ссылок. Мое решение состояло в том, чтобы создать social.js.coffee в моей папке assets/javascripts. В этом файле просто

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

Я знаю, что это много, чтобы поместить в свой собственный файл ;-), но идея заключалась в том, что я знаю, что Google Analytics, Twitter и другие будут иметь те же конфликты, и это будет хорошее место для размещения этих решений.

person Gallonallen    schedule 11.10.2013
comment
Отличное решение! Не забудьте добавить //= require social.js в ваш application.js. Спасибо! - person user929062; 22.10.2013
comment
Что делать, если вы используете гем jquery-turbolinks, который позволяет вам делать $('document).ready -> Делать это и делать старый page:change способ не работает для меня. - person ahnbizcad; 18.10.2014

arrow_upward
2
arrow_downward

Цитирование этот ответ

Если вы предпочитаете использовать нативные события Turbolinks 5, вы можете добавить этот скрипт в свои ресурсы Rails:

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

Источник: https://gist.github.com/6temes/52648dc6b3adbbf05da3942794b97a00

person vedant    schedule 27.02.2017
comment
Хотя этот метод более сложный, но он решил мою проблему - person Veck Hsiao; 02.08.2017

arrow_upward
0
arrow_downward

Если вы помещаете свой код Facebook JS в конец вашего представления, используйте flush в своем действии контроллера, чтобы убедиться, что он полностью перезагружен правильно с помощью Turbolinks:

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

Работал как шарм.

person Jamon Holmgren    schedule 06.08.2015

arrow_upward
0
arrow_downward

Я последовал решению, предложенному @gallonallen, с небольшой модификацией. только что создал файл с именем turbo.js со следующим содержимым:

$(document).on('turbolinks:load', function() {

    FB.init({ status: true, cookie: true, xfbml: true });

});

И добавил //= require turbo в application.js перед //= require query и у меня заработало. Я использую rails 4.2.6 и ruby 2.3.1 с turbo links 5. Для меня до исправления турбо-ссылки работали на моем локальном компьютере, но не при развертывании в промежуточной или рабочей среде.

person Vikram3891    schedule 03.08.2016