facebook-javascript-sdkruby-on-rails-4facebook-likeboxturbolinks

Facebook Like Box social plugin doesn't work with Turbolinks

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?

Solution

  • 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