Facebook comment box with data-href using anchor issue

Question

Currently I have 3 comment boxes on a single page. The page has three tabs that display different content, and each tab content has its own comment section, differing from the other two.

To make sure unique comments are loading for each tab, I am currently using something similar to:

<div class="fb-comments" data-href="http://webpage.com/index.html#tab1" 
     data-num-posts="2" data-width="470"></div>
<div class="fb-comments" data-href="http://webpage.com/index.html#tab2" ...
<div class="fb-comments" data-href="http://webpage.com/index.html#tab3" ...

This works in displaying the relevant content. However, when someone replies to one of these comments, the original commentor receives a link on their fb profile that appears as:

http://webpage.com/index.html?fb_comment_id=fbc_26547577547547_477747457_3745757457435737#4574575475

The problem is that this link the user is given does not show the relevant comment thread, or even the anchor based data-href comment box. Perhaps the end anchor is tripping up the display? If so, is there a paradigm for having different facebook comment boxes on a single page?

Thanks for any help solving this annoying issue.

Answer 1

I implemented something similar using this code

<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-enl" data-width="880" data-num-posts="20"></div>


<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#comm-esl" data-width="880" data-num-posts="20"></div>


<div class="fb-comments" data-href="http://stabmail.com/study-groups-tutoring/#psyc" data-width="880" data-num-posts="20"></div>

Perhaps your issue could be solved by simply removing 'index.html', as Facebook would then treat the '#tab' as the page, and not a link to a different part of the page

My solution can be seen working here http://stabmail.com/study-groups-tutoring/