Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

WordPressサイトにInstagram(インスタグラム)のフィードを表示させるプラグイン「Instagram Feed」の使い方と設定方法を解説

WordPressプラグイン
  • Instagramに投稿した写真をウェブサイトに埋め込みたい
  • ウェブサイトのユーザーにInstagramの写真を見てもらいたい

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

今回は、Instagramのフィード(タイムライン)をウェブページやウィジェット(サイドバー・フッター)に簡単に表示させる事が出来るプラグインをご紹介します。

「Instagram Feed」を配布している Smash Balloon LLC は12月11日、公式サイトで「既存のAPIを大幅に変更する予定があり、この日付以降は機能しなくなる。」と発表しました。
https://smashballoon.com/instagram-api-changes-dec-11-2018/
現在、Instagram feedを接続しようとすると、エラーが表示されます。プラグインのアップデートは今後数週間以内に実行されるとの事です。

「Instagram Feed」ならシンプル操作で綺麗に表示される

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

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

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

Instagram Feedのインストール

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

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

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

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

Instagramアカウントの接続

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

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

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

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

「Authorize」をクリックします。

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

Instagramのフィードを表示させる

Instagramのアカウントを接続したら、Instagramのフィードを表示させることができるショートコードを取得します。ショートコードは設定画面の下の方にあります。

設定する必要は殆どありませんが、この画面にいくつか設定項目がありますので解説しておきます。

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

ウェブページ(投稿・固定ページ共通)、ウィジェットにInstagramフィードを表示させる

ウェブページ(投稿・固定ページ共通)にInstagramのフィードを表示

それでは、ウェブページにショートコードを貼り付けてみます。ウェブページ編集画面でショートコードを貼り付け、プレビューを確認してみます。

下記のように表示されました。

ウィジェットに張り付ける(サイドバー・フッター共通)

ウィジェットにショートを貼り付け、サイドバーに表示させてみます。テキストウィジェットにショートコードを貼り付け、表示させたい場所に設置します。

ウィジェットにショートコードを張り付けると、下記のように表示されます。

ショートコードを貼り付けるだけで簡単にInstagramの写真を表示させる事が出来ます。

 

まとめ

以上、Instagramに投稿した画像をウェブページに表示させる方法について解説しました。

プラグインを使う事により、自動でInstagramに投稿した写真を取得しますので、以降は自動的に写真が追加されていきます。

表示のカスタマイズもできますので、Instagramを活用したい方は、是非試してみてください。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
WordPressプラグイン
クリエイトエクスプレス