Problems integrating Turbolinks with Facebook JS SDK

[pomartel]

This is not really a Turbolinks issue but a problem I guess many will run into using the Facebook JS SDK. The SDK is initiliazed inside the HTML body like this: https://developers.facebook.com/docs/reference/javascript/

When the SDK initializes, it creates a fb-root iframe tag to communicate with the FB API. When Turbolinks reloads the page, the fb-root tag vanishes and there doesn't seem to be a way trigger the re-initilialization of the Facebook sdk.

I'm trying to figure out the best way to handle this. Can an element of the body remain in between two requests? How can inline javascript be executed? (Let me know I should repost to Stack Overflow instead)

[dhh]

There's a page:change event being thrown when turbo links changes the page. You can use that to refire any hooks you might need.

On Sep 27, 2012, at 8:55 AM, Pierre Olivier Martel notifications@github.com wrote:

This is not really a Turbolinks issue but a problem I guess many will run into using the Facebook JS SDK. The SDK is initiliazed inside the HTML body like this: https://developers.facebook.com/docs/reference/javascript/

When the SDK initializes, it creates a fb-root iframe tag to communicate with the FB API. When Turbolinks reloads the page, the fb-root tag vanishes and there doesn't seem to be a way trigger the re-initilialization of the Facebook sdk.

I'm trying to figure out the best way to handle this. Can an element of the body remain in between two requests? How can inline javascript be executed? (Let me know I should repost to Stack Overflow instead)

—
Reply to this email directly or view it on GitHub.

[pomartel]

Wouldn't it also be helpful to have a before-change event like there is in pjax? This way I could put the FB tags in a variable and reinject them when the page:change event is triggered. Not yet sure this is the best way to proceed it would add some flexibility.

[dhh]

Yeah, I could see something like that. We've thought about page:changing and page:changed.

On Sep 27, 2012, at 9:25 AM, Pierre Olivier Martel wrote:

Wouldn't it also be helpful to have a before-change event like there is in pjax? This way I could put the FB tags in a variable and reinject them when the page:change event is triggered. Not yet sure this is the best way to proceed it would add some flexibility.

—
Reply to this email directly or view it on GitHub.

David Heinemeier Hansson

[houen]

This page has a good solution that I am using: http://www.blackfishweb.com/blog/asynchronously-loading-twitter-google-facebook-and-linkedin-buttons-and-widgets-ajax-bonus

[houen]

Might as well post it as well:

if (typeof (FB) != 'undefined') {
    FB.init({ status: true, cookie: true, xfbml: true });
}
else {
    $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
        FB.init({ status: true, cookie: true, xfbml: true });
    });
}

[eugenemiretsky]

So basically you have to reload the FB SDK on every page load? One of the reasons why i wanted to use turbolinks was to save the time it takes to initialize it.

[reed]

@eugenemiretsky does this work for you?

reednj77.github.com/turbolinks-compatibility/facebook.html

[rceee]

@reednj77 Hey, that link didn't work, but I'd really like to see what you've got.

[reed]

Sorry, I messed up the markup. Try this:

reed.github.com/turbolinks-compatibility/facebook.html

[rceee]

Thanks, I appreciate it!

[evie404]

should replace the link to:

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

[ZiaMM]

I've tried all these and more (fb and twitter). They do nothing until I reload the page - then they show up. How to make them fire without a page-reload?

[besi]

I was able to resolve the issue like so:

Add the jquery-turbolinks gem to your Gemfile:

# See http://stackoverflow.com/a/18834209/784318
gem 'jquery-turbolinks'

Now all jQuery document reaady callbacks will be called in case of a turbo-link click event.

# /application/_facebook_init.html.slim
coffee:
   # This line below is crucial because otherwise this code won't be reached in case of a turbo-link click
  $ ->
    ((d, s, id) ->
      js = undefined
      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&appId=[SOME_APP_ID]&version=v2.0'
      fjs.parentNode.insertBefore js, fjs
      return) document, 'script', 'facebook-jssdk'

[Tashows]

For anyone using the new turbolinks gem see this issue