title: Multiple facebook comment boxes on a single page?
body: <p>I have three products listed on a single page and I'm looking to add a small comment box to the side of each of the products, kind of like : <a href="https://www.facebook.com/SanukFootwear?ref=ts&amp;sk=app_113298085356151" rel="noreferrer">https://www.facebook.com/SanukFootwear?ref=ts&amp;sk=app_113298085356151</a>. The main problem is, I can't seem to figure out how to add more than one comment box to the page. </p>
  
  <p>I tried using HTML5 and XFBML. The code I'm using now is : </p>
  
  <p><code>&lt;html xmlns:fb="http://ogp.me/ns/fb#"&gt;</code></p>
  
  <pre><code>    &lt;script&gt;
          (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 = "//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=MYAPPID";
              fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));
      &lt;/script&gt;
  </code></pre>
  
  <p>and</p>
  
  <p><code>&lt;fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"&gt;&lt;/fb:comments&gt;</code></p>
  
  <p>It seems that adding <code>xid</code> to the <code>&lt;fb:comments&gt;</code> block is supposed to generate a unique list of comments for only that xid. This however is not working. If I do the following:</p>
  
  <p><code>&lt;fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"&gt;&lt;/fb:comments&gt;</code></p>
  
  <p><code>&lt;fb:comments href="MYURL" num_posts="5" width="500" xid="product_02"&gt;&lt;/fb:comments&gt;</code></p>
  
  <p>and try posting on either one, the comment shows up on both. Is there something I'm missing to allow these unique comments? </p>
  
  <p>The code from the sanuk shop facebook pages is this:</p>
  
  <pre><code>&lt;fb:comments xid="featured_product_56062795998_1" width="255" numposts="5" expr:href="##_1" class="  fb_iframe_widget"&gt;
      &lt;span&gt;
          &lt;iframe id="f1f0d95ac" name="f341a4ded" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; width: 255px; height: 572px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " class="fb_ltr" src="https://www.facebook.com/plugins/comments.php?api_key=113298085356151&amp;amp;channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df5542ec34%26origin%3Dhttps%253A%252F%252Fnorthsocial.com%252Ff2d77af7ec%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;amp;locale=en_US&amp;amp;numposts=5&amp;amp;sdk=joey&amp;amp;title=&amp;amp;url=https%3A%2F%2Fnorthsocial.com%2Fapp%2Ftab%2Ffeatured_products%2Fview.php&amp;amp;width=255&amp;amp;xid=featured_product_56062795998_1"&gt;&lt;/iframe&gt;
       &lt;/span&gt;
  &lt;/fb:comments&gt;
  </code></pre>
  
  <p>I have no idea where they are getting this iFrame content from. I referred to the facebook development docs, but have been unable to find any information. Any help would be appreciated!</p>
  
  <p>Thanks in advance,</p>
  
  <p>Tre</p>