web-dev-qa-db-ja.com

Facebook Like Button-コメントポップアップを無効にする方法

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

facebookfacebook-likefbml
107
BrynJ

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

81
BrynJ

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

.fb_Edge_widget_with_comment span.fb_Edge_comment_widget iframe.fb_ltr {
    display: none !important;
}

あなたのCSSファイルにCSSスタイルを入れて、魔法を見てください、それは動作します:)

125
Mohammad Arif

CSSでこれを使用します。

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

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

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

gr-

69
Elmer

私がやったのは、次のような「いいね」ボタンの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;
}
14
Kotzilla

私は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」は、ボタンコードのようなFacebookを保持する「YOUR」div idです。

9
Zorox

動作するクリーナーソリューション（2014年5月）-

  1. まず、<div class="fb-like"にdata-layoutプロパティがbutton-

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

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

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

それでおしまい！

デモ

5
Sahil Mittal

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

IV。アプリケーション統合ポイントd。 「いいね！」ボタンや「いいね！」ボックスプラグインなど、ソーシャルプラグインの要素を覆い隠したり、覆ったりしないでください。

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

4
Daniel Krueger

BrynJに同意します。現時点で最適な解決策は、高さ20pxの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>
3
Gerbus

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

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

#fb_button{
    overflow:hidden;
}
3
symulation

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

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

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

幸運を。

2
Shay Narang

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

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

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

.fb_like iframe {
  left: 0 !important;
}
2
MaxK

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

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();
 });
1
Aamir Afridi

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

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

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

1
Bill Pairaktaridis

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

  1. 顔を表示：->チェックを外します
  2. コードを取得：-> IFRAMEオプションを選択
1
Trực Phạm

「いいね」ボタンを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>
1
Rafael

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

0
tleo

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

非表示にし、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);        
});
0
Stephane Brillant

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

コメントポップアップが正しく非表示になっています。

0
jollyr0ger

オーバーフローを非表示に設定すると役立つ場合があります。これをメインのcssファイルで行います。

#fb_button{
overflow:hidden;
}
0
Akshat

「いいね」ボタンを含むiframeをボタンと同じサイズにするだけではどうですか。

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

それでおしまい。

0
Graham McLellan

「いいね」ボタンのみを表示したい場合は、次のようなものを試してください。

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
user0000001