WordPressにインスタグラムに投稿している写真を並べて表示させるプラグイン「Instagram Feed」の使い方

カメラを購入して晴れてインスタグラマーとして華々しくデビュー（笑）を飾った私でしたが、せっかくSNSをはじめたのならやっぱりブログとは連携しておきたいところ。

やりたかった事としてはインスタグラムに投稿している写真群をギャラリーのようにズラズラーっと並べて表示させたい。もちろんインスタグラムに新しく写真を投稿したらブログの方にも自動で表示されるように連携させたい。

そしたら良さそうなプラグインを見つけたので今回は、WordPressにインスタグラムに投稿している写真を並べて表示させるプラグイン「Instagram Feed」をご紹介します。

プラグインをインストールして有効化する

管理画面から【プラグイン】→【新規追加】で「Instagram Feed」と検索します。

「Instagram フィード」という名前のプラグインをインストールして有効化。

連携するための設定

まずはインスタグラムのアカウントとワードプレスを連携させる為の設定を行います。

管理画面のサイドバーに【Instagram Feed】という項目が増えているのでそこからInstagram Feedの設定画面へ行きます。「1.Configure」タブの【Log in and get my Access Token and User ID】をクリック。

パソコンでインスタグラムにログインしていない場合はここでユーザーネームとパスワードの入力を求められます。

ログインする、もしくは既にログインしている場合、次の画面で［Authorize］をクリック。

Instagram Feedの設定画面に戻ってきますので、表示されているアクセストークンとユーザーIDをコピペして下の入力欄に貼り付けます。

最後に『変更を保存』をクリック。これでインスタグラムのアカウントとワードプレスの連携の設定は完了です。

表示に関する設定

Instagram Feedの設定画面の「2.Customize」タブでブログに表示するインスタグラムのフィードに関する設定を行えます。

Customize

フィード全体の大きさと背景の色の設定。

Photos

フィードに表示する写真の大きさや枚数、どのように並べるかなどの設定。

Header

フィードのヘッダー部分（プロフィール写真とかアカウント名とか）の設定。

‘Load More’ Button

写真が指定の枚数を超えた時に表示される『続きを読む』ボタンの設定。

‘Follow’ Button

写真の後に表示されるフォローボタンに関する設定

ひとまずこのあたりの項目さえ押さえておけば自由にカスタマイズできると思います。

フィードを表示させる場所

インスタグラムのフィードを表示させたい箇所に［instagram-feed］のショートコードをコピペします。（※［］は半角に直してコピペしてください）

これでインスタグラムに写真を投稿する度にブログにもその写真が表示されるようになりました。

サイトで適用しているスタイルによってはレイアウトが崩れてしまう場合がありますので調整する必要があるかもしれません。私の場合はh3タグに適用しているスタイルがフィードのアカウント名のところに適用されてしまっています。

ただ、毎回記事の中にショートコードを入れていくというのは現実的ではないのでウィジェットにショートコードを入れてサイドバーに表示させるか、記事の後やフッダーといったテンプレート内に入れてしまうのが良いかと思います。

私はパソコン表示の際はサイドバーに、モバイル表示の場合はフッダーにインスタグラムのフィードを表示させています。

まとめ

以上、WordPressにインスタグラムに投稿している写真を並べて表示させるプラグイン「Instagram Feed」の紹介でした。

基本プラグインの表記は全て英語でしたが連携も設定も表示もさほど難しくはありませんでした。

インスタグラムに力を入れている人ならブログ上にギャラリーのようなものも作れそうです。是非試してみてください。