今回の記事内容はタイトルの通りです。
慣れれば簡単な作業なんですが、 頻繁に行う作業ではないため
作業手順を忘れてしまう事が多々ありました。

資料にまとめるよりブログに書いた方が
自分も、お客様に説明する際にお見せするのにも便利かなと思い、記事を書こうと思った次第です。

やり方を知りたい方、Instagramをうまく埋め込むことが出来ずに困っている方、ぜひご覧ください。

目次

１．Instagramプロアカウントを作成する（プロアカウントへ切り替え）
２．Facebookページを作成する
３．FacebookページとInstagramプロアカウントを連携する
４．Meta for Developersでアプリを作成する
５．Instagramのアクセストークンを取得する
６．InstagramビジネスアカウントIDを取得する
７．WordPressサイトへInstagramを埋め込む

１．Instagramプロアカウントを作成する（プロアカウントへ切り替え）

Instagramにログイン、【設定】ボタンをクリックします。

プロフィールの設定画面が表示されます。
サイドメニューの【プロアカウントに切り替える】をクリックします。

お好きなアカウントタイプを選択し、【次へ】ボタンをクリックします。

【次へ】ボタンをクリックします。

お好きなカテゴリを選択し、【完了】ボタンをクリックします。
以上でプロアカウントへの切り替え作業完了です。

２．Facebookページを作成する

Facebookにログイン、サイドメニューの【ページ】をクリックします。

ページ一覧画面が表示されます。
サイドメニューの【新しいページを作成】ボタンをクリックします。

ページ作成画面が表示されます。
ページの名前、カテゴリを入力し、【Facebookページを作成】ボタンをクリックします。
以上でFacebookページの作成作業完了です。

３．FacebookページとInstagramプロアカウントを連携する

作成したページのサイドメニューから、【設定】ボタンをクリックします。

設定画面が表示されます。
サイドメニューから【リンク済みのアカウント】をクリックします。

次の画面で【アカウントをリンク】ボタンをクリックします。

【リンクする】ボタンをクリックします。

【実行】ボタンをクリックします。

Instagramのログイン画面が表示されるので、Instagramプロアカウントにログインします。
以上でFacebookページとInstagramプロアカウントの連携作業完了です。

４．Meta for Developersでアプリを作成する

４-１．Meta for Developersにアクセス

Facebookアカウントにログインした状態で、Meta for Developersにアクセスします。
【利用を開始する】ボタンをクリックします。

４-２．Meta for Developersでアカウントを作成

Meta for Developersのアカウント作成画面が表示されますので、【次へ】ボタンをクリックします。

次の画面で【開発者】を選択し、【登録完了】ボタンをクリックします。

４-３．アプリを作成する

Meta for Developersのアプリ作成画面が表示されますので、【アプリを作成】ボタンをクリックします。

次の画面で【その他】を選択し、【次へ】ボタンをクリックします。

次の画面で【ビジネス】を選択し、【次へ】ボタンをクリックします。

次の画面で下記項目を設定し、【アプリを作成】ボタンをクリックします。

次の画面でFacebookのパスワードを入力し、【送信】ボタンをクリックします。

アプリダッシュボードが表示されます。
以上がMeta for Developersでのアプリ作成の手順となります。

５．Instagramのアクセストークンを取得する

アクセストークンは合計3つ取得します。
Instagram埋め込みで使用するのは3つ目のアクセストークンです。

５-１．アプリID・app secretを取得

アプリダッシュボード上に表示されている【InstagramグラフAPI】の【設定】ボタンをクリックします。

次の画面で表示されるサイドメニューから【設定 – ベーシック】をクリックします。

次の画面でアプリID・app secretが表示されます。
この２つはInstagramのアクセストークン取得に使用しますので、メモ帳などに控えておいてください。

５-２．１つ目のアクセストークンを取得

画面上部のメニューから【ツール – グラフAPIエクスプローラ】をクリックします。

グラフAPIエクスプローラ画面が表示されます。
項目を下記のように選択します。

確認画面が表示されるので、Facebookのアカウントが正しい事を確認し、【〇〇〇〇として続行】ボタンをクリックします。

次の画面で【現在のページのみにオプトイン】を選択、Facebookページを選択し、【続行】ボタンをクリックします。

次の画面で【保存】ボタンをクリックします。

