6月23日からLikeBoxが使えなくなってしまうので、
LikeBokを設置しているサイトは漏れなくPagePluginに変更する必要でてきてしまった。
Facebookが要らん事してくれたおかげで余計な仕事が増える。

PagePluginへの差し替え方法

差し替え自体は簡単。
ここにアクセスして生成されたコードを貼り付け（差し替え）る。
https://developers.facebook.com/docs/plugins/page-plugin

[browser-shot url=”https://developers.facebook.com/docs/plugins/page-plugin” width=”400″]

ここまでは特に難しい事は何もない。
と思って安心していたら思わぬところに罠があった。

PagePluginの横幅は280px～500pxまで

はい、やってくれたねFacebook。
このレスポンシブが当たり前のご時世にまさかの幅制限だよ。
一応最大値の500pxで指定しておけば、読み込み時に500px以下の場合は幅に合わせて自動縮小してくれるみたいだけど280px以下や500px以上には縮んだり伸びたりしてくれません。
融通の利かないやつだよほんとに。

PagePluginを横幅280px以下のブロックに配置する

LikeBoxは幅制限は無かったので、結構狭いブロック内に配置してる場合がある。
とうぜん280px以下のブロック内に配置されている事も珍しくなくて、
元々そこに配置する事が前提でデザインされてたりするので簡単に配置変更なんてできない。
クライアントに「何とかなりませんか？ならないの？使えねーな」とか絶対言われる。
そこでかなり無理矢理な方法で設置する。

CSSのtransformで無理矢理縮小

PagePluginもiframeで表示させているので、cssでiframeごと縮小してあげればいい。
zoomだと中のコンテンツまでは縮小されないのでCSS3のtransformを使う。
transformを使ってPagePluginを幅200px × 高さ400pxで表示させてみると
こんな感じでちゃんと200px内に収まってくれる。

html

Facebook

CSS

#boxPagePlugin{	
	height:400px;
	width:280px;
}

#boxPagePlugin iframe{	
	transform:scale(0.71);	
	-o-transform:scale(0.71);
	-webkit-transform:scale(0.71);
	-moz-transform:scale(0.71);
	-ms-transform:scale(0.71);
	
	transform-origin:0 0;
	-o-transform-origin:0 0;
	-webkit-transform-origin:0 0;
	-moz-transform-origin:0 0;
	-ms-transform-origin:0 0;
}

scaleの比率

transformのscaleには縮尺比率を指定。
PagePluginは最小280pxなので、ブロックの幅 ÷ 280 = 比率
上のサンプルの場合だとブロックが200pxなので　200 ÷ 280 = 0.7142
高さは400pxを指定してるけど実際は少し縮小される。

ここまでやって「文字ちっちゃいからヤダ」って言われたらおとなしく別の所に配置しよう！

2015.06.03　追記

どうやら最小サイズが280pxから180pxに変更になったもよう。
この記事意味ねー！
まぁ180px以下にしたい場合は参考程度に。

CSS

• 
• Tweet