起業女性の仲間作りコミュニティ 入会募集中!

wordpressにインスタグラムを表示させる方法

ホームページやブログにインスタグラムを表示させたいけれど、どうすれば…?と悩まれている方、いらっしゃるのではないでしょうか。

まり子

今回は、ワードプレスのプラグインを使って、簡単にインスタグラムの表示させる方法をご紹介します!

事前準備~表示させたいインスタグラムにログインしておく~

  1. webブラウザ(Google Chromeなど)を立ち上げ、下記のリンクから、インスタグラムを開きます。
    https://www.instagram.com/
  2. 表示させたいインスタグラムのアカウントでログインしてください。
  3. もし、複数のアカウントをお持ちで、今回表示させたいアカウント以外でログインされている状態の場合、いったんログアウトしてから、表示させたい方のアカウントでログインしてください。

 

ワードプレスにプラグインをインストールする

  1. ワードプレスにログインします。
  2. 左側メニューから、[プラグイン]-[新規追加]を選択してください。
  3. 「プラグインを追加」画面が表示されたら、右上の「キーワード」のボックスに「Smash Balloon Instagram Feed」を入力してください。
  4. 「Smash Balloon Instagram Feed」が表示されたら、[今すぐインストール]ボタンをクリックします。
  5. インストールされたら、[有効化]ボタンを押します。

 

プラグインの設定をする

  1. ワードプレス左側メニューに[Instagram Feed]という項目が新しくできているので、それをクリックします。
  2. [Connect an Instagram Account]ボタンを押します。
  3. [Personal]のまま、[Connect]ボタンを押します。
  4. [承認]ボタンを押します。
  5. 表示させたいアカウントであることを確認して、[Connect This Account]ボタンを押します。
  6. 接続が成功したことを確認します。

 

インスタグラムを表示させる

  1. [2.Customize]タブをクリックします。
  2. [Number of Photos]は、表示させる画像数です。サイドバーやフッターなど、スペースがあまり広くない場所に設置する場合は、6や9がオススメです。
    [Number of Colums]は、横に何列に表示させるかです。[Number of Photos]で設定した枚数が割り切れる数字をオススメします。
    上記を設定したら、[変更を保存]ボタンを押します。
     
  3. [Display Your Feed]タブをクリックします。
  4. [instagram-feed]という文字を選択してコピーし、表示させたい場所に貼り付けます。