Search code examples
ajaxfacebook-social-pluginsfacebook-comments

Comments plugin fails to update via ajax


since April 5th, 2012 we are experiencing problems with the facebook comments plugin on our video page.

We are loading new content and facebook comment tags via ajax, and then calling FB.XFBML.parse() to update the comments plugin and like button. This has worked fine in the past, but now the comments are not updating properly anymore. The comments do load, but the loading animation of the plugin never disappears and the height of the comments doesn't get adjusted.

Here's the console output when the error occurs:
Permission denied to access property 'fb_xdm_frame_http'
Permission denied to access property 'fb_xdm_frame_https'

Steps to reproduce the problem:
1. Please visit http://www.landwirt.com/Videos
2. Select a new video from the list on the right
3. Take a look at the facebook comments plugin at the bottom

Note: comments are working fine on initial page load, the problem occurs only when new content is loaded via ajax

It looks like a bug in the facebook API, but maybe we're just doing something wrong? Any help would be greatly appreciated!


Solution

  • i've noticed the same change after moving from:

    <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    

    syntax in body to:

    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
    

    in head. It appears it needed change to

    <script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1&appId=MY_APP_ID"></script>
    

    and works now fully.