及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Facebook > Facebookの埋め込み投稿のサイズを変更する

Facebook の 埋め込み投稿のサイズを変更する

2013年8月21日より、Facebookの「埋め込み投稿」という機能が使えるようになり、
自分のホームページ（ウェブサイト）のWEBページやブログに好きなFacebook の投稿（記事）を埋め込むことができるようになりました。
Facebookの[埋め込み投稿]について

※埋め込まれた投稿の横幅のサイズはデフォルトだと、PCで表示すると横幅のサイズは550pxで固定されている。
(周りのボーダーが1pxで、両脇で2pxがプラスされ、実際は552pxになる。）
※スマートフォンで見ると、リサイズされて、小さく表示される。

552pxだと大きいので、サイズを変更する方法を試行錯誤し、サイズを変更する方法を見つけた。

Facebook 「埋め込み投稿」の幅を変更する方法

デフォルトのサイズ（W552px）
WEBページにFacebookの投稿を埋め込むと、こんな風に表示されます。
投稿 by 及川 明美.
  • デフォルトだと、PCで表示すると横幅は550pxで固定されている。
    (周りのボーダーが1pxで、両脇で2pxがプラスされ、実際は552pxになる。)
  • スマートフォンで見ると、リサイズされて、小さく表示される。
横幅のサイズを変更
Facebook の投稿を埋め込んで、横幅を80%で表示した例。
投稿 by 及川 明美.

これは、スタイルで transform:scale(0.8,0.8); を設定しています。

埋め込みコード 
<div class="fb-post" data-href="https://www.facebook.com/akemi.oikawa/posts/497582300321308" style="transform:scale(0.8,0.8);-webkit-transform:scale(0.8,0.8);">
<div class="fb-xfbml-parse-ignore">投稿 by 及川 明美.
</div></div>

上記1行目の「class="fb-post"」が設定されたレイヤータグ（<div class="fb-post" data-href="https://www.facebook.com/・・・" >）に下記を追記。
style="transform:scale(0.8,0.8);-webkit-transform:scale(0.8,0.8);"
  • transformのscaleの値は任意に設定して下さい。
  • 「transform」はCSS3から新しく追加されたプロパティなので、古いIEには非対応。
    なので、IE8のために下記のコードをheadに入れるとよい。
  • Facebookでは最新のブラウザの使用を推奨していますが、2013年10月25日現在、IE8以降は対応しているようです。
    IE6、IE7では表示が崩れてきちんと表示されませんでした。
  • 下記の環境で表示を確認しました。
    Internet Explorer 10 / Mozilla Firefox 24.0 / Safari 5.1.7

以上です。
MENU Ξ