ブログ用WordPressテーマ マテリアル

無料の割に高機能なブログ用WordPressテーマ マテリアルについての解説サイトです

FacebookのPage Pluginをレスポンシブにする方法

time 2015/05/14

FacebookのPage Pluginをレスポンシブにする方法

 FacebookのLikeBoxが2015年6月23日に廃止されるらしく、代わりにPage Pluginっていうのを使うように推奨されています。

 酷いことしますよねFacebookって。

 とりあえず、Page Pluginの横幅をレスポンシブにする方法を解説。簡単です。

sponsored link

Page Plugin

 Page Pluginの設置はここでコードを作って貼り付けるだけです。

 その際、横幅を280pxから500pxの間で選べってことなんですが、んなもん今どきレスポンシブにさせてくれよ!と思うのがフツーですよね。

 けど大丈夫です。意外と親切な仕様です。ザッカーバーグはアホじゃありません。

実験

 Page Pluginの仕様がよく分かるように300pxの横幅のものと500pxの横幅のものを並べて貼り付けてみました。

data-width=”300px”場合

Page Plugin1
 試しにWidthを300pxと指定してgetCodeしたのが以下のコード。

※見やすいように改行いれてます。
2行目にdata-width=”300px”ってのがありますね。

 そしてこちらが実際に表示されるPage Plugin。↓

 300pxと指定した場合は、表示領域にまだ余白があったとしても300pxを超える大きさにはなりません。ただし300pxより狭い横幅の場合はその大きさに縮んでくれます。

data-width=”500px”場合

 Widthを500pxに指定してgetCodeして、それを貼り付けたのが↓。

 500pxと指定した場合も同じく、500pxより大きくはなりませんが、それ以下の場合は表示領域に合わせて縮んでくれます。

レスポンシブにするには

 つまり、横幅100%のレスポンシブにしたかったらdata-widthは500pxにしておけばいいってことですね。500px以上には伸びませんが。

 なぜ500pxが限度なのかはよく分かりませんが、まあ良しとしましょう。

 そんなことより個人的には、名前がはみ出るのを何とかしてほしいんだけども。。

sponsored link

コメント

  • レスポンシブとはなんだったのか

    by 孔雀院龍夜 €2015年12月17日 11:37 AM

  • レスポンシブじゃねぇー

    by へ? €2016年3月22日 12:33 PM

  • レスポンシブどころか表示スラされてなくても別に問題にならないし、ここの主、放置好きみたいだし。

    by それな。 €2016年3月27日 12:04 PM

  • レスポンシブじゃないだろw

    by 匿名 €2016年4月25日 11:14 AM

  • レスポンスの意味わかってる?
    管理人さん、ホント大丈夫??

    by ウケる €2016年5月10日 11:19 AM

  • レスポンシブじゃないw

    でも、面白いw

    by kunihide €2016年6月7日 8:27 AM

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

    上記のCSSでいけるかも!?

    by kunihide €2016年6月7日 8:57 AM

  • レスポンシブじゃないwwww
    クソ記事を読んだ時間を返してくれ・・・

    by おいおい €2016年9月28日 2:53 PM

  • facebook page pluginのページに

    ”動的なサイズ変更なし
    ページプラグインには、レスポンシブレイアウト、可変レイアウト、固定レイアウトを使用できます。親要素のwidthの設定にはメディアクエリやその他の方法を使用できますが、次の点にご注意ください。
    プラグインのwidthはページの読み込み時に決定されます。
    ページの読み込み後は、ボックスモデルを変更してもプラグインのサイズは変更されません。”

    と書いてありますがな。

    ブラウザの横幅可変したならリロードしてみたら?
    動的にリサイズさせることが目的じゃないし別に問題ないすね。

    by 通りすがり €2016年12月3日 2:50 AM

  • この記事は削除するか正しいレスポンシブ化の記事に修正するべき

    by とおり €2017年1月10日 2:59 PM

down

コメントする



CAPTCHA


更新情報

マテリアルの使い方

信頼できるサーバー第1位

管理人

Nobuo_CREATE

Nobuo_CREATE

WordPressテーマPrincipleを作ったり、Androidアプリを作ったり、Java入門サイトを作ったり、本を書いたりしています。どうぞよろしく。