facebookcommentsxfbml

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

Solution

  • 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