2017/08/20
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”場合
試しにWidthを300pxと指定してgetCodeしたのが以下のコード。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="fb-page" data-href="https://www.facebook.com/pages/WordPress%E3%83%86%E3%83%BC%E3%83%9E-%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB/1798777470348398" data-width="300px" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"> <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/pages/WordPress%E3%83%86%E3%83%BC%E3%83%9E-%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB/1798777470348398"> <a href="https://www.facebook.com/pages/WordPress%E3%83%86%E3%83%BC%E3%83%9E-%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB/1798777470348398"> WordPressテーマ マテリアル</a> </blockquote> </div> </div> |
※見やすいように改行いれてます。
2行目にdata-width=”300px”ってのがありますね。
そしてこちらが実際に表示されるPage Plugin。↓
300pxと指定した場合は、表示領域にまだ余白があったとしても300pxを超える大きさにはなりません。ただし300pxより狭い横幅の場合はその大きさに縮んでくれます。
data-width=”500px”場合
Widthを500pxに指定してgetCodeして、それを貼り付けたのが↓。
500pxと指定した場合も同じく、500pxより大きくはなりませんが、それ以下の場合は表示領域に合わせて縮んでくれます。
レスポンシブにするには
つまり、横幅100%のレスポンシブにしたかったらdata-widthは500pxにしておけばいいってことですね。500px以上には伸びませんが。
なぜ500pxが限度なのかはよく分かりませんが、まあ良しとしましょう。
そんなことより個人的には、名前がはみ出るのを何とかしてほしいんだけども。。
コメント
ほんとそうですよね。
どうなてるの。他を当たるわ。バカ
by もも 2017年3月30日 2:06 AM
このサイトはレスポンシブですよね？
縮めてみましたが、Facebookの枠、小さくなりませんでしたよ？
by aaa 2017年6月26日 10:24 AM