ブログ用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年5月29日 3:36 PM

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

    by 匿名 €2015年7月21日 12:57 PM

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

    by 匿名 €2015年7月24日 10:02 AM

  • 縮む??

    by 匿名 €2015年7月24日 4:59 PM

  • そもそもこのページの500pxのPage Pluginが500px以下になった時点で
    display noneっぽいけどねぇ・・・
    しくじっちゃった系なのかな? コメントスルーだしw

    by 匿名 €2015年8月25日 11:24 AM

  • >匿名さん
    display noneっぽいってのはどういうことでしょう??
    消えてますか??

    by Nobuo@管理人 €2015年8月25日 11:17 PM

  • このページに埋め込まれた500pxの例ではレスポンシブされていないですねwwww

    by 匿名 €2015年10月8日 11:38 PM

  • クレームが多いな。
    環境によるのかな?

    by Nobuo@管理人 €2015年10月9日 2:05 PM

  • レスポンシブサイトの場合、CSSで調整していることが多いため、多くは、PCでもブラウザ幅を小さくするとレイアウトが変更されますが、その場合、ここのFacebookページは縮小されません。
    というわけで、Facebookはレスポンシブというより、どちらかというと一部の端末では変更してくれるって感じなのかもしれませんね。

    by おはようございます €2015年11月14日 7:22 AM

  • ゴミ記事アップするなよ
    レスポンシブの意味わかってんのかw

    by nana €2015年12月16日 3:13 AM

down

コメントする



CAPTCHA


更新情報

マテリアルの使い方

お役立ち情報

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

管理人

Nobuo_CREATE

Nobuo_CREATE

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