次の画面で【OK】ボタンをクリックします。

確認画面が閉じ、グラフAPIエクスプローラ画面に戻ります。
各項目を下記のように設定し、【Generate Access Token】ボタンをクリックします。

確認画面が表示されるので、【〇〇〇〇として続行】ボタンをクリックします。

次の画面で【現在のビジネスのみにオプトイン】を選択、Facebookアカウントを選択し、【続行】ボタンをクリックします。

次の画面で【現在のページのみにオプトイン】を選択、Facebookページを選択し、【続行】ボタンをクリックします。

次の画面で【現在のInstagramアカウントのみにオプトイン】を選択、Instagramプロアカウントを選択し、【続行】ボタンをクリックします。

次の画面で【保存】ボタンをクリックします。

次の画面で【OK】ボタンをクリックします。

確認画面が閉じ、グラフAPIエクスプローラ画面に戻ります。
１つ目のアクセストークンが発行されるので、メモ帳などに控えておいてください。

５-３．２つ目のアクセストークンを取得

下記URLを書き換え、２つ目のアクセストークンを取得するためのURLを作成します。

作成したURLにアクセスし、２つ目のアクセストークンを取得します。
アクセスした画面には、下記の様な文字列が表示されています。
赤文字の部分が２つ目のアクセストークンです。
こちらもメモ帳などに控えておいてください。

５-４．３つ目のアクセストークンを取得

★ここで取得するアクセストークンが、Instagram埋め込みの為に使用する【無期限トークン】と呼ばれるアクセストークンとなります。

作成したURLにアクセスし、IDを取得します。

作成したURLにアクセスし、３つ目のアクセストークンを取得します。
赤文字の部分が３つ目のアクセストークンです。
以上がInstagramのアクセストークン取得の手順となります。

６．InstagramビジネスアカウントIDを取得する

グラフAPIエクスプローラ画面に戻り、InstagramビジネスアカウントIDを検索します。

InstagramビジネスアカウントIDが表示されます。
以上がInstagramビジネスアカウントID取得の手順となります。

７．WordPressサイトへInstagramを埋め込む

７-１．WordPressサイトにInstagramを埋め込む

WordPress管理画面にログインします。
Instagramの埋め込みには【Smash Balloon Instagram Feed】というプラグインを使用します。
上記プラグインのインストール方法については割愛させていただきます。

管理画面のサイドメニューから【Instagram Feed – すべてのフィード】をクリックすると、Smash Balloon Instagram Feedのフィード追加画面が表示されます。
【新規追加】ボタンをクリックします。

フィードの形式はデフォルトのまま、【次へ】ボタンをクリックします。

【ソースを追加】ボタンをクリックします。

WordPressとInstagramの連携を行うサイトが表示されます。
【Add Account Manually】ボタンをクリックします。

Smash Balloon Instagram Feedのフィード追加画面に戻ります。
下記のように設定し、【追加】ボタンをクリックします。

WordPressとInstagramの連携が完了し、画面にInstagramアカウントが表示されます。
アカウントを選択し、【次へ】ボタンをクリックします。

Instagramの見え方を調整する画面が表示されます。
画面上部にある【埋め込み】ボタンをクリックします。

Instagramの埋め込みコードが表示されます。
【コピー】ボタンをクリックし、コードをコピーします。

コピーしたInstagramの埋め込みコードをお好きなページに設置してください。
コードを設定したページにInstagramの投稿一覧が表示されます。

７-２．埋め込んだInstagramの表示確認を行う

Instagramの埋め込みコードを設置したページを確認し、Instagramの投稿一覧が表示されていれば埋め込み作業完了です。

あとがき

作業お疲れ様でした！
WordPressサイトにInstagramを上手く埋め込むことは出来たでしょうか？
作業工程が多く、詳しい説明は省いた内容となっています。
もしかしたら、分かりづらい点等あったかと思いますが、少しでもお力になれていたらとても嬉しいです。

最後までお読みくださりありがとうございました。

=======================
【かりえっとWeb&Designが大切にしているコト】
１．お客様の想いを丁寧に聴くこと　
２．戦略を追求すること　
３．細部まで気を配る対応をすること
========================

かりえっとは、ホームページ制作、ロゴ・チラシ・パンフレットなどのデザインを通してブランディングのお手伝いを行っております。
お気軽ご相談くださいませ。