【WordPress】サイドバー・本文にInstagramを表示!

★記事が気に入ったらシェアお願いします★

instagram-feed4

サイドバーにInstagramの画像を表示したい!

私はInstagramでも色々写真を公開しているのですが、その写真をこのブログで簡単に紹介したかったのでその方法を探してみました♪

WordPressを使用しているなら“InstagramFeed”と言うプラグインがどうやら良さそうです。
ただこの方法はWordPressにしか対応していないので、FC2やはてなブログ、アメブロなどを利用している方、プラグインでエラー等が出る方は“SnapWidget”“WEBSTA”などが使いやすくて良いかも?

ただこの2つは直接インスタグラムのページに飛ぶのではなく、一度外部に飛んじゃうのでWordPressならプラグインの方が断然良いです♪
Simplicityでも問題なく動いています。

ではでは早速導入方法をご紹介!

  InstagramFeedをインストール

インストールはいつも通り、WordPressのダッシュボードから行います。

 

左のツールバーから“プラグイン”を選択 → “新規追加”

“Instagram Feed”と入力して検索。
この時“Instagram”と“Feed”の間にスペースを入れないと検索にヒットしないのでご注意。

instagram-feed1

 

検索すると下の様な検索結果が出るので、“今すぐインストール”をクリックするとインストールされます。

instagram-feed2

 

インストールが完了しましたと出たら完了です!
“プラグインを有効化する”をクリックして有効化しましょう。

instagram-feed3

 

  InstagramFeedの設定

プラグインを有効化すると左のツールバーの設定の下に“InstagramFeed”という項目が追加されます。
これを選択すると設定ページに移るので、早速設定していきましょう。

  基本設定

InstagramFeedはプラグインをインストールしただけでは使用できません。
まず基本設定を行いましょう。

 

下の大きなバナーをクリックし、“アクセストークン”“ユーザーID”をゲットします。

instagram-feed-configure1

 

下の様な画面に移るので、“Authorize”をクリック。

instagram-feed-configure2

 

すると下の様にアクセストークンとユーザーIDが表示されるので、コピー&ペーストでそれぞれ入力します。

instagram-feed-configure3

 

またその下に2つ項目がありますが、これらは空欄のままで大丈夫です。
以上を設定したら、“変更を保存”で完了です!

instagram-feed-configure4

 

これで

 というショートコードを記事やサイドバーに入力するだけで、そこにあなたのInstagram情報が表示されます。

 

  表示のカスタマイズ

InstagramFeedでは表示方法をカスタマイズできます。

何もせずデフォルトのままだと下の様になりますが、サイドバー等に表示させる場合は小さくカスタマイズすると良いでしょう♪

instagram-feed-customize1

 

カスタマイズするには、設定項目の中の“Customize”タブをクリックします。

instagram-feed-customize2

 

1.カスタマイズ

instagram-feed-customize3

Width of Feed : 横幅の設定。基本は100%で大丈夫で、スマホ等レスポンシブ対応です。

Height of Feed : 縦幅の設定。

背景色 : 背景色の設定。デフォルトで透明です。

 

2.Photos

instagram-feed-customize4

Sort Photos By :

Newest to oldest で新しい投稿から順番に表示。
ランダム でランダム表示。

Enable Pop-up Lightbox : Proで使用出来る為不明…

Number of Photos : 表示させる写真の総数。

Number of Columnes : 横に並べる写真数。

Image Resolution : 写真のサイズ。 Auto… で横幅に合わせて自動調整。

Padding around Images : 写真周囲の余白。空欄で余白無しになります。

Disabele mobile layout : デフォルトで自動的にモバイル対応。チェックを入れるとカスタマイズが適応されるのだと思います。

 

3.Carousel 5.キャプション 6.Links & Comments

Proで使用可能な為不明です…

 

4.ヘッダー

instagram-feed-customize5

Show the Header : チェックを入れると写真の上にプロフィール情報等を表示。

ヘッダーテキスト色 : 名前、プロフィールの文字色。

 

7.“Load More” Button

instagram-feed-customize6

Show the “Load More” button : 更に他の写真を表示させるボタンを追加。ボタンクリックで、表示数だけ追加されます。

Button Background Color : ボタン色。デフォルトで黒。

Button Text Color : ボタンテキスト色。デフォルトで白。

Button Text : ボタンに書かれている文字。デフォルトで「Lord More…」

 

8.“Follow on Instagram” Button

instagram-feed-customize6

Show the Follow button : フォローページに移動するボタンを表示。

Button Background Color : ボタン色。デフォルトで薄い青。

Button Text Color : ボタンテキスト色。デフォルトで白。

Button Text : ボタンに書かれている文字。デフォルトで「Follow on instagram」

 

9.Post filtering

Proで使用可能。
投稿に含まれる文字やハッシュタグを指定して、表示や非表示を指定出来る模様。

 

10.Moderation

Proで使用可能。
投稿を指定して、表示や非表示を指定出来る模様。

 

11.Misc

Proで使用可能。
CSSやJava scriptが使用出来るのかな?

 

以上でカスタマイズ完了です。

 を挿入して表示を確認してみましょう。

 

  個別にカスタマイズ

 さて、上記で設定したカスタマイズですが、上記の設定は全体での設定となります。

サイドバーで表示しているけど、記事中にも別のカスタマイズで表示したいと言う場合は、ショートコードを変更しましょう。

 

設定項目の中の“Display your Feed”をクリックすると自分のコードが表示されます。

この中にある様々なショートコードを組み合わせる事で、上のカスタマイズを個別に設定する事ができます。

ちなみに赤でマスク掛けされている物はProで使用出来る物なので、無料版の方は利用出来ません。

 

一応参考として・・・

 

いかがでしょうか?
上の様にショートコードを追加するだけで、本文にも表示させる事が出来ます。

 

ちなみに通常の設定は、右のサイドバーの物です。

サイドバーにはテキストウィジェットを使用して、下の様にショートコードを入れているだけです。

instagram-feed5

 

以上で“InstagramFeed”の設置は完了です!

良かったら皆さんフォローしてね♪

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメント

  1. 寺井幸平 より:

    はじめまして。
    これからブログを始めようとしています。

    参考になりました。
    ありがとうございます。

  2. key より:

    ありがとうございます!おかげでサイトにインスタフィードを貼り付けることができました♪
    こんな感じです。
    http://larbre-flower.com/24deli/
    フッターに貼り付けています♪

コメントをどうぞ

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