Facebook Like Box社交插件無法與Turbolinks合作

我使用的是Like Box社交插件（https://developers.facebook.com/docs/reference/plugins/like-box/），它的效果很好。Facebook Like Box社交插件無法與Turbolinks合作

問題是我在使用Turbolinks的Rails 4應用程序中使用它。每當我重新加載一個頁面，就會出現類似的框。如果我點擊任何鏈接，下一頁將加載並且不會顯示Like Box。

我想這已經但是沒有工作=/

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

如何解決這個問題的任何想法？

來源

2013-08-05 renatojf

我剛剛在今天就成功了。如果你可以粘貼你正在使用的一些JS，我可以提供幫助。 – Nerve

您在原始問題中發佈的鏈接相當不錯。它要求我們創建三個功能：

1）saveFacebookRoot：這是必需的，以便在稍後的時間點可以恢復div#fb-root。這是要求page:fetch。在DoM仍然是舊頁面時調用page:fetch。即：新頁面沒有取代舊頁面

2）restoreFacebookRoot：這是div#fb-root可以附加回頁面所需要的。它在page:change上被調用。當新的DoM可用時調用page:change。

3）那裏有小錯字。我們需要page:load

FB.XFBML.parse() // Correct

而不是調用這個：

FB?.XFBML.parse() // InCorrect

請記住，當頁面重新加載第一，只有page:change調出這三種。

這裏的技巧是使用全局變量fb_root和fb_events_bound。這些必須在所有其他頁面都可以訪問，但這就是我們首先討厭turbolinks的原因。

參考文獻：http://reed.github.io/turbolinks-compatibility/facebook.html

來源

2013-08-07 20:12:25 Nerve

ty幫助你的人！ – renatojf

我將腳本複製到我的application.html.erb的頭部，除了輸入錯誤（和應用程序ID）還有什麼我需要做的？我仍然可以得到像框一樣的顯示。 – marimaf

同上。把它放在頭上，修正了錯字。唯一不同的是，現在FB也不會在重新加載時加載。 – JosephK

安裝observejs：

gem 'observejs'

然後添加標籤到窗口小部件：

<div as="FB" class="fb-comments" data-href="<%= request.original_url %>"></div>

然後建立在我的例子中的JavaScript文件夾中的新的腳本（fb.coffee ）：

ObserveJS.bind 'FB', class 
    root: document.createElement('div') 
    @::root.id = 'fb-root' 

    loaded: => 
    if !document.body.contains(@root) 
     document.body.appendChild(@root) 

    if FB? 
     FB.XFBML.parse() 
    else 
     @initialize() 

    initialize: => 
    js = document.createElement('script') 

    script = document.getElementsByTagName('script')[0] 
    js = document.createElement('script') 
    js.id = 'facebook-jssdk' 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID&version=VERSION_OF_API" 
    script.parentNode.insertBefore(js, script)

將js文件包含在您的應用程序中.js

//= require observejs 
//= require fb

來源

2016-07-18 07:31:40

Facebook Like Box社交插件無法與Turbolinks合作

回答

相關問題