ワードプレス&インスタグラム連携埋め込みプラグイン。

ブログはWordPressを使っている。最近、Instagramが流行ってるらしいので使い始めた。で、Instagramに投稿した写真をWordPressに自動的に表示できないの?そんなあなたにオススメのプラグインを2種類ご紹介します。

[st-amp]このページはモバイルで表示を速くする処理をしています。遅くする要素が省かれています。全ての内容を見る場合は「完全版を表示する」のページで閲覧することをオススメします。[/st-amp]
ブログはWordPressを使っている。
最近、Instagramが流行ってるらしいので使い始めた。
で、Instagramに投稿した写真をWordPressに自動的に表示できないの?
そんなあなたにオススメのプラグインをご紹介します。
[adsenseb]

インスタグラムとWordPressの連携プラグイン

Instagram Feed

記事ごとに違う表示のインスタグラムウィジェット(パーツ)を貼るプラグイン

icon-download Instagram Feed
プラグイン「Instagram Feed」をインストール及び有効化し、設定画面を開くと Instagram の Access Token (アクセストークン)と User ID (ユーザーID)を入力する箇所があります。
青色のボタン[Log in and get my Access Token and User ID]をクリックして取得します。
アクセストークンとユーザーIDを取得する
Instagram から認証を求められるので自分のアカウントネームが正しいかを確認して[Authorize]ボタンをクリック。
Authorization Request Instagram
アクセストークンとユーザーIDが表示されるので、それを入力(コピーアンドペースト)して[変更を保存]ボタンをクリック。
アクセストークンとユーザーIDの表示
[adsensemidlink]

インスタグラムの写真を記事に貼り付ける

記事やサイドバーに貼り付ける方法は簡単。
[instagram-feed]と書くだけで表示できます。
※カッコは半角の [ ] に変えてください。
instafeed
ショートコードオプションを加えれば表示方法をカスタマイズすることもできます。
どんなショートコードオプションが使えるかは、Instagram Feed 設定画面の「3. Display Your Feed」タブで確認できます。
オプションコード
幅はデフォルトで100%に設定されているのでレスポンシブでスマホ対応(モバイルフレンドリー)なので、基本的には100%のままが良いでしょう。
少し、設定を変えてみます。
数を9、3列にしてみます。
[instagram-feed num=9 cols=3]
instafeed

Enjoy Instagram

サイドバーにしか使う予定がなければ Enjoy Instagram が簡単

icon-download Enjoy Instagram
プラグイン「Enjoy Instagram」をインストール及び有効化し、設定画面を開く。
01:Create an Instagram Application
02:Enter Your Client ID and Client Secret
Enjoy-Instagram 設定
とあります。
まず、インスタグラムアプリケーションを作成して、それからクライアントIDとクライアントシークレットを登録するようです。
[Create an Instagram Application]をクリックして、5項目名にある
「Website URL」と「Redirect URI」が後で必要になりますので、テキストエディタなどにコピーペーストしておきます。
Enjoy-Instagram

デベロッパーサイトでアプリケーションを作成する

icon-arrow-right Instagram Developers
Instagram-Developer
右上の[Register a New Client]をクリック。
Manage-Clients
「Application Name」と「Description」を記入する。
何でもかまいませんが、「Application Name」に Instagram、IG、insta、gram の文字は使用できないようになっています。
「Website URL」と「Redirect URI」に記入する文字は先程テキストエディタにコピーしておいたものをコピーペーストします。
Register-a-Client
CAPTCHA の数字を入力して[Register]ボタンをクリックするとアプリケーションが完成です。
Manage-Clients
ここで作られた「Client ID」と「Client Secret」をWordPress側のEnjoy Instagram 設定画面の[02:Enter Your Client ID and Client Secret]に記入して[Authorize Application]をクリックする。
Client ID Client Secret

インスタグラムの写真を記事に貼り付ける

Enjoy Instagram も記事やサイドバーに貼り付ける方法は簡単です。
[enjoyinstagram_mb]か[enjoyinstagram_mb_grid]と書くだけで表示できます。
※カッコは半角の [ ] に変えてください。

Enjoy Instagram の表示設定

設定画面でカルーセル表示、グリッド表示の設定を変えることができます。
Enjoy-Instagram設定
ショートコードでの細かな設定はできません。

インスタグラムに投稿した写真を1枚だけ記事に貼り付ける方法

 インスタグラムの写真や動画を自分のブログに貼り付ける[公式]方法
という記事も書きましたのでご参考に

まとめ

[st-kaiwa1]今回、2種類のインスタグラムウィジェットプラグインをご紹介しました。簡単に固定的なウィジェットを作るなら後者の Enjoy Instagram を、記事毎に異なる表示のウィジェットを使うなら前者の Instagram Feed を使うと良いです。Instagram Feed は記事内で使用、サイドバーには Enjoy Instagram を貼り付ける。という使い方もあります。Enjoy Instagram は、Google の PageSpeed Insights でひっかかるようなので外しました。[/st-kaiwa1]

関連記事

 Instagram動画をWordPressブログに埋め込む方法。
 インスタグラムをWordPressブログに埋め込み、サイズ指定方法!
 インスタグラムからシェア。アメブロ連携方法。
 インスタグラム埋め込みembedをブログに貼り付ける方法。
 インスタグラムの使い方