【HTML/CSS/Javascript】Facebook埋め込み・レスポンシブ対応

Pocket

FacebookのタイムラインはWebサイトに埋め込むと横幅が読み込み時に固定されます。

そのためレスポンシブ対応させるには、ウィンドウリサイズ後にリロードして可変に対応させる必要があります

Webサイトに埋め込む時、PC上では画面の半分幅くらいで他のブロックと横に並べて表示させて、スマートフォンでは他のブロックと上下に並べて、横幅100%で表示させる場合が多いと思います。

今回はその場合を想定したサンプルを作成しました。

Facebookの埋め込み レスポンシブ対応

Facebookの埋め込み- HTML

はじめにサンプルページはこちらです >>> サンプルページ

PC上では画面の半分幅くらいで他のブロックと横に並べて表示させるイメージです。

スマートフォンでは他のブロックと上下に並べて、横幅100%で表示させます。

HTMLはこちらです。

data-href=””表示させたいfacebookページのURLに入れ替えてください

data-width=”” は表示幅です。あとでCSSとjavascriptで調整しますが、ここは500にしています。

data-height=”” は表示高。

data-tabs=”” は表示内容(timeline,events,messagesなど カンマ区切りで複数可)

data-hide-cover=”” はカバー写真表示・非表示

data-show-facepile=”” は[いいね]している友達のPF写真表示・非表示
 
data-hide-cta=”” はカスタムのアクションボタン表示・非表示
 
data-small-header=”” は小さなヘッダーの使用・不使用
 
data-adapt-container-width=”” は表示枠への幅フィット、ここはtrueで!

Facebookの埋め込み- javascript 読み込み・レスポンシブ

facebook読み込み用スクリプトを入力します

Javascript

次にレスポンシブに対応させるために、ウィンドウリサイズ時再度横幅を調整するスクリプトを入力します。

Javascript

Facebookの埋め込み- CSS

PCでは横幅960pxのコンテナ内の左側に580pxのお知らせ、右側に340px幅のFacebookを表示させます。

スマートフォン(デバイス表示幅768px以下)では横幅100%のコンテナ内に縦にお知らせ、Facebookと共に横幅100%で表示させます。

CSS

サンプルページはこちらです >>> サンプルページ

FacebookはYouTubeと同じように、枠に100%とCSSで指定しただけでは画像のように可変してくれません。
Javascriptでウィンドウリサイズ後に再度表示させるひと手間が必要です。

(関連記事)YouTubeの埋め込みについて

この記事が気に入ったら
いいね ! しよう

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です