WordPressでInstagramフィードを表示するプラグイン”Instagram Feed”の使い方

[Last Updated]2018/02/13

Instagramフィード

最近ネットでブログを見てみると、Instagramのフィードを設定しているところが増えていますよね。

Instagramは写真に特化したSNSで今や世の若者はTwitterやFacebookよりもInstagramを好んで使う傾向にあります。

ということで今回は、そんな流行のInstagramのフィードをWordPressで表示できるプラグイン・”Instagram Feed”の使い方と設定方法について解説してみました。

InstagramのフィードをWordPressに埋め込むプラグインは数多くありますが、今のところこれよりも細かくてかゆいところに手が届くような機能をもっているやつはありません。

自信を持ってオススメできるプラグインです。

 

WordPressでInstagramフィードを表示するプラグイン”Instagram Feed”

Instagram Feedの使い方

まずはWordPressのメニューから「プラグイン」⇒「新規追加」で”Instagram Feed“をインストールして有効化しましょう。

やり方が分からない方は下の記事を参考にしてみてください。

⇒ WordPressにプラグインをインストールする方法と注意点

 

“Instagram Feed”の使い方と設定方法

Instagram Feedの設定

インストールができたら「プラグイン」⇒「インストール済みプラグイン」から”Instagram Feed“を探して”Setting“を押しましょう。

Instagram Feedの使い方

 

すると次のような画面になるので、”1. Configure“のタブの中にある”Log in and get my Access Token and User ID“をクリックします。

Instagram Feedの使い方

 

ここでInstagramへのログインが求められますが、そのまま画面の通りに進んでいくと下の”Acsess Token“と”User ID“のところに、勝手に文字列が表示されるので、これらを下の画像の通りにコピペしましょう。

Instagram Feedの使い方

これで準備完了です。

 

Instagram Feedの使い方

それでは次にいよいよInstagramのフィードをブログの好きな位置に貼ってみましょう。

まずは”3. Display Your Feed“を開いて、そこに表示されるコードをコピーします。

Instagram Feedの使い方

 

で、後はこれをブログの投稿画面とか好きな位置に貼るだけ。

Instagram Feedの使い方

 

すると、

こんな感じで超簡単にInstagramのフィードを埋め込むことができます。

 

もちろんサイドバーのウィジットでも簡単にできます。

Instagram Feedの使い方

めちゃくちゃ簡単ですね。

 

Instagramフィードをカスタマイズ

とまあこんな感じで超簡単に自分のInstagramのフィードをブログの好きな位置に表示させられるプラグインなのですが、このプラグインの素晴らしいところはそのカスタマイズの豊富さ。

  • 表示する写真の枚数
  • 横の枚数
  • プロフィールの表示の有無
  • 背景色
  • 写真と写真との幅

などなど、むちゃくちゃ細かく設定できてしまうのです。

それでは細かい設定について見ていきましょう。

 

General(一般設定)

フィードのカスタマイズをするには”2. Customize“を開きます。

Instagram Feedの使い方

“General”の項目では画像の通り

  • 横幅
  • 縦幅
  • 背景色

を設定できます

 

Layout(レイアウト)

下にいって”Layout”の項目では

  • Number of Photos:表示する写真の枚数
  • Number of Columns:横のコラムの数
  • Padding around Images:写真の周りのスペーす
  • Disable mobile layout:スマホ用のレイアウト解除

の設定ができます。

スマホ用のレイアウト解除ではチェックありとチェックなしで以下のように変わります。

Instagram Feedの使い方

お好きなほうを選択して下さい。

 

Photos(写真)

Instagram Feedの使い方

“Photos”の項目では

  • Sort Photos By:写真の表示順(新しい順・古い順)
  • Image Resolution(写真の大きさ)

の変更ができます。

 

Header(ヘッダー)

Instagram Feedの使い方

“Header”の項目ではフィードを埋め込むと写真の上に表示される自分のアカウントのプロフィール写真とか、説明文についての設定ができます。

  • Show the Header:ヘッダーを表示する
  • Show Bio Text:プロフィールを表示する
  • Header Text Color:ヘッダーの背景色

個人的にはヘッダーは表示してプロフィール文は非表示がいいですかね。

 

‘Load More’ Button&’Follow’ Button(もっと見るボタンとフォローボタン)

Instagram Feedの使い方

こちらの項目ではフィードを埋め込んだ時に下に現れる「もっと見る」や「フォローする」のボタンの変更ができます。

お好みに合わせて設定してみて下さい。

 

その他の細かい設定

これだけできればもうほぼ言うことないんですが、“Instagram Feed”はまだまだすごい。

先程開いた”3.Display your Feed“から下のほうにいくと複数のデザインのフィードをブログ内で使い分けるためのショートコードが用意されています。

Instagram Feedの使い方

これを使えば例えば、「サイドバーウィジットに載せるのは3×3のヘッダーありで、記事の下に載せるのは2×5のヘッダーなしに設定する」みたいな細かいことも可能。

・縦2×横5でヘッダーなしのフィード

コード:instagram-feed showheader=false num=10 cols=5 (本来なら[]で囲む)

Proの有料版にしないと使えない機能もありますが、ここまで細かいところに手が届くなんて最高です。(有料版は一月$39から)

 

まとめ:インスタでブログをおしゃれに

ということで今回はWordPressにInstagramのフィードを表示させることができるプラグインである”Instagram Feed”の使い方をご紹介しました。

今のSNSはツイッターやFacebookからどんどんInstagramにシフトしてきていて、Webのマーケティングをするならインスタは絶対に欠かせません。

Instagramのフィードを使ってブログをどんどんおしゃれに仕上げていきましょう!

     
nomadic wood

[Created]2018/02/13[Last Updated]2018/02/13 | Posted in Plugin
   

Related Posts