当前位置：文江博客话题详情

facebook fbml facebook-like

Facebook 点赞按钮 - 如何禁用评论弹出？

发布于 2024-09-10 00:33:49 字数 76 浏览 5 评论 0 原文

我想禁用当用户单击我放置在网站上的 Facebook (fbml) Like 按钮时弹出的评论框。这可以吗？我在文档中找不到任何详细信息。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

捂风挽笑 2024-09-17 00:33:50

将 iframe 放入适当大小的 div 中并将溢出设置为隐藏解决了此问题 - 尽管这实际上只是隐藏了问题本身。

回复收藏 0 原文

用心笑 2024-09-17 00:33:50

我在 CSS 中使用它：

.fb-like{
    height: 20px;
    overflow: hidden;
}

并使用普通的 HTML5 代码渲染 Facebook 按钮，如下所示：

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

gr-

I use this in my CSS:

.fb-like{
    height: 20px;
    overflow: hidden;
}

and render the Facebook button with the normal HTML5 code, something like this:

<div class="fb-like" data-layout="button_count" data-show-faces="false"></div>

gr-

回复收藏 0 原文

青衫负雪 2024-09-17 00:33:50

我所做的是为“喜欢”按钮创建一个 div，如下所示：

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

这是 CSS：

.fb_like {  
  overflow: hidden;
  width: 90px;
}

What I did is crate a div for the "like" button like this:

<div class="fb_like">
  <fb:like href="yourlink" send="false" layout="button_count" width="90" show_faces="false" font="arial"></fb:like>
</div>

And this is the CSS :

.fb_like {  
  overflow: hidden;
  width: 90px;
}

回复收藏 0 原文

一个人练习一个人 2024-09-17 00:33:50

我喜欢穆罕默德·阿里夫的解决方案，并选择它作为最佳答案。但如果 FB 更改了类，那么下面的内容将始终有效..

FB.Event.subscribe('edge.create', function(response) {
   $('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
   FB.XFBML.parse();
});

其中“like_button_holder”是保存 facebook like 按钮代码的“您的”div id

I like Mohammed Arif's solution and I choose it as the best answer. But in case FB changed classes, then the below will always work..

FB.Event.subscribe('edge.create', function(response) {
   $('#like_button_holder').html('<div class="fb-like" data-href="http://www.your-url.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false"></div>')
   FB.XFBML.parse();
});

where "like_button_holder" is "YOUR" div id holding the facebook like button code

回复收藏 0 原文

往日 2024-09-17 00:33:50

有效的更干净的解决方案（截至2014 年 5 月）-

首先确保
具有 data-layout 属性作为 button- ;

只需添加此 CSS-

.fb-like{
   溢出：隐藏！重要；
}

就这样！

演示

The cleaner solution that works (as of May 2014)-

First of all make sure the the <div class="fb-like" has data-layout property as button-
```
<div class="fb-like" data-layout="button"........></div>
```

Just add this CSS-

.fb-like{
   overflow: hidden !important;
}

That's it!

Demo

回复收藏 0 原文

羁绊已千年 2024-09-17 00:33:50

我不想成为黛比·唐纳 (Debby Downer)，但隐藏评论框不会违反 Facebook 政策吗？

四．应用程序集成点
d.您不得遮盖或遮盖我们社交插件的元素，例如“赞”按钮或“赞”框插件。

https://developers.facebook.com/policy/

回复收藏 0 原文

为你鎻心 2024-09-17 00:33:50

我无法使用 display: none 选项来使用 HTML 5 版本的按钮。相反，我将目标放在创建 Like 按钮的 div 上，并将溢出设置为隐藏。

在我的主 css 文件中添加以下内容就可以了：

#fb_button{
    overflow:hidden;
}

I couldn't get the display: none option to work with the HTML 5 version of the button. Instead I targeted the div that the like button button is created in and set the overflow to hidden.

Dropping the following in my main css file did the trick:

#fb_button{
    overflow:hidden;
}

回复收藏 0 原文

帅的被狗咬 2024-09-17 00:33:50

同意 BrynJ 的观点，目前最好的解决方案是将 Like 按钮放在 20px 高的 div 容器中，并将溢出设置为隐藏（我在某处读到 FB 最近将评论弹出窗口移动到 iFrame 中，因此修改 < 的样式的解决方案strong>.fb_edge_widget_with_comment 对于 iFrame 用户来说可能不再有用）。

