SHIROI PONZU

2022.9.10

【WordPress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

  • Instagram
  • プラグイン
【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

Smash Balloon Social Photo FeedはWordPressサイトにインスタグラムフィードを表示するプラグインです。Instagramのアカウントがあれば簡単に設置できるのでおすすめ。表示させる投稿数や大きさ、余白、カラーなど、無料版でも基本的なカスタマイズは十分にできます◎

 

手順

  • 「Smash Balloon Social Photo Feed」をインストール
  • アカウントと接続
  • カスタマイズ
  • 発行されたショートコードを表示したい箇所に記述

 

「Smash Balloon Social Photo Feed」をインストール

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

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

メニューにInstagram Feedが追加されているので、新規追加からアカウントを接続していきます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

アカウントと接続

新規追加を押すとこの画面になるので、右上の「次へ」をクリックします。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

「ソースを追加」より新しいソースを追加します。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

ページが遷移したら「Receive Our Get Started emails」のチェックを外して「Login with Instagram」をクリックします。Select Account Typeは「Personal」を選択していれば大丈夫です。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

Instagramのログイン画面になるので、ログインして「許可」をクリックします。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

ドメインの確認をされるので「Yes,it is my domain」で次へ進みます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

接続に成功すると自動でページが切り替わります。アカウントが表示されていればOKです!

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

カスタマイズ

表示したいアカウントにチェックを入れて、「次へ」をクリックすると設定画面が開きます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

フィードレイアウト

表示の見た目を調整できます。無料版ではレイアウトはグリットのみ選択できます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

配色

配色では背景やボタンの色が変更できます。カスタムを選択すると任意の色に設定できます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

ヘッダー

ヘッダーにはアイコンやアカウント名が表示されています。サイズやアイコン画像の変更、自己紹介文の追加などができます。非表示にしたい場合は「有効」をオフにしましょう。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

もっと見るボタン

投稿をもっと表示させるボタンです。色やボタンのテキストを変更できます。「有効」をオフで非表示にもできます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

フォローボタン

こちらも色やボタンのテキストを変更できます。「有効」をオフで非表示にできます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

設定のプレビュー

右上のアイコンでPC、タブレット、モバイルそれぞれプレビューができます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

全てのカスタマイズが終了したら「埋め込み」ボタンをクリックします。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

ショートコードをコピーして表示させたい箇所に記述します。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

サイトに反映されているか確認しましょう!

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

複数のアカウントを接続したい場合

既にアカウントを接続したことがあるとアカウント情報が表示されますが、新規追加で別のアカウントと接続できます。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

この画面が出たら情報の引継ぎを「許可しない」を選択します。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

そして一旦アカウントをログアウトします。

【Wordpress】Instagramをサイトに埋め込むSmash Balloon Social Photo Feedの使い方

 

再度、Instagramのログイン画面になるので、接続したいアカウントでログインしたらOKです。

 

以上で実装は終了です。お疲れ様でした◎

 

Share Please

Read this too