web-dev-qa-db-ja.com

Facebook Like Boxをレスポンシブにする方法は？

Facebookコードをテキストウィジェットに貼り付けることで、 サイドバー でFacebookのようなボックスコードを使用しています。私のテーマはレスポンシブであり、適切なサイズに変更するために「いいね」ボックスを取得したいと思います。私はこれを見つけました チュートリアル しかし、彼は彼がそれをしている方法を言う、「完全に反応する」ではないので、私はそれをするより良い方法があるかどうか知りませんでした。

csswidgetresponsive-design
67
Rick Smith

注：この回答は廃止されました。最新のソリューションについては、 以下のコミュニティWikiの回答 を参照してください。

今日このGistを見つけましたが、完全に機能します： https://Gist.github.com/257117

（ https://Gist.github.com/smeranda に感謝します）

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}
120
Colin Johnston

Colinの例は、いいねボタンと衝突しました。そのため、Like Boxのみをターゲットとするように調整しました。

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

最新のブラウザでテスト済み。

28
stevenw00

注：Colinのソリューションはうまくいきませんでした。 Facebookはマークアップを変更した可能性があります。 *を使用することは、より将来性があります。

Likeボックスをdivでラップします。

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

これをcssファイルに追加します。

#likebox-wrapper * {
   width: 100% !important;
}
26
amirnissim

2015年8月4日の時点で、ネイティブFacebookのようなボックスには、Facebook Developersページでレスポンシブコードスニペットが用意されています。

ここでレスポンシブFacebookのlikeboxを生成できます

https://developers.facebook.com/docs/plugins/page-plugin

これは、CSSをハッキングするよりも、これまでで最高のソリューションです。

7
Clain Dsilva

2013年6月現在、あなたが探している答えはここにあります：

https://Gist.github.com/dineshcooper/2111366

JQueryを使用して、facebookウィジェットを保持する親コンテナーの内部HTMLを書き換えます。

お役に立てれば！

3
Ryan H

Cssトリックはどれも私にとってはうまくいきませんでした（私の場合、fbのようなボックスは「float：right」で右に引っ張られました）。ただし、追加のトリックなしで機能したのは、ボタンコードのIFRAMEバージョンです。つまり：

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

（スタイルのカスタム幅に注意してください。追加のJavaScriptを含める必要はありません。）

0
Vlad

私はDrupal 7で "fb_likebox"モジュール（ https://drupal.org/project/fb_likebox ）でこれを実行しようとしていました。レスポンシブにするため。独自のContribモジュールバリエーションを作成し、幅設定オプションをストライプ化する必要がありました。 （デフォルトの高さオプションは私には関係ありませんでした）。幅を削除したら、fb_likebox.tpl.phpに<div id="likebox-wrapper">を追加しました。

スタイルを設定するためのCSSを次に示します。

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`
0
morleman