WordPressサイトのサイドバーやフッターにInstagramのフィードを表示させる方法をお探しの方向け。
- Instagramに投稿した写真をWordPressサイトに埋め込みたい。
- サイトに訪問したユーザーにInstagramの写真を見てもらいたい。
WordPressサイトやブログを運営していて、Instagram(インスタグラム)に写真を投稿している方は、このように考えたことはありませんか?
この記事では、Instagramのフィード(タイムライン)をWebページやウィジェット(サイドバー・フッター)に表示させる事ができるプラグイン「Instagram Feed」を紹介します。
好きなところから読めます
Instagramのフィード表示プラグイン「Instagram Feed」
Instagramのフィード表示プラグイン「Instagram Feed」を使うと、ショートコードを貼るだけで、Instagramのフィードを簡単に表示させる事ができます。
Instagram Feedの特徴
Instagram Feedの特徴は下記のとおりです。
- ショートコードを貼るだけで表示可能
- 表示させる写真の枚数を指定可能
- 写真表示の「列」の指定可能
- 写真のサイズの指定可能
シンプル操作で簡単に設定できます。
Instagram FeedはSmash Balloon Social Photo Feedに名称変更となりました
Instagram Feedは、「Smash Balloon Social Photo Feed」へと名称変更されました。
名称変更に伴い、Instagram Feedをアップデートせずに使っている方は、フィードが表示されなくなりますので、Instagram Feedをお使いの方は、プラグインをアップデートしましょう。
Smash Balloon Social Photo Feedに名称変更しても基本操作は同じ
Instagram FeedからSmash Balloon Social Photo Feedへと名称変更されましたが、ダッシュボードのメニューや、設定画面は「Instagram Feed」と表示されたままです。
Instagramのフィード表示プラグインSmash Balloon Social Photo Feedの設定手順
Instagramのフィード表示プラグインSmash Balloon Social Photo Feedの設定手順を解説します。
- 手順①:プラグインのインストール
- 手順②:プラグインとInstagramアカウントを接続
- 手順③:フィードを表示させるショートコードを取得
- 手順④:フィードを表示させたい場所にショートコードを貼り付ける
上記のとおりです。
手順①:プラグインのインストール
まずはプラグインをインストールします。
ダッシュボード>プラグイン>新規追加 を選択します。
プラグイン検索窓に「Smash Balloon Social Photo 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のフィードを表示するSmash Balloon Social Photo Feed(旧称:Instagram Feed)の設定方法を解説しました。
プラグインを使うことで、Instagramに投稿した写真をWordPressサイトに公開することができるようになります。
難しい設定は必要ありませんし、表示のカスタマイズもできますので、Instagramを活用したい方は、是非お試し下さい。