Facebook Like Box social plugin doesn't work with Turbolinks

Question

I'm using the Like Box social plugin (https://developers.facebook.com/docs/reference/plugins/like-box/) and it works great.

Problem is that I'm using it within a Rails 4 application with Turbolinks. Whenever I reload a page, the like box shows up. If I click on any link, the next page loads and the Like Box doesn't show up.

I tried this already but didn't worked =/

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

Any ideas on how to solve this problem?

Homograft

I had made it worked just today. I can help if you can paste in some JS you are using. – Kamacite

Answer 1

The link you have posted in original question is quite nice. It asks us to create three functions:

1) saveFacebookRoot: This is needed so that the div#fb-root can be restored at a later point. This is called upon page:fetch. page:fetch is called while the DoM is still of the old page. i.e: new page has not replaced the old page

2) restoreFacebookRoot: This is needed to that the div#fb-root can be appended back to the page. It is called on page:change. page:change is called when the new DoM is available.

3) There is minor typo in there. We need to call this in page:load

FB.XFBML.parse() // Correct

Instead of :

FB?.XFBML.parse() // InCorrect

Remember that when the page is first reloaded, only the page:change is called out of these three.

The trick here is the use of global variables fb_root and fb_events_bound. These must be accessible in all other pages, but this is the reason why we hate turbolinks in the first place.

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

Kamacite

I copied the script to the head of my application.html.erb, besides the typo (and the app id) is there anything else that I need to do? I still can get the like box to show. – Lapillus

Ditto here. Put it in the head, fixed the typo. Only difference is, now the FB doesn't load on reload, either. – Makkah

This doesn't seem to work for me. Does this require the SDK? Buttons should not require it. I wonder what's wrong. – Maxia

Answer 2

Install observejs:

gem 'observejs'

Then add tag to the widget:

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

Then create a new script in javascripts folder (fb.coffee in my example):

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)

Include the js files in your application.js

//= require observejs
//= require fb

Wolframite