Wiring Facebook HTML5 like and comment elements with AJAX

Question

Facebook instructs us to put the following code on our page:

<div id="fb-root"></div>
<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";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Instead of that I wrap it in a function:

function ReloadSocialSharing() {
    //facebook
    (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=myappid";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

and call it inside: $(function () { }

Now my like buttons and my Comment via Facebook panels all appear and work fine. I then make an AJAX call and pull in new html elements into my page. These already have the appropriate Facebook markups similar to what my original fields had. I make my ajax call like this:

$('#search').ajaxSubmit(GetSearchAjaxFormOptions(!isDefault, element));

function GetSearchAjaxFormOptions(displayResetPreferencesButton, giveMeFocus) {
    return {
        target: '#search-results',
        data: GetSearchData(),
        success: function () { RunAfterSearchResultsAreReturned(giveMeFocus) },
        error: function (error) {
            alert("Oops. There was an error.")
        }
    };
}

RunAfterSearchResultsAreReturned() {
   ........
   ReloadSocialSharing();
}

This all executes well, however, the new social sharing elements that were added in via the Ajax call are not wired and do not work. What am I missing?

Thanks!

Note: I have seen the notes on using FB.XFBML.parse(); However, I am trying to avoid XFBML.

Answer 1

The (main) reason your attempt doesn't work is because of this line:

if (d.getElementById(id)) return;

i.e. the code checks whether or not the facebook script (which you added dynamically using the rest of the included code) is already there and, if it is, does not include it again. I believe the de-duplication is there for a reason, and anyway, I tested re-running the code (by ensuring the script is added twice) with no success.

I saw your note about XFBML, however calling FB.XFBML.parse() (without any arguments) seems to work even if the markup you actually used is the HTML5 one:

setTimeout(function() {
    $('<div class="fb-like" data-send="false" data-layout="standard"
        data-width="450" data-show-faces="false" data-colorscheme="light"
       data-action="like"></div>').appendTo('#test');
    FB.XFBML.parse();
}, 2000);

Working example at jsFiddle.