Turbolinks 5.0 und Facebook SDK

Question

Letzte Woche habe ich auf Rails 5 aktualisiert, die Turbolinks 5.0 verwendet. Ich habe das folgende Skript die Facebook-Like-Button mit Turbolinks 3.0 zu laden:

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

Mit Turbolinks 5.0 auf der Schaltfläche zeigt nur, wenn die Seite neu geladen wird. Als ich mir diesen Fehler nicht die Seite neu zu laden und klicken Sie einfach auf einem Link erhalten:

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. 

Wer weiß, wie dieses Problem beheben?

Answer 1

Der Grund dafür ist, dass einige der Ereignisse in Turbolinks 5 umbenannt wurden und nicht kompatibel mit Turbolinks 3 sind. mein Vorschlag ist, versuchen, eine Datei unter javascripts/ Ordner 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") 

Answer 2

Wenn Sie bevorzugen einheimische Turbolinks 5 Veranstaltungen verwenden genannt erstellen, können Sie dieses Skript auf Ihre Rails Vermögenswerte hinzuzufügen:

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

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

Answer 3

Hier ist ein Möglichkeit, Turbolinks 5 mit Facebook SDK zu integrieren.

In Ihrem Layout-Vorlage:

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

Dann in Ihrem Javascript verwenden hier 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(); 
}); 

dann alle Facebook-Plugins verwenden, um die Daten-turbolinks-no-cache-Attribut wie folgt aus:

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

Hier ist die gist und hier ist eine blog post erklärt, wie es funktioniert