このブログの右サイドバーの中には、自社のTwitterタイムラインを埋め込んでいるのですが、同じようにInstagramも埋め込めるのでは?と思いつき、使いやすそうなプラグインを探してみたので設定方法などをご紹介したいと思います。
インストール&有効化
サイドメニューのプラグイン:新規追加をクリックして【 Instagram 】や【 Instagram Feed 】で検索、インストール後に【 有効化 】します。
※同名のプラグインが他にもあるので、間違えないように、以下のアイコン画像のプラグインをインストールしてください。
Instagramフィードの設定;1.アカウント連携とショートコードの記述
プラグインを有効化した後、表示される『 インストール済みプラグイン 』の中からInstagram Feedの【 settings 】をクリック、
もしくはサイドメニューの【 Instagram Feed 】をクリック。
Instagram フィードの設定画面が表示されるので、まずはInstagramアカウントとの連携を行います。
【 Connect an Instagram Account 】をクリックするとInstagramのログイン画面に移動するのでログインをクリックします。
プラグインがメディアとプロフィール情報へのアクセスの権限を求めています、という画面が出るので【 Authorize(許可) 】をクリック。
連携ができると、アカウント情報が表示されます。
アクセス トークンとは、Webサービスを利用するためのユーザー認証に必要な認証情報のこと。
今回の場合だと、Instagramで自分が投稿した内容などをWordPressに呼び出すために必要な許可証みたいなものですね。
これを他の人に知られてしまうと、第三者に勝手に自分のInstagramフィードを呼び出されて悪用されないとも限らないのでご注意ください。
更に下の方を見ると、プラグイン設定の保持をするかどうかの設定項目があります。
設定のどのページを開いても、最下部にこの【 Display your feed 】が表示されています。
[instagram-feed]⇐このショートコード(プログラム呼び出しの合図のようなもの)を記述した場所にInstagramフィードが呼び出されます。
Instagramフィードの設定;2.【 Customize 】で表示形式を変える
問題なくショートコードで自分のInstagramフィードが表示されたら、次は上部の【 Customize 】タブから、表示形式などの細かな設定を変えてみましょう。
※いずれも設定を変えたら【 変更を保存 】をクリックすることを忘れずに。
General(一般)とLayout(レイアウト)
フィードの幅、高さ、背景色、表示する画像の数などを変更できます。
Photos(投稿写真)とHeader(ヘッダー)
ヘッダーに問い合わせ先を記載している店舗などであればヘッダーテキストは表示したほうが良いですが、個人のアカウントであれば 『 Show Bio Text 』 のチェックを外して自己紹介文のテキストを非表示にしても見た目がスッキリして良いかも。
‘Load More’ Button(【もっと見る】ボタン)
『 Load More… 』の文字は日本語にも変更可能です。
‘Follow’ Button(【フォロー】ボタン)
『 Follow 』の文字は日本語にも変更可能です。
Misc(その他の設定)
その他の設定は、特にこだわりが無ければ全てこのままで良いかと思います。
SVGからアイコンフォントにアイコン画像を変えたら何か良いことがあるのかが良く分かりません…_(:3 」∠)_
Instagramフィードの設定;3.【 Display your Feed 】でフィードを呼び出す
『 instagram-feed 』のみを記述して普通にフィードを呼び出す以外にも、表内に記載されているオプション付きのショートコードを使うと、複数アカウントの使い分けや、記述する場所ごとの幅の設定もできます。
【 instagram-feed accesstoken=”XXXXXXXXXX” 】のショートコードでXXXの部分に自分のアクセストークンを記述すると、呼び出すアカウントを選択できます。
複数のInstagramアカウントを持っていて、それぞれを自分のWordPressサイトに呼び出したい時に便利ですね。