Home
CSS
【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

【レスポンシブ対応】Facebook・Twitterのタイムライン埋め込み方法

どうも!かけちまるです!
僕的、TwitterとFacebookのタイムライン埋め込みの最適解をご紹介します。

この記事では、

  • ・TwitterとFacebookのタイムライン埋め込み方法
  • ・レスポンシブ対応

がわかります。

TwitterとFacebook埋め込み時の注意です!

  • ・Twitterの埋め込みはIEをサポートしていないこと
  • ・Facebookの埋め込みは個人アカウントでは埋め込みできないこと
  • ・Facebookの埋め込みは公開制限などをかけていないか確認
  • ・Facebookの埋め込みはレスポンシブだが読み込みしないとタイムラインはリサイズされない

Facebookの埋め込みのリサイズはJSを使えば可能ですが、今回は割愛します。

完成イメージは、以下の通りです。

Twitterの埋め込み

最初にTwitterの埋め込みから解説していきます。

!注意!

Twitterの埋め込みはIEではサポートされていない。
IE以外のブラウザ、OSはサポートされているようですが、IEはサポートされていないようです。

Twitterヘルプセンター:https://help.twitter.com/ja/using-twitter/twitter-supported-browsers

Twitterの埋め込み方法

埋め込み手順
  • ①https://publish.twitter.com/に移動します。
  • ②埋め込みたいタイムラインのリンクを入力します。
  • ③埋め込みタイプを選択
  • ④埋め込む要素の高さや幅などを設定して、デザインを決める。
  • ⑤コードをコピーし、HTML上でタイムラインを表示したい場所にペーストします。
  • ⑥HTMLとCSSを調整してレスポンシブ対応
  • ⑦完了
1

https://publish.twitter.com/に移動します。

2

埋め込みたいタイムラインのリンクを入力します。

埋め込みたいTwitterアカウントを開き、URLをコピーします。
コピーしたURLを下画像のようにペーストします。

TwitterアカウントのURLコピー TwitterアカウントのURLをペースト
3

埋め込みタイプを選択

ここでは「Embedded Timeline」を選択します。

「Embedded Timeline」を選択
4

埋め込む要素の高さや幅などを設定して、デザインを決める。

set customization options」をクリックするとオプション設定の項目が出てくるので設定していきます。

「set customization options」をクリック

すぐ下にリアルタイムでプレビューが表示されるので確認しながら設定できます。
設定できるのは以下の4つです。

  • ・埋め込みの高さ(px)
  • ・埋め込みの幅(px)
  • ・埋め込みのテーマカラー
  • ・埋め込み内の言語指定
設定項目

設定が完了したら「Update」をクリック

5

コードをコピーし、HTML上でタイムラインを表示したい場所にペーストします。

下画像のように「Copy Code」をクリックすると埋め込みコードをコピーできます。
コピーした埋め込みコードをサイトに貼り付けます。

埋め込みタグをコピー
6

HTMLとCSSを調整してレスポンシブ対応

HTMLとCSSを調整と言っても簡単で、やることはiframe!importantで強制的にwidth%指定するだけです。

個人的に使いやすいと思って埋め込みタグをdivタグで囲ってCSSを当てています。
使用用途に合わせて調整してみてください。

HTML
コピー
<div class="twitter_wrap"> <!-- 埋め込みタグ --> <a class="twitter-timeline" data-width="500" data-height="500" data-theme="light" href="https://twitter.com/kakechi_maru?ref_src=twsrc%5Etfw">Tweets by kakechi_maru</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <!-- 埋め込みタグ --> </div>
CSS
コピー
.twitter_wrap{ margin-left: auto; margin-right: auto; width: 80%; max-width: 500px; } .twitter_wrap iframe{ width: 100% !important; }
7

完了

HTMLとCSSを調整できたら完成です。
レスポンシブに対応していることが確認できますでしょうか?

Facebookの埋め込み

ここからはFacebookの埋め込み方法を解説していきます。

!注意!

Facebook個人アカウントでは埋め込みできない
埋め込もうとしているのがFacebookページかどうかも確認しておきましょう。

公開制限などをかけていないか確認
「公開制限」「国別制限」「年齢制限」のどれか1つでも制限がかかっていると埋め込みは表示されません。

