使用锚点问题的带有 data-href 的 Facebook 评论框答案

【问题标题】：Facebook comment box with data-href using anchor issue使用锚点问题的带有 data-href 的 Facebook 评论框
【发布时间】：2012-06-20 19:35:19
【问题描述】：

目前我在一个页面上有 3 个评论框。该页面有三个标签页，显示不同的内容，每个标签页内容都有自己的评论区，与其他两个不同。

为了确保为每个选项卡加载唯一的 cmets，我目前正在使用类似于：

<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" ...

这适用于显示相关内容。但是，当有人回复其中一个 cmets 时，原始评论者会在其 fb 个人资料上收到一个链接，显示为：

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

问题是给用户的这个链接没有显示相关的评论线程，甚至是基于锚点的 data-href 评论框。也许末端锚绊倒了显示器？如果是这样，是否有在一个页面上拥有不同 facebook 评论框的范例？

感谢您帮助解决这个烦人的问题。

【问题讨论】：

你找到答案了吗？我有同样的问题。
BostonBB，不适用于此特定问题。我们只是进行了快速修复并更改了布局以使其正常工作。独特的评论框似乎讨厌 URL 中的锚。如果您确实找到了解决方案，请告诉我，因为我相信我会再次遇到这个问题。

标签： facebook facebook-social-plugins facebook-comments

【解决方案1】：

我用这段代码实现了类似的东西

<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>

也许您的问题可以通过简单地删除“index.html”来解决，因为 Facebook 会将“#tab”视为页面，而不是指向页面不同部分的链接

可以在这里看到我的解决方案http://stabmail.com/study-groups-tutoring/

【讨论】：

我刚刚重新设计了项目以使其以默认方式工作，但我喜欢你在这里所拥有的，我相信它会成功的。感谢分享，包括一个例子。我希望将来有人能够引用这个帖子。