Smash Balloon Social Photo FeedでWordPressサイトでInstagramの投稿を取得させる

くらいあん

Instagramの投稿を表示させたいんだけど。

ウチノ

どうやるんだ？？

ってことでさがしてみたのが今回ご紹介する「Smash Balloon Social Photo Feed」です。

このプラグインはInstagramに投稿されている写真を簡単にWordPressサイトに表示できる便利なプラグインです。

今回が初めての利用でしたが、比較的スムーズに導入できました。

実際に反映されたときは

ウチノ

こんなに簡単なんだ！！

って少し感動したのをおぼえています。

くらいあん

デザインはこんな感じで！

なんて場合もカスタマイズも行えます。

この記事では、以下の具体的な内容を抜粋して紹介します。

• Smash Balloon Social Photo Feed導入までを画像にて説明
• 設置後に表示設定など、よく使う各種設定の説明

クライアントからInstagramの表示についてご相談があった場合はぜひ参考にしてください。

この記事では有料であるPro版に関連した情報は扱っておりません

それでは、はじめましょう！

Smash Balloon Social Photo Feedの導入

WordPressにてプラグインをインストールしてセットアップ

プラグインの正式名称は｢Smash Balloon Social Photo Feed – Easy Social Feeds Plugin｣です。

同じ会社が似たような名前のプラグインを出しているので選択の際はご注意ください。

インストールすると｢Instagram Feed｣の項目名でWordPress管理画面に表示されます。

クリックするとセットアップウィザードを起動ボタンが表示されます。

それではセットアップを始めましょう！

新規追加をクリックします

無料で使うならBasic(基本)を選択します。

画像はGoogle翻訳で日本語表示されておりますが、執筆時点では英語で表示されていました

｢Instagramでつながる｣ボタンをクリックします。

開始メールを受け取る方は最初からチェックが入っているのでそのままにしてください

今回は再インストールしているので｢以前｣と表示されていますが、

あなたのアカウントで確認した後、｢許可する｣をクリックしてください。

あなたのURLで間違いないか確認、よろしければ｢Yes, it is my domain｣をクリック。

すると新規追加のとなりにあなたのアカウント名が表示されています。

これで登録が出来ました。｢Next｣をクリックです。

上の画像にある｢ソーシャルフィードコレクション｣と｢カスタマーレビュープラグイン｣については

個人的には不要だったのでオフにしました。

次の画面はコマーシャルだったので、わたしはすべてオフにしました。

上の画面では自然な流れでPro版にアップグレードをすすめているのでご注意ください。そこをスルーしていただいて一番下のボタン｢Complete Setup Without Upgrading｣クリック

ここでやっとご自身の設定に移ります。赤色の｢新規追加｣ボタンをクリック。

最初にユーザータイムラインを選択した状態になっているのでそのまま｢次へ｣をクリック。

作成したアカウントが表示されているのでチェックして次へをクリックすると

プロフィールをどうするのか質問されます。今回は設定せずに進めますので｢いいえ、あとにします｣をクリック。

• 1枚目
• 2枚目
• 3枚目

ここまでくると簡単な設定説明がポップアップされます。

一応タブで画像にしてますが、必要ならご確認ください。次の記事で紹介しますので今回はバツで消しておきます。

設定を始めると定期的に赤色の｢保存｣ボタンをクリックすることをおすすめします

Smash Balloon Social Photo Feedの設定方法

まず、確認すると管理画面でInstagram Feedをクリックすると｢すべてのフィード｣を選択している画面です。

この画面で右半分がプレビューになっており、確認しながら進めることができます。

各種ボタンの表示設定

赤枠内の上から簡単に説明します。

｢ヘッダー｣はプレビューの一番上にある、アイコン（上の画像では設定しておりません）と隣のIDですね。ここをクリックして有効化をOFFにするとプレビューから消えます。

次に｢投稿｣はさわっていません。デフォルトで自動検出になっております。

｢もっと読み込むボタン｣についてはプレビューで黒背景のLoad Moreボタンです。ここでテキストや背景色を設定できます。表示OFFもここで設定します。

｢フォローボタン｣ももっと読み込むボタン同様にテキストや色を設定できます。表示OFF設定もできます。

次にカスタマイズのフィードレイアウトをクリックします。すると上の画像の左項目になります。

ここでCSS設定を行うのですが、プレビューされているので非常に使いやすいですね。しかもプレビューの右上にあるアイコンをクリックするとSPやPCなどの表示を切り替えることも出来るので優秀です。

わたしは今回このプラグインの動作確認のために、Instagramの新規アカウントを作成しましたが、本来なら投稿数がもっとあると思うのでわかりやすいかもしれませんね。

埋め込み設定

まずは画面の右上の埋め込むボタンをクリックすると

この画面が開きます。表示されたショートコードを固定ページかPHPファイルにコードとして貼り付ければ大丈夫です。

最後に

CSSにてカスタマイズ

#sb_instagram #sbi_images {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  grid-template-columns: repeat(4, 1fr);

  .sbi_item .sbi_photo_wrap {
    height: 100% !important;
    overflow: hidden;

    .sbi_photo {
      height: 100% !important;
      transition: scale .3s;

      img {
        object-position: center;
      }
      &:hover {
        scale: 1.05;
      }
    }
  }
}

上のコードは一例ですが、デスクトップ用にホバーアクションを変更したりとかも出来ますのでコーダーの方は必要に応じて試してみてもいいと思います。

ここまで進めてみて登録から各設定までは簡単だったなと思っていただければ幸いです。