Like Boxを可変に対応させたい
Like BoxとはFacebookページに投稿された内容や、
ページに「いいね!」を押してもらいやすくするソーシャルプラグインです。
ユーザーがLike Boxで出来ることは以下となります。
- Facebookページを「いいね!」したユーザー数と、「いいね!」した友達のプロフィール画像を表示できる
- Facebookページのウォールへの投稿内容を表示できる
- ページを訪問することなく、ワンクリックでFacebookページを「いいね!」できる
Like Boxは下記から作成します。
https://developers.facebook.com/docs/reference/plugins/like-box/
必要な情報、項目、スタイルの選択が終わったら「Get Code」をクリックします。
コードが表示されたら任意のコードを選択して、サイトに張り付けて完了です。
このLike Boxをサイト内で可変に対応させたい時の方法は
「HTML5版」と「iframe版」で2通りあります。
それぞれの記述方法を下記に挙げました。
(2013年5月8日時点での方法です。)
HTML5版│CSSを追加する方法
レスポンシブWebデザインに対応させるために幅を100%に指定した下記CSSを追加します。
/* Facebook Like Box width: 100% */ .fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], .fbcomments iframe[style], .fb_iframe_widget span{ width: 100% !important; }
iframe版│widthの値を変更する方法
プラグインのコードをIFRAMEで取得し、
「width: ●●px;」となっている箇所を「width: 100%;」にする。
また、iframe版ではソースのURL記述部分に「http:」を足してあげれば、
ローカル環境でも確認が可能です。
仕様変更により記述等が変わることも考えられますので、
今後のFacebookの公式発表に十分ご注意ください。
参考ページ
■Like Box - Facebook開発者の為のサポートサイト | fb.developers'+
http://fb.dev-plus.jp/reference/coreconcepts/plugins/like-box/
■約36時間でレスポンシブデザインを作る!効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
http://webya.opdsgn.com/webdesign/responsive-protein/
■Facebook Like Boxを幅100%にする(レスポンシブWebデザイン対応)
http://web.showjin.me/facebook-like-box_width100percen.html
■Facebookページの「いいね」をWebサイトで獲得!LikeBoxを設置しよう | MONODEZ
http://monodez.com/create/likebox/