Wordpressにインスタグラムを埋め込む方法
Instagramの投稿をWordpressサイトで表示するなら「Smash Balloon Social Photo Feed」プラグインがお勧めです。
自分のアカウント認証を済ませれば、投稿・固定ページやウィジェットにショートコードで埋め込む事ができます。
インスタのアカウントは複数登録でき、アクセストークンを使ったマニュアル登録も可能です。
Wordpressにインスタグラムを埋め込む方法
本記事ではWordpressを使ってInstagramのフィードを表示させる方法についてご紹介します。
Instagramが更新されれば自動で連携されるので、Wordpressサイト上にも反映されます。
インスタの1つの投稿画像だけを貼るよりも、自動連携させる方が便利ですよね。
Instagramの投稿は、Wordpress以外のサイトでも埋め込む事ができます。
プラグインのインストール
Instagramの自動連携に使うプラグインは「Smash Balloon Social Photo Feed」（以下：Smash Balloon）です。
まずはこのプラグインをインストール・有効化しておきましょう。
有効化まで済ませたら、管理画面メニューに「Instagram Feed」のメニューができていますので、それを押しましょう。
Instagramアカウントとの連携
全てのフィードの欄上部にある「新規追加」をクリックします。
そのまま右にある「次へ」をクリックします。
「Instagram フィードを作成」画面にある「ソースを追加」ボタンを押すと、Smash Balloonの英語サイトに飛びます。
Smash Balloonサイトでの設定
まず連携するInstagramアカウントの種類（個人・ビジネスなど）にチェックを付けます。
その上で右下の「Login with Instagram」の青いボタンを押しましょう。
次のリクエスト許可の画面で「許可する」をクリックします。
WordpressのInstagram フィードを作成画面へ戻る
少し読み込みがあった後、Wordpressの「Instagram フィードを作成」画面に自動で戻ってきます。
自分のインスタアカウント名が入っているのがわかります。
アカウント名にチェックを付けて、右上の「次へ」を押しましょう。
出力データのカスタマイズ
自分がInstagramで投稿している画像が表示されていると思います。
ここで様々なカスタマイズができる様になっています。
カスタマイズメニュー
・フィードレイアウト
・配色
・ヘッダー
・投稿（PRO版）
・もっと見るボタン
・フォローボタン
・ライトボックス（PRO版）
ヘッダーの大きさや自己紹介文、カスタムアバターなどを設定する事ができます。
配色やボタンの名前も変更する事ができますので、適宜おこなって下さいね。
フィールドレイアウトについて
特に重要なのがフィールドレイアウト（投稿の配列）です。
フィードレイアウトの欄を開き「投稿数」のところへ進みます。
投稿数の変更
デフォルトでは、PC版・モバイル版ともに20件表示されるようになっており、少し多いかも知れません。
PC版の投稿数とスマホ版の投稿数を、好みの数に変更しましょう。
ウィジェットなどに表示するため最新の投稿画像1件だけで良ければ、1にしておけば大丈夫です。
列の変更
下にある「列」の欄では、デバイスごとの横並び数を変更できます。デフォルトは以下の様になっています。
デスクトップ…4
タブレット…2
モバイル…1
数値をしたら、右上の「保存」を押しておけば設定が登録されます。
高度な設定やカスタマイズは、PRO版の契約が必要になるものがありますので、ここでは触れません。
Instagramを埋込む
設定が終了したら右上の「埋め込み」をクリックしましょう。
専用のショートコードが表示されます。
[instagram-feed feed=数値]
これを任意の投稿、固定ページ・ウィジェットなどに貼り付ける事でInstagramのフィードが表示されるようになります。
貼り付けテスト
試しに固定ページに貼り付けてみました（新エディタ）。
新エディタから「ショートコード」を表示させ、そこに貼り付けるだけです。
このページを確認すると、Instagramのフィードが表示されているのがわかります。
上記画像では投稿画像が無いので、エラー表示になっています。
他のインスタアカウントの埋め込み
Instagramのアカウントは複数設定する事ができますので、複数アカウントを持っている場合も大丈夫です。
すべてのフィード画面から新規追加を押して、次の画面でも右の「次へ」を押しましょう。
既に登録済みのアカウントの右にある「新規追加」を押します。
もう一度Smash Balloonの英語サイトに飛び、「Login with Instagram」のボタンを押すと別のアカウントを選択できます。
追加後は、プラグインのInstagramフィードを作成の欄に2つのアカウントが表示される事になります。
他人のインスタアカウントの場合
場合によっては、他人のインスタ投稿をサイトに表示させなければならないケースがあります。
例えばクライアントワーク等、WEBサイトを制作担当している場合がそれにあたりますね。
クライアントのInstagram
クライアントのInstagramのログイン情報を教えてもらえるのであれば、先ほどのアカウント新規追加から追加登録ができます。
しかしログイン情報を頂くのは様々なリスクがありますし、相手から情報が聞けない時もあるでしょう。
その場合でも、いくつか条件がありますがInstagramの埋め込みは可能です。
アクセストークンを使ってフィード登録する方法
Smash Balloonの英語サイトではマニュアルでInstagramフィードの登録をする事ができます。
それがアクセストークンによる認証です。
下にある「Add Account Manually」のボタンを押すと、アクセストークンによる認証画面になります。
InstagramアカウントIDとアクセストークンを入れる画面が表示されるので、それぞれ設定する事になります。
facebookページとの連動が必要
アクセストークンを取得するには、facebookページとインスタアカウントを連動させる必要があります。
そのfacebookアカウントから、対象となるインスタアカウントの「アクセストークン」を作る訳ですね。
アクセストークンの取得の仕方
アクセストークンは、facebookアプリの機能である「InstagramAPI」を使って取得します。
ちょっとやり方は複雑ですが、取得自体は1回だけで済みます。
後は先ほどの画面に貼り付けるだけでプラグイン側がやってくれます。
アクセストークンの取得の流れ
下の記事ではアクセストークンを元に出力PHPまで自作する流れですが、アクセストークンを取得するところまでは一緒です。
見出しの「アクセストークン3個目の取得」までを参考にして下さい。
アクセストークン例
以下の様なコードがアクセストークンであり、最終的にこのコードを取得するまでに2つのアクセストークン取得の工程を踏みます。
アクセストークンの利用期限を無制限にするため、どうしても必要な作業になります。
EAAPxCt4tTqgBAOPwcY5U94ZBhuhbMw2ABoaOQFWkYUuGJExAeCoGhfJKwb6DIynuoG6TRFMwppdwjJatL3dj9HQ7K9MHlZCpAhnrZC8dKnMjgyZC7sQl2QuFr7BeL6Q7xJVIfFwwBr85vXx31ZC9mONHcf77KuPh8OqZAZCqdc35op2euTYF2vW
ですので手順の中で合計3回アクセストークンを取得する事になります。
