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

Answers


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


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.


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>

Need Your Help

Overlaying image above UIScrollView's tiledlayer

iphone uiscrollview uiimageview

My iPhone app shows the user some massive images, I've successfully tiled them and used a UIScrollView to allow them to pan around and look at parts of it in detail. Now I want to draw points above...

jQuery animating droppable element does not animate it's 'target droppable area'

jquery jquery-animate draggable droppable

I have this code below which animates a DIV full of droppables into view when you start to drag a draggable element