facebook like firing multiple times after new page load

evie404 commented 11 years ago

For facebook compatibility, I'm wondering if the $ -> is necessary.

When using /kossnocorp/jquery.turbolinks, it will cause the facebook like callback to be called multiple times, sometimes resulting in infinite loop of this error

Unsafe JavaScript attempt to access frame with URL http://cosite.dev/en/photos/1 from frame with URL https://www.facebook.com/plugins/like.php?api_key=572519912762386&locale=en…t=standard&colorscheme=light&show_faces=true&extended_social_context=false. The frame requesting access has a protocol of 'https', the frame being accessed has a protocol of 'http'. Protocols must match.

According to this, it is a known error and the way to solve it is moving document binding outside of a $(function()) block.

I've tested the binding without $ -> and it seem to work fine with or without jquery.turbolinks.

What do you think?

reed commented 11 years ago

You're right that there's a problem with the current solution if you use jquery.turbolinks. But I run into errors (like the one you mentioned) when I move the document binding outside of page ready. How exactly did you change the solution to where you weren't seeing any errors?

What if we implemented something like this?

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

That seemed to work for me, with or without jquery.turbolinks. Does it work for you?

evie404 commented 11 years ago

Just realized that I forgot to paste my workaround. I think what we did was similar in that they both bind the document event once.

Your's will check if it is already binded already each time, whereas mine only binds on first load.

fb_root = null

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/en_US/all.js#xfbml=1")

initializeFacebookSDK = ->
  FB.init
    appId     : 'APP_ID'
    channelUrl: '//WWW.YOUR_DOMAIN.COM/channel.html'
    status    : true
    cookie    : true
    xfbml     : true

loadFacebookSDK()
$(document)
  .on('page:fetch', saveFacebookRoot)
  .on('page:change', restoreFacebookRoot)
  .on('page:load', ->
    FB?.XFBML.parse()
  )

Did some testing with both of our code. The Unsafe JavaScript attempt to access frame with URL error seem to turn up once in a while, regardless of document binding or using jquery.turbolinks or not. It might be a bug from facebook itself or a bug between facebook and turbolinks.

The problem with the old compatibility fix is that it will keep triggering the error in an infinite loop, I suspect it has to do with race condition of turbolinks load events.

Good news is, both of our solutions seem to prevent the error from entering an infinite loop!

reed commented 11 years ago

Alright, I updated the solution. I went with my code just because I like to avoid executing JS before page ready whenever I can. Thanks for bringing this issue to my attention, and for helping me resolve it.

evie404 commented 11 years ago

No problem! Glad was of help :)

Sent from my iPhone

On Feb 24, 2013, at 7:24 PM, Nick Reed notifications@github.com wrote:

Alright, I updated the solution. I went with my code just because I like to avoid executing JS before page ready whenever I can. Thanks for bringing this issue to my attention, and for helping me resolve it.

— Reply to this email directly or view it on GitHubhttps://github.com/reed/turbolinks-compatibility/issues/3#issuecomment-14024026.

reed / turbolinks-compatibility

facebook like firing multiple times after new page load #3