106

ユーザーが自分のサイトに配置したFacebook（fbml）の「いいね」ボタンをクリックしたときにポップアップするコメントボックスを無効にしたいのですが。これは可能ですか？ドキュメントに詳細が見つかりません。

4

21 に答える 21

125

Facebook Like の後にコメント ボックスを非表示にする最も簡単な修正 (XFBML バージョンではなく iframe バージョン) は次のとおりです。

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

CSS スタイルを任意の CSS ファイルに入れて、魔法を見てください。うまくいきます :)

于 2011-02-02T05:55:32.490 に答える
80

適切なサイズの div に iframe を配置し、オーバーフローを非表示に設定すると、この問題は解決しましたが、これは実際には問題を隠しているだけです。

于 2010-07-22T19:20:03.420 に答える
68

CSSでこれを使用します：

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

次のような通常の HTML5 コードで Facebook ボタンをレンダリングします。

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

gr-

于 2012-10-21T12:59:48.053 に答える
14

私がしたことは、次のような「いいね」ボタンの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;
}
于 2012-11-01T07:04:00.407 に答える
9

私は Mohammed Arif の解決策が好きで、それを最良の回答として選びました。ただし、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」は「あなたの」div id で、facebook のようなボタン コードを保持しています

于 2012-06-18T20:29:12.683 に答える
5

動作するクリーナー ソリューション( 2014 年 5 月現在)-

  1. まず、ボタンとしてデータレイアウトプロパティがあることを確認し<div class="fb-like" てください-

    <div class="fb-like" data-layout="button"........></div>

  2. このCSSを追加するだけです-

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

それでおしまい！

デモ

于 2014-05-28T10:06:27.273 に答える
4

ここでデビー・ダウナーになるつもりはありませんが、コメント ボックスを非表示にすることは Facebook のポリシーに違反しませんか?

IV. アプリケーション統合ポイント d. いいねボタンやいいねボックス プラグインなど、当社のソーシャル プラグインの要素を覆い隠したり覆ったりしてはなりません。

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

于 2013-05-17T20:27:05.750 に答える
3

display: noneボタンの HTML 5 バージョンで動作するオプションを取得できませんでした。代わりに、いいね ボタン ボタンが作成されている div をターゲットにして、オーバーフローを非表示に設定しました。

メインのcssファイルに次をドロップすると、うまくいきました：

#fb_button{
    overflow:hidden;
}
于 2012-08-23T01:05:51.297 に答える
3

BrynJ に同意します。現在の最善の解決策は、高さ 20 ピクセルの div コンテナーにいいねボタンを配置し、オーバーフローを非表示に設定することです (最近、FB がコメント フライアウトを iFrame に移動したことをどこかで読みました。 fb_edge_widget_with_commentは、おそらく iFrame ユーザーにとってはもう役に立ちません)。

AddThis を使用していますか? これを行う：

<div class="container" style="height: 20px; overflow: hidden;">
  <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like"></a>
  </div>
</div>
于 2013-01-16T18:24:51.667 に答える
2

代わりに IFRAME バージョンを実装することで、Facebook のようなボタンのコメント ポップアップの問題を回避することができました。そのために次の手順を実行しました。

  1. https://developers.facebook.com/docs/plugins/like-button/にアクセスしてください
  2. 「URL to Like」を Facebook ページの URL に変更します。
  3. 必要に応じて、その他のオプション (レイアウト、アクション タイプなど) を選択します。
  4. 「コードを取得」ボタンを押します
  5. IFRAME のバージョンを選択
  6. 「このスクリプトはアプリのアプリ ID を使用します」と表示されている Facebook アプリケーションを選択してください。
  7. 提供されたコードをアプリケーションに実装する

私が見る限り、IFRAME 実装のいいねボタンはポップアップをトリガーしません。単にいいねボタンとして機能します。これが私の望んだ結果でした。

幸運を。

于 2014-04-18T21:46:13.533 に答える
2

「いいね」をクリックするといいねボタンが消え、コメントポップアップを非表示にするコンテナ div がある場合は、次の解決策を使用してください。

fb のようなボタンを配置するコンテナ div を作成し、次の css を指定します。

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

.fb_like iframe {
  left: 0 !important;
}
于 2013-07-05T15:48:58.107 に答える
1

新しい HTML5 ボタンを使用する場合、それは前方互換性があり、Facebook によって提案されているため、他の人が言ったことから外れるのは簡単です。

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

2 番目のクラスは、AddThis プラグインを使用している人にとってはボーナスです。

于 2013-11-13T09:22:52.717 に答える
1

これを試してみましょう：

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();
 });
于 2013-03-04T16:37:05.997 に答える
1

私は大丈夫だったので、コメントポップアップは次の場合に無効になります。

  1. 顔を表示: -> チェックを外す
  2. コードを取得: -> IFRAME オプションを選択
于 2013-08-21T10:21:31.030 に答える
1

以下は、いいねボタンを 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&amp;send=false&amp;layout=button_count&amp;width=45&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21&amp;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>
于 2013-06-13T06:11:37.287 に答える
0

上記のオーバーフロー高さオプションは、の場合は使用しないでくださいshow-faces=true。それ以外の場合は、顔を非表示にします。

于 2013-03-13T19:22:15.400 に答える
0

コメント ボックスを非表示にすると機能しますが、コメント フライアウト ボックスの背後にクリック可能な要素がある場合、問題が発生する可能性があります。

それを非表示にして、DOM 投稿から削除する必要があります。

コメント ボックスを非表示にする 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);        
});
于 2012-06-26T18:55:59.473 に答える
0

いいねボタンを含むiframeをボタンと同じサイズにするのはどうですか:

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

それでおしまい。

于 2016-06-15T00:21:25.440 に答える
0

私の場合 (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>

コメントポップアップを正しく隠しています。

于 2013-06-06T21:59:52.613 に答える