Facebookウィジェット(Like box)の横幅を制御する

PCとスマートフォン両方に対応するレスポンシブデザインのWebへ、
Facebookウィジェット(Like box)をWebページへ張り付けた時に、横幅が調整できない症状が発生したので、備忘録として対策を纏めます。

 


1. Facebook LikeBoxを選択

Facebookウィジェット
https://developers.facebook.com/docs/plugins/like-box-for-pages
こちらのFacebook Developerページから、Like Boxのタグが配布されているので、
希望するデザインのLike Boxのタグを取得します。

 

likebox1

 

 

 

 

 

 

 

 

2. タグの取得

"Get Code"ボタンからHtmlへ貼り付けるタグを取得できるので、
タグの種類を、HTML5, XFBML, IFRAME, URLから選択します。
但し、Html5とXFBMLは表示できるブラウザが限られてしまうため、
PCとスマートフォンで、どちらにも調整がきくフォーマットは IFRAMEだけのようです。
 


likebox2

 

 

 

 

 

3.タグをWebページへ貼り付ける前の加工

PC用のWebページだけに張り付ける場合は、
"2"で取得したタグを張り付けるだけで完成です。
多少の調整が必要な場合でも、
固定幅であれば、タグのStyleに幅の値を追加すれば、調整できるかと思います。

※例:
ウィジェットの幅を320pxにする場合
width:320px;
を追加

<iframe style="width:320px;" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2FYourWebSite&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=xxxxxxxxxxxxxxx" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>

 

4.レスポンシブデザイン等でスマートフォンの表示でレイアウトが崩れる場合

"3"の応用になりますが、
レスポンシブデザイン等でスマートフォンの画面で、Facebookウィジェットを表示すると、
横幅が画面からはみ出す場合があります。
その場合は、CSSで画面幅にあわせた記述をすることで、
画面からはみ出さずに表示させる事ができるようになります。

※例:
PC等でブラウザの幅が321ピクセル以上の場合は、320ピクセル固定とする、
スマートフォン等で320ピクセル以下の場合は、ウィジェットの幅を画面いっぱい100%とする。

<style>
@media screen and (min-width:321px){
.fbw1{ width:100%;}
}
@media screen and (max-width:320px){
.fbw1{ }
}
</style>

<iframe class="fbw1" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2FYourWebSite&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=xxxxxxxxxxxxxxx" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowTransparency="true"></iframe>

 

私の環境では上の手順で調整ができました。
環境依存もあるかもしれません。

 

hidenori

Web、モバイル関連、コンシューマゲーム、モバイルコンテンツ等、
コンテンツ全般の開発や制作、コンテンツのバックエンドになる技術等を扱っています。

開発系
.net / mono、Java, javascript, c++, c, Perl, PHP, phython,
インフラはAWSとLinux仮想化で自前構築

・経歴
⇒外資|ゲーム開発|ローカライズ|SE|QA|PD|PG|SE|大学
⇒Web|SE|ベンチャー|コンテンツ|音楽⇒外資|ケータイ|ゲーム
⇒Web|SE|ベンチャー|音楽|大学院|ケータイコンテンツ|スマートフォンコンテンツ|独自コンテンツ配信

いろいろやってます

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です