WebサイトにSNSのタイムラインを埋め込む方法

SNSのタイムラインを表示する方法を紹介します。

流れに沿えば簡単です。


今回は下記4つのSNS

  • Facebook
  • Instagram
  • Twitter
  • Pinterest

の埋め込み表示方法を紹介したいと思います!

(2021.8時点での記事となります)


Facebook

埋め込み手順

  1. 埋め込み表示をしたいアカウントを表示する
    1. https://www.facebook.com/facebook
    2. ※今回はFacebook自体の公式アカウントを例に解説いたします。
  2. URLをコピーする
  3. FACEBOOK for Developers にアクセスする
    1. https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP
  4. 該当箇所を入力する
    1. FacebookページのURL(必須)
    2. 先ほどコピーしたURLを入力します。
      1. プレビューに埋め込みたいタイムラインが表示されます。
      2. 表示されない場合は下記の「エラー対処法」を確認してください。
    3. タブ(任意)
      1. timelineのままで大丈夫です。
      2. もしメッセージを送る画面を表示したい場合はmessagesにします。
    4. (任意)
      1. 表示する際の幅を設定します。
      2. レスポンシブは不可(PC・SPそれぞれで埋め込む対応は出来ます)なのでスマホ表示も意識して入力してください。
    5. 高さ(任意)
      1. 表示する際の高さを設定します。
      2. レスポンシブは不可(PC・SPそれぞれで埋め込む対応は出来ます)なのでスマホ表示も意識して入力してください。
    6. 下記はお好みで設定してください
      1. スモールヘッダーを使用
      2. plugin containerの幅に合わせる
      3. カバー写真を非表示にする
      4. 友達の顔を表示する
  5. 「コードを取得」をクリックする
    1. JavaScript SDK(以下SDK)とiFrameのどちらかを選択します。
      1. SDK
        1. APIみたいなもので「プログラムなどをまとめてパッケージ化したもの」です。
        2. SDKを使用すると、Facebookプラグインを読み込むタイミングを任意に設定できます。
        3. 難しい設定などはしないという方はiFrameで問題ないと思います。
      2. JavaScript SDK(コードエディタで挿入する場合はiframe推奨)
      3. iFrame
  6. 表示されたコードをコピーする
  7. コピーしたコードを好きな位置に貼り付ける
    1. 埋め込み表示をしたい位置に貼り付けると、タイムラインが表示されるようになります。
    2. ワードプレスのブログに貼り付けたい方はコードエディタから貼り付けてみましょう。
    3. 万が一表示されない場合はコンソールエラーが出ていると思われます。

エラー対処法

埋め込みしたタイムラインが表示されない

Google検索から該当のFacebookアカウントにアクセスすると

ja-jp.facebook.com/○○

のようになっていることがありますが、こちらでは表示されない可能性があります。

プレビューで表示されない場合は

ja-jpの部分をwwwに変更してください。

www.facebook.com/○○

そうすれば表示できるようになるはずです。

コンソールエラーが出る

下記のようなコンソールエラーが出る場合があります。

ErrorUtils caught an error:
Cannot listen to an undefined element. [Caught in: Tried to listen to element of type click]
Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.

このエラーはFacebook側の処理で出てしまうエラーです。

こちらで対応できることはありません。

サイトに影響があるエラーではないのですが、モヤモヤしますね。

※Facebookにログインするとそのエラーは出なくなるようですが、ページを見る側の対応となってしまうのでやはり対応はできないということですね。


Instagram

埋め込み手順

  1. 表示したいアカウントのページにアクセスする
    1. https://www.instagram.com/instagram/
    2. ※今回はInstagram自体の公式アカウントを例に解説いたします。
  2. 投稿画面にアクセスする
  3. 埋め込みコードをコピーする
    1. アカウント名横の三点リーダーをクリック → 埋め込みをクリック → 埋め込みコードをコピーをクリック
    2. 下から2つ目の「埋め込み」を選択(画像が英語表記で申し訳ありません)
  4. コピーしたコードを好きな位置に貼り付ける
    1. ワードプレスのブログに貼り付けたい方はコードエディタから貼り付けてみましょう。
    2. 万が一表示されない場合はコンソールエラーが出ていると思われます。

