Displaying Facebook Share Button With Dynamic Data

I've made a quiz where I want the score to be shared to Facebook, it works by passing GET variables to a PHP file, that populates the OG data to share to Facebook - this all works okay however my problem is that the share button needs to only show when the quiz is complete but I can't get this to work.

I have tried getting the button to display using jquery toggle, or populating the html with jquery text()... I guess it needs to render as the page loads.

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

<div class="result" style="display:none"></div>
<div class="fb-share-button" style="display:none" data-target="_blank" rel="nofollow noreferrer" href=" or RC Quiz&d=I scored &i=quizshare" data-layout="button_count"></div>

  function returnScore(){
    $(".result").text("Nice work! You scored " + getScore() +" / "+ tot + "!");

  $('#questions').submit(function () {
    return false;

The button will eventually have the score from getScore() in the share button too. But at the moment, I just need to get the button to show at all, once the form/quiz is submitted.

Thanks in advance.



Use FB.XFMBL.parse to render the Share Button if it is visible later. Btw, dynamic OG Tags are not possible anymore, you need to provide a real URL for each share.