使用添加这个？这样做：

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>

Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).

Using AddThis? Do this:

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>

回复收藏 0 原文

執念 2024-09-17 00:33:50

如果单击“喜欢”时喜欢按钮消失，并且您有一个容器 div 来隐藏评论弹出窗口，则使用以下解决方案：

创建一个容器 div 来放置类似 fb 的按钮，并为其提供以下 css：

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}

If the like button disappears when you click "like" and you have a container div to hide the comment pop-up, then use the following solution:

create a container div to place the fb-like button in and give it the following css:

.fb_like {
  overflow: hidden;
  width: 90px;
}

.fb_like iframe {
  left: 0 !important;
}

回复收藏 0 原文

慵挽 2024-09-17 00:33:50

我通过实施 IFRAME 版本设法规避了 Facebook 点赞按钮评论弹出问题。我采取了以下步骤来执行此操作：

访问 https://developers.facebook.com/ docs/plugins/like-button/
将“点赞 URL”更改为您的 Facebook 页面 URL
根据需要选择任何其他选项（布局、操作类型等）
按“获取代码”按钮
IFRAME 版本
选择确保您选择 Facebook 应用程序，其中显示“此脚本使用您应用程序的应用程序 ID”
在您的应用程序中实现提供的代码

据我所知，使用 IFRAME 实现的“点赞”按钮不会触发任何弹出窗口。它的功能只是充当“点赞”按钮。这是我想要的结果。

祝你好运。

回复收藏 0 原文

浅忆流年 2024-09-17 00:33:50

下面的代码使 Like 按钮与 Twitter 和 Linkedin 一起作为标准按钮工作。希望有帮助。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FB</title>


<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; } 
.social ul li { float: left; margin-right: 10px; }
</style>

</head>

<body>
<div id="fb-root"></div>

<div class="social">

    <ul>
        <li class="facebook">   
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe> 
        </li>
        <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
        </li>
        <li class="linkedin">
            <script type="IN/Share" data-url="http://www.smh.com.au/"></script>
        </li>
    </ul>
</div>

<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=333450970117655";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>

Here is the code to have the Like button working as just a standard button along with Twitter and Linkedin. Hope it helps.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FB</title>


<style>
.social ul { overflow: hidden; margin:0; padding:0; list-style: none; } 
.social ul li { float: left; margin-right: 10px; }
</style>

</head>

<body>
<div id="fb-root"></div>

<div class="social">

    <ul>
        <li class="facebook">   
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.smh.com.au&send=false&layout=button_count&width=45&show_faces=false&font&colorscheme=light&action=like&height=21&appId=333450970117655" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:48px; height:21px;" allowTransparency="true"></iframe> 
        </li>
        <li class="twitter">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://www.smh.com.au" data-count="none">Tweet</a>
        </li>
        <li class="linkedin">
            <script type="IN/Share" data-url="http://www.smh.com.au/"></script>
        </li>
    </ul>
</div>

<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=333450970117655";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>

<script src="//platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>

</body>
</html>

回复收藏 0 原文

执妄 2024-09-17 00:33:50

让我们试试这个：

FB.Event.subscribe('edge.create', function(response) {
    var $parent =  $('[href="'+response+'"]').parent();
    $parent.empty();
    $parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
    FB.XFBML.parse();
 });

Lets try this one:

FB.Event.subscribe('edge.create', function(response) {
    var $parent =  $('[href="'+response+'"]').parent();
    $parent.empty();
    $parent.html('<fb:like href="'+response+'" send="false" layout="button_count" width="120" show_faces="false" action="like"></fb:like>');
    FB.XFBML.parse();
 });

回复收藏 0 原文

岁月流歌 2024-09-17 00:33:50

正如我所做的那样，评论弹出窗口将在以下情况下被禁用：

显示面孔：->取消选中
获取代码：->选择 IFRAME 选项

回复收藏 0 原文

早茶月光 2024-09-17 00:33:50

如果您使用较新的 HTML5 按钮，并且您应该使用它，因为它向前兼容并由 Facebook 建议，这很容易，偏离其他人所说的：

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

第二类对于使用 AddThis 插件的人来说是一个奖励。

If you use the newer HTML5 button, and you should as it's forward compatible and suggested by Facebook, it's easy, going off from what others have said:

