Facebookの投稿埋め込み、スマートフォンはCSSできちっと位置調整すべし!

以前、紹介したことのあるFacebookの投稿埋め込み機能。
Twitterと同じように、Facebookの外のサイトでもFacebookの公開投稿が直接埋め込めるようになったわけですが、ここで気をつけたいのがスマートフォンでの見た目。

できればしっかりと調整しておきたいところですよね。

この機能がリリースされた当初、埋め込まれた投稿はスマートフォンから閲覧した時もPC版と同じ見た目で、幅が552pxと、スマートフォンのポートレート(縦向き)表示の際に大きく幅がずれ、横スクロールが発生していました。

現在は、スマートフォンに最適化した表示がされるように変更されており、幅は320pxに固定されるようになりました。

ただ、ここでひとつ問題が。。がが。

このキャプチャは当ブログをiPhoneで閲覧した時のものですが、だいたいにおいてスマートフォンサイトでは、見やすさを考慮して左右にわずかなホワイトスペースを作ります。

そのため、実際に埋め込み投稿をいれるブロックの横幅は、実質320pxには足りず、結果的に埋め込み投稿が入ると、埋め込み投稿が320pxに最適化されているにも関わらず、横スクロールが発生してしまうわけです。

じゃあ、これはどうしたらいいのよ! ってことなのですが、もうこれはCSSでむりくりどうにかするしかありません。。

本来ならTwitterや、YouTube、Vimeoなどの動画プレイヤーよろしく、レスポンシブ化させてやりたいところなのですが、残念ながら埋め込み投稿のiframeがアクセスしたFacebookサーバー側で直接CSSが指定されていて、jQueryを使ってもこちら側の望む形にはできないんですね。

なので、レスポンシブではないんだけれど、横スクロールが発生しないように、可能な範囲でCSSを使って調整しようというのが、今回の本題。

HTML

<div class="fb-post" data-href="https://www.facebook.com/cazuki/posts/10202087939255412">
  <div class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/cazuki/posts/10202087939255412">投稿</a> by <a href="https://www.facebook.com/cazuki">ホシナ カズキ</a>.
  </div>
</div>

これは、埋め込み投稿のコードになりますが、実際これがブラウザで表示されると、.fb-xfbml-parse-ignoreと指定されているdivがiframeに置き換わります。
そこで一番外側のdivに指定されている.fb-postをフックにして調整をかけます。

CSS

.fb-post iframe {
  width: 320px !important;
  height: 100% !important;
  margin: 0 -6.4px;
}
@media screen and (orientation:landscape) {
  .fb-post iframe {
    width: 320px !important;
    height: 100% !important;
    margin: 0;
  }
}

.fb-postをフックにその下にあるiframeに対し、幅、高さを指定します。
予めLike Boxのレスポンシブ対応をしている場合、幅が100%指定されているはずなので、さらに打ち消して埋め込み投稿の固定幅に合わせることにしました。

で、肝心なのはmargin指定です。
上述したように多くのスマートフォンサイトでは左右にホワイトスペースを設けています。であれば、その左右のホワイトスペース分、ネガティブマージンを指定してはみ出さないようにすりゃいいわけですね。

ただ、これだけだとランドスケープ(横向き)表示させたとき、ネガティブマージンに引っ張られて、少し見た目が微妙なことになります。
そこでランドスケープ表示では、ネガティブマージンを取っ払うよう、後半のCSSで指定しました。

とりあえず、うちはこれで横スクロールも発生しなくなったし、今はこれでいいやーっていう感じです。

なんかもっといい方法あるようでしたら、ぜひ教えて下さいませ。