エラー対処法

投稿画面を開こうとするとログインが必要になる

一覧画面から投稿画像を表示しようとするとログインが必要になります。

自身のアカウントにログインすれば良いのですが、アカウントを持っていない場合もあると思われます。

その際は shift + ctrl + C でデベロッパーツールを開き、該当の画像の上にカーソルを合わせます。

その親要素のaタグにhrefがあるのでその上で右クリック。

open in new tabという項目があるのでクリックすると、投稿ページにアクセスすることができます


Twitter

埋め込み手順

  1. 埋め込み表示のしたいアカウントにアクセスする
    1. https://twitter.com/twitter
    2. ※今回はInstagram自体の公式アカウントを例に解説いたします。
  2. URLをコピーする
    1. https://twitter.com/○○
    2. もし○○に「?」が含まれていた場合、「?」以降は不要です
  3. タグ生成ページにアクセスする
    1. https://publish.twitter.com/
  4. URLを貼り付ける
    1. What would you like to embed?の下に2でコピーしたURLを貼り、矢印をクリックします。
  5. 表示形式を選択する
    1. Here are your display optionsで選択画面が出ます。
    2. タイムラインを表示したい場合は左、ツイートボタンやフォローボタンだけを表示したい場合は右を選択します。
  6. Copy Codeをクリックする
    1. That’s all we need, unless you’d like to set customization options.と表示されますのでCopy Codeをクリックします。
  7. ※set customization optionsがリンクになっていてここで詳細オプションを選択できます。
    1. 高さ(Height(px))、幅(Width(px))、ライトモードorダークモード、言語選択
  8. コピーしたコードを好きな位置に貼り付ける
  9. ワードプレスのブログに貼り付けたい方はコードエディタから貼り付けてみましょう。
  10. 万が一表示されない場合はコンソールエラーが出ていると思われます。
    1. 解決できない場合はお問い合わせいただければお答えいたします!


Pinterest

埋め込み手順

  1. 埋め込み表示のしたいアカウントにアクセスする
    1. https://www.pinterest.com/pinterest/official-news/
    2. 今回はPinterest自体の公式アカウントを例に解説いたします。
  2. URLをコピーする
  3. Pinterestの公式デベロッパーサイトにアクセスする
    1. https://developers.pinterest.com/tools/widget-builder/
  4. Boardタブを選択する
    1. タイトル「Widget builder」下のSave Button Folloe Pin Board Profile の中からBoardを選択します。
  5. URLを貼り付ける
    1. 「Pinterest board URL」に2でコピーしたURLを貼ります。
  6. Sizeを選ぶ
    1. Square, Sidebar, Header, Create you ownがありますが、下のプレビューを見ながら好きな表示形式を選択してください。
    2. カスタマイズしたい場合はCreate you ownを選び、各項目を設定してください。
  7. コードをコピーする
    1. 「Copy and paste this code into your page where you want your add-on to appear:」の下のコードをコピーします
  8. コピーしたコードを好きな位置に貼り付ける
    1. ワードプレスのブログに貼り付けたい方はコードエディタから貼り付けてみましょう。
  9. スクリプトコードの貼り付ける
    1. 「Don’t forget to include pinit.js once per page, right before the closing </BODY> tag.」 のスクリプトをコピーして</body>閉じタグ前に貼り付けます。
    2. これで表示されるはずです。
    3. 万が一表示されない場合はコンソールエラーが出ていると思われます。
    4. 解決できない場合はお問い合わせいただければお答えいたします!


まとめ

Facebook, Instagram, Twitter, Pinterestの埋め込み表示方法を解説しました。

覚えてしまえば簡単に埋め込みすることができそうです。