【プラグイン】インスタ投稿をWordPressサイトに埋め込むInstagramフィード

    icon-clock-o読了時間:約5分57秒

このブログの右サイドバーの中には、自社のTwitterタイムラインを埋め込んでいるのですが、
同じようにInstagramも埋め込めるのでは?と思いつき、
使いやすそうなプラグインを探してみたので設定方法などをご紹介したいと思います。

 目次 

インストール&有効化
Instagramフィードの設定
1.アカウント連携とショートコードの記述
2.【 Customize 】で表示形式を変える
3.【 Display your Feed 】でフィードを呼び出す


インストール&有効化

サイドメニューのプラグイン:新規追加をクリックして
【 Instagram 】や【 Instagram Feed 】で検索、インストール後に【 有効化 】します。
※同名のプラグインが他にもあるので、間違えないように
以下のアイコン画像のプラグインをインストールしてください。
Instagramフィード・インストール&有効化


Instagramフィードの設定;
1.アカウント連携とショートコードの記述

プラグインを有効化した後、表示される『 インストール済みプラグイン 』の中から
Instagram Feedの【 settings 】をクリック、
もしくはサイドメニューの【 Instagram Feed 】をクリック。

Instagram フィードの設定画面が表示されるので、
まずはInstagramアカウントとの連携を行います。

【 Connect an Instagram Account 】をクリックするとInstagramのログイン画面に移動するので
ログインをクリックします。
Instagramフィード・アカウント連携

プラグインがメディアとプロフィール情報へのアクセスの権限を求めています、
という画面が出るので【 Authorize(許可) 】をクリック。
プラグインとInstagramの連携許可
連携ができると、アカウント情報が表示されます。
Instagramフィードのアクセストークン
アクセス トークンとは、Webサービスを利用するためのユーザー認証に必要な認証情報のこと。
今回の場合だと、Instagramで自分が投稿した内容などを
WordPressに呼び出すために必要な許可証みたいなものですね。
これを他の人に知られてしまうと、第三者に勝手に自分のInstagramフィードを呼び出されて
悪用されないとも限らないのでご注意ください。

更に下の方を見ると、プラグイン設定の保持をするかどうかの設定項目があります。
Instagramフィード設定
設定のどのページを開いても、最下部にこの【  icon-rocket Display your feed 】が表示されています。
このショートコード(プログラム呼び出しの合図のようなもの)を
記述した場所にInstagramフィードが呼び出されます。

↓ 例としてココにショートコードを入れたので、弊社のInstagram投稿が表示されているはず。
[instagram-feed] 右のサイドバーの中にも同じコードで埋め込んでいます。
幅をパーセンテージで指定しているので、それぞれの幅に自動でサイズ変更されているはず。


Instagramフィードの設定;
2.【 Customize 】で表示形式を変える

問題なくショートコードで自分のInstagramフィードが表示されたら、
次は上部の【 Customize 】タブから、表示形式などの細かな設定を変えてみましょう。

※いずれも設定を変えたら【 変更を保存 】をクリックすることを忘れずに。

General(一般)とLayout(レイアウト)

フィードの幅、高さ、背景色、表示する画像の数などを変更できます。
Instagramフィード設定01

Photos(投稿写真)とHeader(ヘッダー)

ヘッダーに問い合わせ先を記載している店舗などであれば
ヘッダーテキストは表示したほうが良いですが、
個人のアカウントであれば 『 Show Bio Text 』 のチェックを外して
自己紹介文のテキストを非表示にしても見た目がスッキリして良いかも。
Instagramフィード設定02

‘Load More’ Button(【もっと見る】ボタン)

『 Load More… 』の文字は日本語にも変更可能です。
Instagramフィード設定03

‘Follow’ Button(【フォロー】ボタン)

『 Follow 』の文字は日本語にも変更可能です。
Instagramフィード設定04

Misc(その他の設定)

その他の設定は、特にこだわりが無ければ全てこのままで良いかと思います。
SVGからアイコンフォントにアイコン画像を変えたら
何か良いことがあるのかが良く分かりません…_(:3 」∠)_
Instagramフィード設定05


Instagramフィードの設定;
3.【 Display your Feed 】でフィードを呼び出す

『 instagram-feed 』のみを記述して普通にフィードを呼び出す以外にも、
表内に記載されているオプション付きのショートコードを使うと、
複数アカウントの使い分けや、記述する場所ごとの幅の設定もできます。

【 instagram-feed accesstoken=”XXXXXXXXXX” 】のショートコードで
XXXの部分に自分のアクセストークンを記述すると、呼び出すアカウントを選択できます。
複数のInstagramアカウントを持っていて、それぞれを自分のWordPressサイトに呼び出したい時に便利ですね。
Instagramフィードの設定・呼び出しショートコード

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket