Multiple facebook comment boxes on a single page?

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 : https://www.facebook.com/SanukFootwear?ref=ts&sk=app_113298085356151. The main problem is, I can't seem to figure out how to add more than one comment box to the page.

I tried using HTML5 and XFBML. The code I'm using now is :

<html xmlns:fb="http://ogp.me/ns/fb#">

    <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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=MYAPPID";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

and

<fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"></fb:comments>

It seems that adding xid to the <fb:comments> block is supposed to generate a unique list of comments for only that xid. This however is not working. If I do the following:

<fb:comments href="MYURL" num_posts="5" width="500" xid="product_01"></fb:comments>

<fb:comments href="MYURL" num_posts="5" width="500" xid="product_02"></fb:comments>

and try posting on either one, the comment shows up on both. Is there something I'm missing to allow these unique comments?

The code from the sanuk shop facebook pages is this:

<fb:comments xid="featured_product_56062795998_1" width="255" numposts="5" expr:href="##_1" class="  fb_iframe_widget">
    <span>
        <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;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;locale=en_US&amp;numposts=5&amp;sdk=joey&amp;title=&amp;url=https%3A%2F%2Fnorthsocial.com%2Fapp%2Ftab%2Ffeatured_products%2Fview.php&amp;width=255&amp;xid=featured_product_56062795998_1"></iframe>
     </span>
</fb:comments>

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!

Thanks in advance,

Tre

回答1:

The comments plugin doesn't have a xid paramter that I can see at: https://developers.facebook.com/docs/reference/plugins/comments

You need to specify a unique URL for each of the comment boxes

回答2:

I have resolved multiple comments boxes issues for one page for my site. This is what worked for me:

When generating your FB code, you have to enter the "URL to comment on". For the first box, just enter the url. For second box I added mysite.com/#comments2. For third box I added mysite.com/#comments3. Etc, Etc. This should give you a separate comment box per URL. Hope this helps.

回答3:

It still working with below code.

<fb:comments reverse="false" publish_feed="false" showform="true" 
    simple="false" migrated="1" canpost="true" url='[Your URL]' 
    width="580px" numposts="10" xid="[Unique ID]">
</fb:comments>