プラグイン
InstagramをWordPressに表示できる「Instagram Feed」が便利すぎた!
2018年09月25日 8:00 2018年09月28日
こんにちは!最近金のミルクという飴にハマっている社員Aです👩
ノーマルなミルク味と抹茶味があり、やみつきになるくらい美味しいです🍬
さて、今回はInstagram(インスタグラム)の写真をサイトに表示できるWordpressプラグイン「Instagram Feed」の使い方について書いていきます!
サイトデザインでInstagramの組み込みが必要な案件は、すべてこのプラグインを使って表示しています。
一度使い方を覚えるととても簡単なので、ぜひご覧ください!
もくじ
InstagramをWordpressに表示できる「Instagram Feed」の使い方
Instagramにアップした投稿をリアルタイムでサイトに表示することで、Instagramのフォロワー数増加や、集客にも繋がります。
ここからはプラグインの設定・表示方法について説明していきます。
1.プラグインをインストール
まずは「Instagram Feed」をインストールし、有効化します。
WordPress管理画面のプラグインから「Instagram Feed」を検索し、有効化してください。
2.プラグインとInstagramアカウントを提携する
プラグインを有効化すると、ダッシュボードのサイドメニューに「Instagram Feed」が表示されますので、クリックします。
設定画面が開きますので、まずは「Log in and get my Access Token and User ID」のボタンをクリックします。
Instagramへのログインが促されますので、提携したいアカウントでログインしてください。
Instagramへログインすると、下記のようなポップアップが表示されますので、緑色の「Authorize」ボタンをクリックします。
ボタンを押すと自動的にリダイレクトされ、提携が完了しました。
3.表示のカスタマイズ
アカウント提携が終わりましたら、続けて表示のカスタマイズをします。
上部のタブで「2.Customize」に切り替えてください。
ここでは、Instagramをサイトに表示するときにどのような見た目にしたいかを設定できます。
- Width of Feed(フィードの横幅)
- Height of Feed(フィードの縦幅)
- Background Color(背景色)
- Number of Photos(写真の表示枚数)
- Number of Columns(列の数)
- Padding around Images(写真の周りの余白)
- Disable mobile layout(モバイルレイアウト)
4.ショートコードでサイトに表示する
上部のタブを「3.Display Your Feed」に切り替えると、ショートコードが表示されていますのでサイトに貼り付けることで、リアルタイムでInstagramの投稿を表示することが出来ます。
[instagram-feed]
また、このショートコードには様々な引数が利用でき、好みにカスタマイズできます。
オプションは下記です。
ショートコードオプション | 説明 | 例 |
---|---|---|
幅 | フィードの幅。数値を入力。 | width=50 |
幅単位 | 幅の単位。’px’または ‘%’ | widthunit=% |
高さ | フィードの高さ 数値を入力。 | height=250 |
高さ単位 | 高さの単位。’px’または ‘%’ | heightunit=px |
バックグラウンド | フィードの背景色。任意の16進数のカラーコード。 | background=#ffff00 |
クラス | CSSクラスをフィードコンテナに追加する | class=feedOne |
並び替え | 最新のものから最古のもの(なし)またはランダム(ランダム) | sortby=random |
1つで | 最初に表示する写真の数。最大値は33です。 | num=10 |
首輪 | フィード内の列の数。1〜10。 | cols=5 |
imageres | 写真の解像度/サイズ。’auto’、full ‘、’ medium ‘、’ thumb ‘のいずれかです。 | imageres=full |
imagePadding | 写真の周りのスペース | imagepadding=10 |
imagepaddingunit | 詰め物の単位。’px’または ‘%’ | imagepaddingunit=px |
disablemobile | モバイルレイアウトを無効にします。trueもしくはfalse。 | disablemobile=true |
ショーヘッダー | フィードヘッダーを表示するかどうか。trueもしくはfalse。 | showheader=false |
ショービオ | ヘッダーにbioを表示します。trueもしくはfalse。 | showbio=true |
見出し | ヘッダーのサイズ。小、中、または大から選択してください。 | headersize=medium |
ヘッドカラー | ヘッダーテキストの色。任意の16進数のカラーコード。 | headercolor=#333 |
ショーボタン | 「詳細をロード」ボタンを表示するかどうか。trueもしくはfalse。 | showbutton=false |
ボタンカラー | ボタンの背景色です。任意の16進数のカラーコード。 | buttoncolor=#000 |
ボタンテキストカラー | ボタンのテキストの色です。任意の16進数のカラーコード。 | buttontextcolor=#fff |
ボタンテキスト | ボタンに使用されるテキスト。 | buttontext=”Load More Photos” |
ショーフォロー | 「Instagramに従う」ボタンを表示するかどうか。trueもしくはfalse。 | showfollow=false |
フォローカラー | ボタンの背景色です。任意の16進数のカラーコード。 | followcolor=#ff0000 |
フォローテキストカラー | ボタンのテキストの色です。任意の16進数のカラーコード。 | followtextcolor=#fff |
続く | ボタンに使用されるテキスト。 | followtext=”Follow me” |
デフォルトでは、下記のような見た目になります。
ヘッダー部分はいらないので、引数にshowheader=falseを指定すると、写真だけがすっきり表示できます。
まとめ
プラグインを使うだけで、簡単にInstagramの投稿が表示できるので便利ですね。
アカウント連携もログインするだけでできるので、Wordpress初心者の方でも簡単に設定できます。
Instagramにアップした投稿をリアルタイムでサイトに表示することで、Instagramのフォロワー数増加や、集客にも繋がりますので是非試してみてください!

無料でここまでカスマイズできるのはすごい!
関連記事
この記事を書いた人
universe