WordPressとInstagramを連携するプラグインInstagram Feed

様々なソーシャルメディアと連携するプラグインが豊富なWordPressですが、Facebookを抜く勢いのInstagramの投稿もプラグインを使うことでフィードを表示させることができます。
グルメ系のブログを開設した際に、投稿する写真が多かったりすると、インスタのリンクを貼り付けてシェアしてもらうなどできるので、とても便利です。
目次
Instagram Feedのインストール
WordPressのダッシュボードの「プラグイン」→「新規追加」をクリックします。
プラグインの検索ボックスに「Instagram Feed」と入力して検索すると、キーワードに合致したり類似するプラグインが全て表示されます。
その中で上記画像のプラグインの「今すぐインストール」ボタンをクリックします。
インストールが終わると、ボタンが「有効化」に変わるので、青くなったボタンをクリックします。
Instagram Feedが有効化され、「インストール済みプラグイン」の画面が表示されます。
プラグインのメニューをクリックして、プラグインの一覧を見ると、Instagram Feedが有効化された状態で表示されています。
Instagram Feedの設定
Instagramアクセストークンの取得
プラグインとInstagramを連携するために、まずはInstagramトークを取得します。
メニューの「Instagram Feed」をクリックします。
Instagram Feedの設定画面が開くので、Instagramにブラウザでログインした状態で、画面の青いボタンをクリックします。
Instagramの認証画面が表示されるので、連携したいアカウントが正しいかを確認して、問題がなければAuthorizeボタンをクリックします。
認証(Authorize)ボタンをクリックしてしばらくしたら、元の画面が表示されて、アクセストークンが入力された状態になるので、「変更を保存」ボタンをクリックします。
表示設定
設定は以上で完了です。
Instagram Feedを表示
フィードを表示させるには、InstagramFeed設定画面の「3.Display Your Feed」タブに表示されているMultipleFeedsのタグを使います。
基本埋め込みタグ
1 2 3 |
[instagram-feed] [instagram-feed id="ANOTHER_USER_ID"] [instagram-feed id="ANOTHER_USER_ID, YET_ANOTHER_USER_ID" num=4 cols=4 showfollow=false] |
その他表示に関するいろいろな設定ができるので、詳しくはInstagramFeedの設定画面を参照してください。
投稿ページに表示
ページに下記のタグを埋め込んでみましょう
1 |
[instagram-feed] |
プラグインテスト用ページに埋め込んでみました。
クリックしてみてください。
ウィジットに表示
メニューの「外観」→「ウィジェット」をクリックします。
ウィジェット設定画面が表示されたら「カスタムHTML」を選択します。
次に埋め込みたい場所の名称を選択して、「ウィジェットを追加」ボタンをクリックします。
ここでは、フッターエリアを選択してみましょう。
ウィジェット追加後に対象のウィジェット設定ウィンドウが表示されるので、内容の箇所にInstagramのタグを入力します。
保存が完了したら、公開ページの対象のエリアを表示してみましょう。
お~!ちゃんと表示されましたね。
まとめ
投稿する写真の容量が増えてくるとサーバーの容量も圧迫してくるので、写真や動画などのメディアは外部SNSなどを活用するといいですね。