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ページなどのタイムラインを表示させる方法を紹介していますので、興味がありましたら是非どうぞ。