.fb-like, .addthis_button_facebook_like
  height: 25px
  overflow: hidden

The second class is a bonus for those using the AddThis plugin.

回复收藏 0 原文

Spring初心 2024-09-17 00:33:50

show-faces=true 时不应使用上述溢出高度选项。否则，它会隐藏面孔。

回复收藏 0 原文

↘紸啶 2024-09-17 00:33:50

就我而言（使用 XFBML 版本），我已将以下内容添加到标签中：

width="90" height="20" style="overflow: hidden;"

所以最终结果是：

<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>

它正确隐藏了评论弹出窗口。

In my case (with the XFBML version) I've added to the tag this:

width="90" height="20" style="overflow: hidden;"

So the end result is:

<fb:like data-href="URL" send="false" layout="button_count" width="90" height="20" style="overflow: hidden;" show_faces="false" colorscheme="light" action="like"></fb:like>

It's hiding correctly the comment popup.

回复收藏 0 原文

猫弦 2024-09-17 00:33:50

隐藏评论框可以工作，但如果评论弹出框后面有可点击的元素，可能会产生问题。

你必须隐藏它并从 DOM post 中删除它。

这是隐藏评论框的 CSS：

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

这是删除 DOM 元素的 JQuery 方法：

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

这是使用回调中提供的小部件的纯 JavaScript 方法：

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});

Hiding the comment box work but can create problem if you have clickable element behind the comment flyout box.

You have to hide it and remove it from the DOM post like.

Here is the CSS to hide the comment box:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Here is the JQuery way of removing the DOM element:

 FB.Event.subscribe('edge.create', function (href, widget) {        
    $('.fb_edge_comment_widget.fb_iframe_widget').remove()       
});

Here is the pure javascript way using provided widget from the callback:

FB.Event.subscribe('edge.create', function (href, widget) {
    widget._commentWidgetNode.parentNode.removeChild(widget._commentWidgetNode);        
});

回复收藏 0 原文

悟红尘 2024-09-17 00:33:50

如果你只想显示点赞按钮，你可以尝试这样的

HTML:

<div class="fb_like">
    <div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    <div class="like_counter_hider"></div>
</div>

CSS:

.fb_like {
    overflow: hidden;
    width: 80px;
    height: 20px;
}
.like_counter_hider {
    position: absolute;
    top: 0;
    left: 45px;
    width: 35px;
    height: 20px;
    background-color: #f3f3f3; /*you'll have to match background color*/
    z-index: 200;
}

If you want to show only the like button, you may try something like this

HTML:

<div class="fb_like">
    <div class="fb-like" data-href="http://google.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
    <div class="like_counter_hider"></div>
</div>

CSS:

.fb_like {
    overflow: hidden;
    width: 80px;
    height: 20px;
}
.like_counter_hider {
    position: absolute;
    top: 0;
    left: 45px;
    width: 35px;
    height: 20px;
    background-color: #f3f3f3; /*you'll have to match background color*/
    z-index: 200;
}

回复收藏 0 原文

堇年纸鸢 2024-09-17 00:33:50

将溢出设置为隐藏可能会有所帮助。在你的主 css 文件中执行此操作..

#fb_button{
overflow:hidden;
}

Setting overflow to hidden might help. Do this in your main css file..

#fb_button{
overflow:hidden;
}

回复收藏 0 原文

新一帅帅 2024-09-17 00:33:50

如何将包含类似按钮的 iframe 设为与该按钮相同的大小：

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

就是这样。

How about just make the iframe that contains the like button the same size as the button:

.fb_iframe_widget_lift
{
    width: 49px !important;
    height: 20px !important;
}

That's it.

回复收藏 0 原文

┊风居住的梦幻卍 2024-09-17 00:33:49

在 Facebook Like（XFBML 版本而不是 iframe 版本）之后隐藏评论框的最简单修复如下：

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

将 CSS 样式放入任何 CSS 文件中，看看神奇的效果，它有效:)

Simplest fix to hide the comment box after Facebook Like (XFBML version not the iframe one) is as given:

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

Put the CSS style in any of your CSS file and see the magic, it works :)

回复收藏 0 原文

~没有更多了~

关于作者

生生不灭

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

Facebook 点赞按钮 - 如何禁用评论弹出？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（21）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

Facebook 点赞按钮 - 如何禁用评论弹出？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（21）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。