Facebookの「いいね！」ボタン-コメントのポップアップを無効にする方法は？

107

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

facebook  facebook-like  fbml 
— ブリンJ
ソース
2
答えが見つかりませんでした。「Like Box」を回避策として検討しましたか？ developers.facebook.com/docs/reference/plugins/like-box。「ストリームの表示」と「ヘッダーの表示」をオフにし、「接続」を0に設定すると、結果のマークアップのサイズが適切になります。
— zombat
回避策として見つけた回答を追加しました。
— BrynJ

回答:

125

Facebook Like（Xframe版ではなくXFBML版）の後にコメントボックスを非表示にする最も簡単な修正は、次のとおりです。

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

CSSスタイルをCSSファイルのいずれかに入れて、魔法を見てください、それは機能します:)

— モハマドアリフ
ソース
私は最高ではありませんが、ジョナサンに感謝します:)私は同じことに苦労し、ファンシーなソリューションを探すのではなくCSSを使用して解決しようとしましたが、それは「魅力のように」機能しました:)
— Mohammad Arif
8
誰もがBrynJの答えが最善かもしれないと思いませんか？Facebookがマークアップでクラスを変更すると、このメソッドは機能しなくなります。
— tybro0103 2012年
驚くべきことに、実際にはコメントポップアップを無効にできるオプションはまだありません。よく働く。
— メッシング
@tybro、クラス名がFacebookから偶然変更された場合、もちろんCSSからもルールを簡単に変更できます。これは、機能的な変更を必要としないため、コメントポップアップを非表示にするのが最も簡単です。時間FBはそれを構成可能にしません。
— Mohammad Arif
14
2013年2月12日の時点では、これは機能しませんでした。Kotzillaのソリューションを使用しなければなりませんでした
— Bashevis
81

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

— ブリンJ
ソース
5
面白いのは、他の男がすべての票を獲得したことです。おそらく彼の方法は3分節約できますが、facebookがクラスを変更すると壊れます。
— tybro0103 2012年
@tybro fbタグにクラスを追加してスタイルを設定できるので、fbがクラスを変更してもコードには影響しません。
— Gangesh 2012年
1
@Gangeshええと、できません。マークアップは、あなたが制御できないFacebookから直接提供されます。
— tybro0103
@ tybro0103、FBがクラスを変更しても壊れないメソッドを追加しました
— Zorox
どうもありがとう@BrynJ
— Abhishek
69

私はこれを私のCSSで使用します：

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

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

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

gr-

— エルマー
ソース
4
他のソリューションを試した後、これが最も効果的でした。edge.createイベントをサブスクライブする必要があるため、iframeは適していません。edge.createイベントハンドラーでdivタグを再レンダリングすると、少し遅れが生じます。「.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr」を使用する他のCSSソリューションも、私には機能しませんでした。
— CodeWarrior 2013年
これは私のためにも働いた唯一のものです。私は埋め込みメソッドのような非iframeを使用しています。
— TK123
4
実際には機能しません（2014年1月）。コメントボックスを無効にするのではなく、単に非表示にするだけです。あなたが押した場合と同様のボタンをして、入力を開始する（あなたがテストしているリンクをunliking後にページを更新するように注意してください）、<div>滞在同じサイズでなく、番組テキスト入力ボックス、を押しタブと閉じるとポストのボタンが見えるようになり。良くない。Firefoxでテストしていました。
— アナベル2014年
ええええええええええええええええええ、このソリューションは本当にうまくいく、ありがとう！
— マイケル
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;
}
— コチラ
ソース
4
これは実際に私が見つけた最良の回避策です。ボックスカウントレイアウトを使用する場合は、次のCSSを使用します。.fb-like {overflow：hidden; 高さ：61px; いいねボタンの上に小さなノッチが表示されるだけですが、この愚かなポップアップに煩わされることはもうありません。
— NicolasBernier 14年
Shopifyの最小テーマでは、ラッピングdivのこの使用はWebとモバイルの両方で機能しましたが、fbのようなクラスをオーバーライドするだけでWebでは機能しましたが、モバイルでは機能しませんでした（追加のメディア固有のクラスが含まれているため）
— gamozzii
9

私はモハメドアリフのソリューションが好きで、それを最良の答えとして選択します。しかし、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です。

— ゾロックス
ソース
4
CSSスタイルではiframe内のdivを非表示にできないため、このソリューションを使用しました。
— ポンス2013年
これは本当に賢いですが、コメントボックスが非常に短い時間表示される可能性があります
— pinkdawn
1
私はこれを「本当にスマートな」良いソリューションとは呼びません-いいねボタンのマークアップの削除（しかし、イベント処理コードの孤立化）、DOMへの新しい追加、XFBMLのためのページ全体のDOMの再構築、そして新しい「いいね！」ボタン。これは、より多くのイベントハンドラー、再描画とリフロー、いくつかの新しいリクエストなどを意味します。私は実際にはこれを悪いソリューションと呼んでいます。新しいコンピュータを購入。
— AndrewF 2013
1
より良いアイデアを得ましたか？あのくだらないコメントボックスは、そうでなければ消えません。
— アマルゴビナス2013
@AndrewF-その時より良いアイデアは？
— Jeremy Haile
5

機能するクリーナーソリューション（2014年5月現在）-

  1. まず、ボタンにdata-layoutプロパティ<div class="fb-like" があることを確認してください-

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

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

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

それでおしまい！

デモ

— サヒル・ミッタル
ソース
4

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

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

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

— ダニエル・クルーガー
ソース
1
それは質問に対する答えを提供しません。コメントとして追加備考をお願いします。
— トリニモン2013年
2
皮肉なことに、私のいいねボタンを非表示にしているのはファッキングなコメントボックスです。
— アマルゴビナス2013
3

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

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

#fb_button{
    overflow:hidden;
}
— シンメレーション
ソース
3

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>
— ガーバス
ソース
20px divコンテナーソリューションが唯一の有効なソリューションであることを確認できます。
— バシェビス2013
2

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

コンテナーdivを作成してfbのようなボタンを配置し、次のcssを割り当てます。

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

.fb_like iframe {
  left: 0 !important;
}
— MaxK
ソース
2

代わりにIFRAMEバージョンを実装することで、Facebookのようなボタンコメントポップアップの問題を回避することができました。私はそうするために以下のステップを踏みました：

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

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

幸運を。

— シェイ・ナラン
ソース
イベントリスナーが必要ない場合は、これが最良の公式回答です。ありがとう ！！
— Yahel 2014年
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>
— ラファエル
ソース
いいですね、これは私がページから試みた最良のソリューションでした。AGAIN @Rafaelに感謝します。
— スチュアート
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();
 });
— アーミル・アフリディ
ソース
1

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

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

新しいHTML5ボタンを使用していて、Facebookによって上位互換性があり、推奨されている場合は、他のユーザーの発言から簡単に外れます。

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

2番目のクラスは、AddThisプラグインを使用する人のためのボーナスです。

— ビル・パイラクタリディス
ソース
0

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

— トレオ
ソース
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>

コメントポップアップを正しく非表示にします。

— jollyr0ger
ソース
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);        
});
— ステファン・ブリラント
ソース
別のドメインでiframedコンテンツのcssルールを作成するにはどうすればよいですか？名前が来月異なるCSSクラスは言うまでもありませんか？
— アマルゴビナス2013
0

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

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;
}
— user0000001
ソース
0

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

#fb_button{
overflow:hidden;
}
— アクシャト
ソース
0

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

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

それでおしまい。

— グラハム・マクレラン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.