title: Using "share_open_graph" Facebook UI to create dynamic share dialog for quiz results
body: <p><i><strong>Summary:</strong> My problem is getting <strong>FB.ui</strong>, via the <strong>share_open_graph</strong> method, to create a customised share dialog that contains different title, description, and picture, based on the user's actions on the page.</i></p>
  
  <p><i>The question was my first and I had no reputation, so numerous links were removed, but (thanks to everyone who gave me upvotes) I have been able to rescue the screenshots that were originally missing.</i></p>
  
  <hr>
  
  <p><i><strong>EDIT:</strong> I ended up having to just use a regular popup window with a share dialog in it, it's not ideal but at least it works reliably. The more I looked around the web the more I found that many high profile respectable sites were still using popup sharing like this, so I figured in this case the advantages of using a legacy solution outweighed the extensive work in finding a proper solution, I used <a href="https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2" rel="noreferrer">https://developers.facebook.com/docs/sharing/reference/feed-dialog/v2.2</a> with dynamic details supplied via URL query which is at least slightly more up-to-date than the sharer.php usage I was originally looking at on Buzzfeed.</i></p>
  
  <hr>
  
  <h3>My page:</h3>
  
  <p>I have a quiz. Ten questions, five answers to each, a result is produced assigning one of five options as the "result". Everything as far as the quiz works great. The result is pulled in when quiz is completed via Ajax/jQuery - this is so that in the future I will be able to build a PHP-based front-end for other people to manage the creation of quizzes.
  <i>Whilst I happily provide the page URL in the code below, but sorry - until I fix this issue I can't publish it publicly, so you can't access it!</i></p>
  
  <h3>My aim:</h3>
  
  <p>When the result of the quiz is shown, it should also have Facebook and Twitter share buttons which have been customised to include a picture, title, and description that is appropriate to the user's quiz result.</p>
  
  <h3>Twitter button was easy to do dynamically</h3>
  
  <p>I just use jQuery to create a Twitter button using the same HTML as one would anywhere, with my dynamic description supplied as the <code>data-text</code> property, and then call <code>twttr.widgets.load();</code> to activate the button.</p>
  
  <h2>The Facebook Share button is the problem</h2>
  
  <ul>
  <li>I can't add a <em>"normal"</em> share button - it only takes one property, the URL (doesn't change per quiz result).</li>
  <li>I can't change the generic Open Graph tags that exist on the page either - although jQuery can do this, Facebook's caching means it is pointless. Plus the generic sharing buttons (FB/Twitter/G+) on every page should remain unaffected and always share the default OG tags.</li>
  </ul>
  
  <p>So what I am doing is creating a link and appending it to the page with jQuery, and then setting the click trigger action with jQuery too. App ID is already successfully set with the FB.init() block of code. These are the methods I have tried for the click trigger:</p>
  
  <h3>Attempt 1: <code>FB.ui({ method: "feed" })</code></h3>
  
  <pre><code>FB.ui({
    method: 'feed',
    name: "I got "+response.country+"! Which European are you destined to date?",
    link: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
    picture: response.image,
    description: response.body
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/999Fz.png" alt="screenshot showing the correct details appearing but in an old-style half-working and deprecated Feed dialog"> </p>
  
  <p>The basics work - picture, title and description are all in line with the quiz result (in this case "French") - <strong>BUT</strong> the Feed dialog is not only deprecated but also hugely inferior to the Share dialog (see below). I'd like to do this properly.</p>
  
  <h3>Attempt 2: <code>FB.ui({ method: "share" })</code></h3>
  
  <pre><code>FB.ui({
    method: 'share',
    href: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
    name: "I got "+response.country+"! Which European are you destined to date?",
    picture: response.image,
    description: response.body
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/RQ92S.png" alt="screenshot showing correct modern share dialog but with generic OG tags and not my custom details"></p>
  
  <p>The <a href="https://developers.facebook.com/docs/sharing/reference/share-dialog" rel="noreferrer">Share dialog</a> is current, and you can see the improvements in design and functionality compared to the deprecated Feed dialog. But in this basic usage it is just like a regular share button, and despite my attempts to provide extra information only the URL is used and the generic Open Graph tags from the page provide the content.</p>
  
  <h3>Attempt 3: <code>FB.ui({ method: "share_open_graph" })</code></h3>
  
  <p>This seems to be the one I must use. I just need to work out how!
  * I've added: "quiz" as an object type to my app (name: matchadviceuk).
  * I've added: "Share a quiz" as a story type to my app based on the "quiz" option and the existing "Share" action type.
  * I've added: the appropriate Open Graph <code>prefix=""</code> content to my <code>&lt;head&gt;</code> declaration</p>
  
  <p>The click function on the button now looks like:</p>
  
  <pre><code>FB.ui({
    method: 'share_open_graph',
    action_type: 'matchadviceuk:share',
    action_properties: JSON.stringify({
      type: 'matchadviceuk:quiz',
      url: "http://advice.uk.match.com/quizzes/which-european-are-you-destined-date",
      title: "I got "+response.country+"! Which European are you destined to date?",
      description: response.body,
      image: response.image
    })
  });
  </code></pre>
  
  <p>Upon click this produces:</p>
  
  <p><img src="https://i.stack.imgur.com/aGVSB.png" alt="screenshot showing error box saying &quot;The action you&#39;re trying to publish is invalid because it does not specify any reference objects. At least one of the following properties must be specified: quiz.&quot;"></p>
  
  <p>So I changed <code>url</code> in the above code to <code>quiz</code> and I get:</p>
  
  <p><img src="https://i.stack.imgur.com/q7s99.png" alt="screenshot showing error box saying &quot;Object at URL &lt;url&gt; has og:type of &#39;article&#39;. The property &#39;quiz&#39; requires an object of og:type &#39;matchadviceuk:quiz&#39;&quot;"></p>
  
  <p>This is starting to make sense - the page itself IS an article, and no that can't change. So maybe I don't want to use this new "quiz" object type at all. But if I go back to the block above and just change <code>type</code> to <code>matchadviceuk:article</code>, we get the same error about "quiz" not being defined - at this point this makes zero sense whatsoever as the "quiz" object type is now not mentioned anywhere in the code! (Possible victim of Facebook caching, which is an added complication.)</p>
  
  <p>And here is where I am stuck beyond any further idea. I've even tried removing <code>type</code> and <code>url</code> attributes entirely, hoping Facebook could do its own thing, but no.</p>
  
  <p>I'm not still convinced that my efforts to add object type and story type to my app were even necessary, but either way, I just cannot get this working. Please help!</p>
  
  <h3>Compare to:</h3>
  
  <p>It's Buzzfeed who do these type of quizzes a lot, and they actually do a bodge job of using a Facebook <em>sharer.php</em> link with the dynamic content supplied as part of the URL query string, and forcing it to open in a new window manually. It's ugly, not "official", not as user friendly, and I dare say possibly presents problems on mobile and tablet browsing. For all these reasons, I'd much prefer to do it properly with FB.ui - not only that but sharer.php is in a constant flux of "is it or isn't it deprecated?" and even the official FB developer line (can't add link due to no reputation) - is that it won't work like this for long.</p>
  
  <h3>Research:</h3>
  
  <p>I've done tons of Googling and Stack Overflow searching. Nothing quite matches my issue (which surprises me but I do have extra limitations like needing to do all this processing dynamically without separate PHP-infused results pages). <a href="https://stackoverflow.com/questions/23407527/dynamically-generate-description-for-explicitly-shared-open-graph-story-through">This question</a> is the only result on SO for "share_open_graph" and creates an object with FB.api and then publishes with FB.ui - sounds good apart from the fact this produces multiple posts to the user's feed, which would result in a ban from Facebook. This user was able to rely on PHP where I need pure client-side interactivity. </p>