フェイスブックのLike BOXをレスポンシブにする方法

フェイスブックのLike BOXをレスポンシブにする方法
このエントリーをはてなブックマークに追加
PR

Facebookのライクボックスは基本的に横幅を指定して設置しますが、レスポンシブなサイトだとレイアウトが変動するので、それに合わせて横幅が自動で決まるようにする方法です

FacebookでLike BOXの作成

https://developers.facebook.com/docs/plugins/like-box-for-pages

まずライクボックスを作成します、このときに適当にwidthに値を入れてください

フェイスブックのLike BOXをレスポンシブにする方法

次にコードを取得します Get Code

 

コードはIFRAMEを選択します

フェイスブックのLike BOXをレスポンシブにする方法 (2)

 

コードの一部を変更する

width:300px; という箇所を width:100%;に変更します
300という数字は先ほど適当につけた数字です

 

これでボックスが親要素の幅に合わせて自動で変動します
親要素の方で長さを調整できるようになるのでレスポンシブデザインにも組み込めやすくなります

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)