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

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

Home » お役立ち情報 » FacebookのPage Pluginをレスポンシブにする方法

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 もも €2017年3月30日 2:06 AM

  • このサイトはレスポンシブですよね?
    縮めてみましたが、Facebookの枠、小さくなりませんでしたよ?

    by aaa €2017年6月26日 10:24 AM

down

コメントする



CAPTCHA


更新情報

マテリアルの使い方

お役立ち情報

サーバー関連

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

管理人

Nobuo_CREATE

Nobuo_CREATE

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