Displaying Facebook Share button with dynamic data

Question

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); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    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-href="https://www.msuk-forum.co.uk/sharer.php?u=real-or-rc&t=Real or RC Quiz&d=I scored &i=quizshare" data-layout="button_count"></div>

  function returnScore(){
    $(".result").text("Nice work! You scored " + getScore() +" / "+ tot + "!");
    $(".result").toggle();
    $(".fb-share-button").toggle();
  }

  $('#questions').submit(function () {
    returnScore();
    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.

Answer 1

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.