Facebookの埋め込みはレスポンシブだが読み込みしないとタイムラインはリサイズされない
レスポンシブであれば通常ブラウザの幅を変えたら埋め込みの幅も変わるのが自然です。
埋め込みの幅自体は変わるのですが、タイムラインの幅は変わらないです。
タイムラインの幅が変わるのは、サイトを読み込む時のみのようです。

ただ、JSで実現可能なので「Facebook 埋め込み リサイズ」でググると出てくると思います。

Facebookの埋め込み方法

埋め込み手順
  • ①https://developers.facebook.com/docs/plugins/page-pluginに移動します。
  • ②埋め込みたいタイムラインのリンクを入力します。
  • ③埋め込む要素の高さや幅などを設定して、デザインを決める。
  • ④コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。
  • ⑤HTMLとCSSを調整してレスポンシブ対応
  • ⑥完了
2

埋め込みたいタイムラインのリンクを入力します。

埋め込みたいFacebookページを開き、URLをコピーします。
コピーしたURLを下画像のようにペーストします。

FacebookページのURLをコピー
3

埋め込む要素の高さや幅などを設定して、デザインを決める。

すぐ下にリアルタイムでプレビューが表示されるので確認しながら設定できます。
plugin containerの幅に合わせる」にチェックを入れます。それ以外はお好みで設定してください。

  • ・FacebookページのURL
  • ・デフォルト表示するタブ
  • ・埋め込みの高さ(px)
  • ・埋め込みの幅(px)
  • ・スモールヘッダーを使用
    カバー写真の高さを小さくします。
    全体の高さを小さめにする時に有効です。
  • ・カバー写真を非表示にする
    文字通りカバー画像を非表示にします。
    like数とアカウント名が少し強調されます。
  • ・plugin containerの幅に合わせる
    webページが読み込まれたときに幅を調整してくれます。
  • ・友達の顔を表示する
    カバー画像の下にいいねしたユーザーが表示される設定です。
    ですが、2021年3月21日現在チェックを入れても外しても見た目は変わらないようです。
    間違っていたらすみません。

設定が完了したら「コードを取得」をクリック

4

コードをコピーし、自分のウェブサイトのHTML上で、タイムラインを表示したい場所にペーストします。

「コードを取得」をクリックすると埋め込みコードが表示されるので、「JavaScript SDK」を選択します。
ステップ2をhtmlタグ内の任意の場所へ貼り付けます。
ステップ3をFacebookの埋め込みを表示したい場所へ貼り付けます。

5

HTMLとCSSを調整してレスポンシブ対応

HTMLとCSSを調整と言っても簡単で、やることは.fb-page.fb-page spaniframeに対して!importantで強制的にwidthheightを指定します。

個人的に使いやすいと思って埋め込みタグをdivで囲ってCSSを当てています。
使用用途に合わせて調整してみてください。

HTML
コピー
<!-- ステップ2埋め込みタグ --> <div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v10.0&appId=191260879363518&autoLogAppEvents=1" nonce="aTmTSSLa"></script> <!-- ステップ2埋め込みタグ --> <div class="facebook_wrap"> <!-- ステップ3埋め込みタグ --> <div class="fb-page" data-href="https://www.facebook.com/kakechicircle/" data-tabs="timeline" data-width="500" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/kakechicircle/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/kakechicircle/">かけちまる</a></blockquote></div> <!-- ステップ3埋め込みタグ --> </div>
CSS
コピー
.facebook_wrap{ margin-left: auto; margin-right: auto; width: 80%; } .fb-page, .fb-page span, .facebook_wrap iframe{ width: 100% !important; height: 500px !important; }
6

完了

HTMLとCSSを調整できたら完成です。
レスポンシブに対応していることが確認できますでしょうか?

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【SVG】vivus.jsで手書き風テキストアニメーションを実装

【WordPress】記事の公開日と最終更新日を表示

【WordPress】記事の公開日と最終更新日を表示

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

CSSでスクロールバーのデザインを変更する方法

CSSでスクロールバーのデザインを変更する方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法

【Contact Form 7】自動で挿入されるpタグやbrタグを削除する方法