Ad

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); 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-target="_blank" rel="nofollow noreferrer" 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.

Ad

Answer

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.

Ad
source: stackoverflow.com
Ad