title: Using Facebook Sharer to Share Multiple Images
body: <p>I am trying to enable multiple images on a page to be shared to Facebook, as described in <a href="https://stackoverflow.com/questions/1138460/how-does-facebook-sharer-select-images-and-other-metadata-when-sharing-my-url">this StackOverflow post</a>. The post indicates that in order to share multiple images, you need to include multiple <em>og:image</em> tags. I followed these instructions, as you can see from <a href="https://senatorforaday.emkinstitute.org/senator/ePT4B0td/joe-levinger" rel="nofollow noreferrer">this page</a>. </p>
  
  <p>If you view the source for the page, you will see that I have included three <em>og:image</em> tags, one for each of the page's three images:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"/&gt;
       &lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"/&gt;
       &lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Each image on the page has its own Facebook link. Since I had specified three <em>og:image</em> tags, I would have expected that no matter which link you click, you would get to choose one of the three images on the page. Instead, you have no choice; only the second of the three images is provided.</p>
  
  <p>I figured that this might be a caching problem, so I used the <em>Facebook Sharing Debugger tool</em> to see what Facebook was seeing. The <em>Link Preview</em> shows just one image, and the <em>og:image</em> category lists just one image, which made me suspicious. When I clicked on the <em>Show All Raw Tags</em> link, though, I discovered that Facebook was indeed picking up all three of my <em>og:image</em> tags:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg" /&gt;
  &lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg" /&gt;
  &lt;meta property="og:image" content="http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg" /&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I then clicked on the <em>Scrape via API</em> link at the bottom of the page, and this is what I got:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "url": "https://senatorforaday.emkinstitute.org/senator/ePT4B0td/joe-levinger",
    "type": "website",
    "title": "Senator Joe Levinger | Edward M Kennedy Institute for the United States Senate",
    "image": [
      {
        "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/stickers/ePT4B0td-sticker.jpg"
      },
      {
        "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/posters/ePT4B0td-poster.jpg"
      },
      {
        "url": "http://5194985117e2603e50e4-519b9b8712d3704cfc44947e6bab98a6.r58.cf5.rackcdn.com/secondPosters/ePT4B0td-secondPoster.jpg"
      }
    ],
    "description": "Visit the EMK Institute",
    "site_name": "Edward M Kennedy Institute for the United States Senate",
    "updated_time": "2016-07-11T19:51:09+0000",
    "id": "1101245249919459"
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the <em>image</em> key consists of an array of the three images specified in my <em>og:image</em> tags, so it seems as if this should be working, but it's not.</p>
  
  <p>Any ideas as to what I need to do to provide the user with the ability to select one image from among the three that are displayed on the page?</p>