InstagramをWordPressに表示できる「Instagram Feed」が便利すぎた!

プラグイン

InstagramをWordPressに表示できる「Instagram Feed」が便利すぎた!

2018年09月25日 8:00 2018年09月28日

InstagramをWordPressに表示できる「Instagram Feed」が便利すぎた!

こんにちは!最近金のミルクという飴にハマっている社員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をサイトに表示するときにどのような見た目にしたいかを設定できます。

  1. Width of Feed(フィードの横幅)
  2. Height of Feed(フィードの縦幅)
  3. Background Color(背景色)
  4. Number of Photos(写真の表示枚数)
  5. Number of Columns(列の数)
  6. Padding around Images(写真の周りの余白)
  7. Disable mobile layout(モバイルレイアウト)

 

4.ショートコードでサイトに表示する

上部のタブを「3.Display Your Feed」に切り替えると、ショートコードが表示されていますのでサイトに貼り付けることで、リアルタイムでInstagramの投稿を表示することが出来ます。

また、このショートコードには様々な引数が利用でき、好みにカスタマイズできます。

オプションは下記です。

ショートコードオプション 説明
フィードの幅。数値を入力。 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のフォロワー数増加や、集客にも繋がりますので是非試してみてください!

無料でここまでカスマイズできるのはすごい!

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!