nakajima

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:」を足してあげれば、
ローカル環境でも確認が可能です。

こちらでご紹介しました情報は、2013年5月8日現在のものです。
仕様変更により記述等が変わることも考えられますので、
今後の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/

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら