【2020】Amazonブラックフライデーでお得に買い物する方法

【WordPress】Instagramのフィードを表示するプラグイン「Instagram Feed」の設定方法を解説

【WordPress】Instagramのフィードを表示するプラグイン「Instagram Feed」の設定方法を解説WordPress

WordPressサイトを運営しており、サイドバーやフッターにInstagramのフィードを表示させる方法をお探しの方向け。

 

  • Instagramに投稿した写真をWebサイトに埋め込みたい。
  • WebサイトのユーザーにInstagramの写真を見てもらいたい。

Webサイトやブログを運営していて、Instagram(インスタグラム)に写真を投稿している方は、このように考えたことはありませんか?

この記事では、Instagramのフィード(タイムライン)をWebページやウィジェット(サイドバー・フッター)に表示させる事ができるプラグイン「Instagram Feed」をご紹介します。

このプラグインはたまにエラーを起こしますので、もし、表示されないときは公式サイトの更新ログを確認して下さい。
https://smashballoon.com/instagram-feed/change-log/
スポンサーリンク

Instagram Feedならシンプル操作でInstagramの画像を綺麗に表示できる

「Instagram Feed」は、Instagramのフィード(タイムライン)をショートコードを貼り付けるだけで簡単に表示させる事ができる、無料のWordPressプラグインです。

 

表示させる写真の枚数、写真表示の列、写真のサイズ等も簡単に設定できますので、「InstagramのフィードをWebサイトに表示させたい!」という方にはおすすめです。

それでは早速、Instagram Feedを使って、WebサイトにInstagramのフィードを表示させてみたいと思います。

 

Instagramのフィード表示プラグインInstagram Feedの設定手順

Instagramのフィード表示プラグインInstagram Feedの設定手順を解説します。

  • 手順①:プラグインのインストール
  • 手順②:プラグインとInstagramアカウントを接続
  • 手順③:フィードを表示させるショートコードを取得
  • 手順④:フィードを表示させたい場所にショートコードを貼り付ける

上記のとおりです。

手順①:プラグインのインストール

まずはプラグインをインストールします。

ダッシュボード>プラグイン>新規追加 を選択します。

プラグイン検索窓に「Instagram Feed」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。

インストール終了後「有効化」をクリックして、プラグインを有効化します。

左側メニューに、「Instagram Feed」という項目が追加されたことが確認できればOKです。

手順②:プラグインとInstagramアカウントを接続

プラグインとInstagramのアカウントを接続します。

ダッシュボード>Instagram Feed を選択します。

「Configure」の[Connect an Instagram Account]というボタンをクリックします。

Instagramのアカウントにログインするよう求められますので、①メールアドレスと、②パスワードを入力し、③ログインをクリックします。

ログイン後、下図のような接続確認の画面が表示されますので、「Authorize」をクリックします。

接続が成功すると、Instagram Feedの設定画面にInstagramアカウントが表示されます。

以上でプラグインとInstagramアカウントの接続は完了です。

手順③:フィードを表示させるショートコードを取得

Instagramのアカウントを接続したら、Instagramのフィードを表示させることができるショートコードを取得します。

ショートコードは設定画面の下の方にあります。

ちなみに、Instagram Feedは特に設定しなくてもそのまま使う事ができますが、いくつか設定項目がありますので一応解説しておきます。

各項目の内容は次のとおりです。

  • ①Preserve settings when plugin is removed:チェックを入れるとプラグイン削除時の設定が保存され、再インスト―ル時に削除前と同じ設定を引き継ぐことができます。
  • ②Are you using an Ajax powered theme?:使用しているテーマがAjaxを使用している時はチェックを入れて下さい(分からない場合はテーマ作成者にご確認下さい)。
  • ③Check for new posts every:キャッシュの時間を設定できます。初期設定では1時間です(1時間毎にキャッシュをクリアして更新情報を取得します)。
  • ④変更を保存:設定の保存ボタン
  • ⑤[Instagram-feed]:このショートコードをWebページやウィジェットに貼り付けることで、Instagramのフィードを表示させる事ができます。

手順④:フィードを表示させたい場所にショートコードを貼り付ける

Instagramフィードを表示させたい場所にショートコードを貼り付けます。

  • Webページにフィードを表示する方法(投稿・固定ページ共通)
  • ウィジェット(サイドバー・フッター)にフィードを表示する

上記の順に貼り付け方を解説します。

Webページにフィードを表示する方法(投稿・固定ページ共通)

フィードを表示させたいページの編集画面で「手順③:フィードを表示させるショートコードを取得」で取得したショートコードを貼り付け、公開・更新ボタンをクリックします。

プレビューで確認すると、下図のようにWebページにInstagramのフィードが表示されていることが確認できます。

ウィジェット(サイドバー・フッター)にフィードを表示する

次に、サイドバーにフィードを表示する方法を解説します。

サイドバーのウィジェットポジションにテキストウィジェットをセットし、「手順③:フィードを表示させるショートコードを取得」で取得したショートコードを貼り付けて保存ボタンを押します。

フッターに表示させたい場合は、フッターポジションにテキストウィジェットをセットして下さい。

プレビューで確認すると、下図のようにサイドバーにInstagramのフィードが表示されていることが確認できます。

このように、ショートコードを貼り付けるだけで簡単にInstagramのフィードを表示させることができます。

 

まとめ

以上、WordPressサイトにInstagramのフィードを表示するInstagram Feedの設定方法を解説しました。

プラグインを使うことで、Instagramに投稿した写真をWordPressサイトに公開することができるようになります。

難しい設定は必要ありませんし、表示のカスタマイズもできますので、Instagramを活用したい方は、是非お試し下さい。

 

ちなみに、以下の記事でTwitterやFacebookページなどのタイムラインを表示させる方法を紹介していますので、興味がありましたら是非どうぞ。

 

人気記事【Twitter】効率的にフォロワーを増やすアカウント運用ツール「SocialDog」

人気記事【無料あり】オンラインプログラミングスクールおすすめ3選【通学不要】

トップへ戻る
タイトルとURLをコピーしました