Turbolinks 5.0とFacebook SDK

先週、Turbolinks 5.0を使用しているRails 5にアップグレードしました。私はTurbolinks 3.0とボタンのようにFacebookを利用してロードするには、次のスクリプトを使用：ページがリロードされますときTurbolinks 5.0とFacebook SDK

Turbolinks 5.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

のようなボタンのみが表示されます。ページをリロードせずにリンクをクリックすると、次のエラーが表示されます。

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.

これを解決する方法は誰にも分かりますか？

出典

2016-07-22 Rémon

イベントの一部がTurbolinks 5にリネームされ、そのイベントがTurbolinks 3と互換性がないためです。私の提案は、あなたがネイティブTurbolinks 5イベントを使用する場合は、あなたのRailsの資産にこのスクリプトを追加することができますcompatibility.coffee

compatibility.coffee

{defer, dispatch} = Turbolinks 

handleEvent = (eventName, handler) -> 
    document.addEventListener(eventName, handler, false) 

translateEvent = ({from, to}) -> 
    handler = (event) -> 
    event = dispatch(to, target: event.target, cancelable: event.cancelable, data: event.data) 
    event.preventDefault() if event.defaultPrevented 
    handleEvent(from, handler) 

translateEvent from: "turbolinks:click", to: "page:before-change" 
translateEvent from: "turbolinks:request-start", to: "page:fetch" 
translateEvent from: "turbolinks:request-end", to: "page:receive" 
translateEvent from: "turbolinks:before-cache", to: "page:before-unload" 
translateEvent from: "turbolinks:render", to: "page:update" 
translateEvent from: "turbolinks:load", to: "page:change" 
translateEvent from: "turbolinks:load", to: "page:update" 

loaded = false 
handleEvent "DOMContentLoaded", -> 
    defer -> 
    loaded = true 
handleEvent "turbolinks:load", -> 
    if loaded 
    dispatch("page:load") 

jQuery?(document).on "ajaxSuccess", (event, xhr, settings) -> 
    if jQuery.trim(xhr.responseText).length > 0 
    dispatch("page:update")

出典

2016-07-22 07:06:23 mrvncaragay

イベントの翻訳が十分であったため、スクリプト全体が必要ではありませんでした。ありがとうございました！ –

呼ばjavascripts/フォルダの下にファイルを作成してみてくださいです：

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

    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

出典

2017-02-20 02:44:39 Daniel

がありますTurbolinks 5とFacebook SDKを統合する方法あなたのレイアウトテンプレートで

：

// /source/layouts/layout.erb 
<body class="<%= page_classes %>"> 
    <%= yield %> 
    <div id='permanent' data-turbolinks-permanent></div> 
</body>

その後、あなたのJavaScriptで、ここではjQueryを使用して：

function FBInit() { 
    FB.init({ 
    appId  : 'YOUR_KEY', 
    xfbml  : true, 
    version : 'v2.8' 
    }); 
    $('#permanent').append($('#fb-root').detach()); 
}; 

$(document).ready(function(){ 
    $.getScript("//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8", FBInit); 
}); 

$(document).on('turbolinks:load', function(event){ 
    if (typeof FB !== "undefined" && FB !== null) { 
    FB.XFBML.parse(); 
    } 
}); 

$(document).on("turbolinks:before-cache", function() { 
    $('[data-turbolinks-no-cache]').remove(); 
});

次に、このようなデータturbolinks・ノーキャッシュ属性使用して、任意のFacebookのプラグインを使用します。

を

<div data-turbolinks-no-cache 
    class="fb-like" 
    data-href="#" 
    data-layout="standard" 
    data-action="like" 
    data-size="small" 
    data-show-faces="true" 
    data-share="true"></div>

gistここにはblog postの仕組みの説明

出典

2017-03-24 11:35:35

答えて

関連する問題