如何将 facebook 评论小部件链接到当前 url？答案

【问题标题】：How to link facebook comments widget to the current url?如何将 facebook 评论小部件链接到当前 url？
【发布时间】：2012-02-01 13:22:14
【问题描述】：

我的网站上的 facebook cmets 框有点问题。我想不出办法将 cmets 链接到它们所在的 url。例如，对我网站上的帖子 1 的 fb 评论在我的所有帖子之间共享，这对用户来说可能有点误导。我每天发布大约一百个帖子（主要是图片），我无法为每个帖子制作一个新盒子。

这是困扰我的一段代码：

<div class="fb-comments" data-href="funshit.ru" data-num-posts="5" data-width="530" data-colorscheme="dark"></div>

如果有办法让它链接到当前网址，问题就会解决。

感谢 m8s 的任何帮助。

【问题讨论】：

如果你可以使用 PHP，那么像这样...data-href="http://funshit.ru<?=htmlspecialchars($_SERVER["REQUEST_URI"], ENT_QUOTES)?>"
感谢您的尝试。虽然没有帮助。一旦我把它放进去，它就会与每一个帖子分享 cmets + 它开始告诉“无法访问 [link](invalid.invalid/?=htmlspecialchars($_SERVER%5B)”

标签： facebook widget comments

【解决方案1】：

因为我编码的 CMS 不能可靠地返回当前 URL 并将其留空或省略失败，所以我用 Javascript 编写了 div 标记：

<script>
document.write("<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='2' data-width='400'></div>");
</script>

当然，这将包括查询字符串中的数据，但如果这是你想要的，你应该能够排除它。

【讨论】：

简单而真棒。您还应该注意将此<script> 准确地放在页面上您想要的位置。
@MattWay 确实，我最终使用了document.getElementById('fbComments').innerHTML = "<div class='fb-comments' data-href='" + window.location.href + "' data-num-posts='5' data-width='100%'></div>";

【解决方案2】：

您可以省略 data-href（或将其留空），以便使用当前 URL。

更新：
截至 2012 年 9 月，上述方法仅适用于第一版 Facebook 评论框。

要使用较新版本的评论社交插件，您需要明确指定当前 URL。

【讨论】：

感谢您的想法，但如果我这样做，则表示此小部件需要 href 参数。
刚刚检查，按预期工作（为空或缺少data-href 属性）。您是在谈论建议指定此属性的“黄色注释”，还是在“红色”中出现的一些错误？
@Rimian，它不是（但它会警告您在兼容模式下工作）。

【解决方案3】：

这个似乎万无一失，非常简单：

// In the next line, you must grab the parent element of the div with class fb-comments.

var oComments = document.querySelector("#CONTAINER-OF-COMMENTS-BOX");

oComments.innerHTML = '<div class="fb-comments" data-href="http://www.whatever.com/" data-num-posts="NUMBER OF POSTS TO SHOW" data-width="WIDTH OF CONTENT"></div>';

FB.XFBML.parse(oComments);

您也可以像这样使用 jQuery 选择父元素：

var oComments = $(".fb-comments").parent().get(0);

确保更改fb-comments div 的data-href 属性以更改cmets 所在的URL。您还应该调整 data-num-posts 以显示要显示的帖子数量，并调整 data-width 以调整内容的宽度。应该这样做！

【讨论】：

【解决方案4】：

使用下面的检查脚本，这对我有用。

<script type='text/javascript'>
     var postUrl = '<data:post.url/>';
     document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>

相应地给出每个帖子的链接。

【讨论】：

【解决方案5】：

我是一个博主，我在我的博客中使用了下面的脚本，这对我有用。

<script type='text/javascript'>
     var postUrl = '<data:post.url/>';
     document.write("<div class="fb-like" data-href='" + postUrl + "' data-layout="standard" data-action="recommend" data-show-faces="true" data-share="true"></div>");
</script>

它相应地给出每个帖子的链接。它也可能对您有所帮助。

【讨论】：