Getting Facebook Like Box code to trigger again with changed href

Question

Somehow I suspect this is very simple, but I'm just looking at it all the wrong way.

I am dynamically loading the page name part of the href into the FB like box HTML5 code. This is triggered by clicking a button ('fbtn) - and each button has a different page name attached to it (the buttons and page names are also created dynamically). This works fine in as much as: a) the page names are being passed to the function; and b) first time, the FB code fires correctly and generates a display. When I close the div that displays the Like Box and click a second button (or the same one again), the variable (page name) is being passed, but it seems the FB code is not being fired - so, the div displays, but nothing is in it.

The FB code is included inside this function to prevent it running automatically on page load (when the buttons and page names have not been created).

Is there some way to re-set the entire function so that on clicking 'close' (as below), the variable function is back in the state it was before the first click (i.e. waiting to be passed a variable page name and to run the FB code)?

Thanks for any suggestions.

$('#classOne').on('click','.fbtn', function() {
   fbid = this.value;
      if (!fbid) {
        fbid = 'Boo'};
        alert('' + fbid + '');
  (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=XXXXXXXXXXXXXXX";
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
   $('#fbLike').html('<div id =closeFB>Close</div><div id=fb-root></div><fb:like-box     href=https://www.facebook.com/' + fbid + ' width=900 height=500 show_faces=true stream=true show_border=true header=true></fb:like-box>');
   $('#closeFB').stop().animate({height:'20'},50);
   $('#fbLike').stop().animate({height:'500'},500);
   $('#closeFB').click(function() {
   $('#fbLike').html('').stop().animate({height:'0'},500);
   $('#closeFB').stop().animate({height:'0'},50);
});
});

Answer 1

Well, at least one solution is to use the FB iframe code. Dynamically altering the href in the iframe src works fine and the Like Box re-loads each time with a different src depending on which button is clicked. While this solves the problem, I'd still be interested in a javascript solution if anyone has one, if only for educational purposes. Thanks!

Answer 2

The problem is that your code won't do anything if it finds a script with the id facebook-jssdk already in the document so technically it only works once, either provide a different id for each script or remove the existing script before adding anew one, to do this replace

if (d.getElementById(id)) return;

with

var currentScript = d.getElementById(id);
if (currentScript){
    currentScript.parentNode.removeChild(currentScript);
}