WordPressとInstagramを連携させるプラグイン。サイドバーへの追加方法。

スポンサーリンク

Instagramをサイドバーで表示させているブログを良く見かけるようになりました。
私も最近Instagramを始めたのでサイドバーに表示させてみたところ、やっぱりインパクト大きいですね〜♪
今回はそのInstagram(インスタグラム)とWordpressを連携させるプラグインをご紹介します。
プラグインのインストール後に少し設定が必要ですが、とても簡単なので是非試してみてください♪

WordPressとInstagramの連携

Instagram Feedのインストール

WordPressの管理画面からInstagram フィードをインストールします。
instagramfeed01

アクセストークンとユーザーIDの取得

Instagram フィードをインストールしただけでは使えません。
アクセストークンとユーザーIDを取得し、プラグイン側で設定する必要があります。

画面のボタン「Log in and get my Access Token and User ID」をクリックします。
instagramfeed02

Instagramのユーザー名とパスワードを入力しログインします。
instagramfeed03

認証画面で「Authorize」をクリックします。
instagramfeed04

WordPressの管理画面に戻ると、アクセストークン「Access Token」とユーザーID「User ID」が記載されています。
instagramfeed05

これらの文字列をそれぞれコピーし、次の画像を参考に適宜貼り付けます。
instagramfeed06

貼り付けたら「変更を保存」をクリックします。
instagramfeed07

Instagramをサイドバーに表示させる

引き続きプラグインの設定画面から、「3.Display Your Feed」タブを選択するとショートコードが表示されるので、まずは [instagram-feed]をコピーします。

上記ショートコード[instagram-feed]の[]←は半角に変更して貼り付けてください。
instagramfeed08

「外観」-「ウィジェット」から「テキスト」を表示させたいウィジェットエリアにドラッグし、先ほどのショートコードを貼り付け保存します。
instagramfeed09

私はサイドバーに指定したところこのように表示されました。
instagramfeed10

TeTsu
フォローボタンも表示されていてバッチリですね♪

ショートコードを少し変えて写真の表示数を変えることもできます。
ここでは、横☓3の全体で9マスにしてみます。
ショートコードは[instagram-feed num=9 cols=3]

上記ショートコード[instagram-feed num=9 cols=3]の[]←は半角に変更して貼り付けてください。
instagramfeed11

9マスはこんな感じです。
instagramfeed12

TeTsu
「Load More…」ボタンも自動で表示されていますね♪

まとめ

いかがでしたでしょうか。
流行りのSNSツールをブログに取り込むことによって、読者を引きつけるアクセントにもなるしInstagramからの流入も見込めます。
設定も簡単なので是非導入しましょう♪

スポンサーリンク

シェアはご自由に。

Wordpressテーマ「STORK」

STORK。それは幸せを運んでくれるコウノトリ。スマートフォンでの使用感にとことんこだわり、見た目のインパクトよりも「使いやすさ」「読みやすさ」にこだわったWordpressテーマです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

ブロガー&アフィリエイターとして活動している、もう少しで40才に届きそうな2児の父親。 ブログを通じてアフィリエイト、子育て・育児、生活に役立つ情報を仙台からお届けします。