WordPressプラグイン Instagram Feed(Smash Balloon Social Photo Feed)の使い方

WordPress

Instagram Feed(Smash Balloon Social Photo Feed)の使い方

Instagramの最新のいくつかの写真をWordPressに表示させたいという方におすすめなのが「Instagram Feed(現在はSmash Balloon Social Photo Feedという名称に変更されました)です。

Instagram Feedを使えば、自分のInstagramの投稿を簡単にWordPressに表示させることができます。

今回は初めてSmash Balloon Social Photo Feedを使う方のために、使い方をわかりやすく解説していきます。


 

プラグインを導入する上での注意事項

ホームページ Unavaiableプラグインは、スマートフォンのアプリのように、好きな機能をWordPress本体に組み込むことができる機能です。プラグインは便利ですが、古いプラグインや、ご利用のテーマやプラグインの組み合わせによっては競合して、不具合を起こす場合もあります。

そのため、WordPressのバックアップを取った上自己責任で実施をお願いいたします。

 

Instagram Feed(Smash Balloon Social Photo Feed)とは

Instagram Feed(Smash Balloon Social Photo Feed)
 

Instagram Feed(Smash Balloon Social Photo Feed)は、WordPressのサイト内にインスタグラムフィードを埋め込むことができるプラグインです。

インスタグラムのアカウントとの連携を簡単にできて、ショートコードを入力すれば、投稿した場所にインスタグラムの投稿を表示できます。

サムネイルの位置も調整できるので便利です。
 

Smash Balloon Social Photo Feedのインストール・有効化

WordPressの管理画面でプラグイン>新規追加をクリックします。
プラグイン>新規追加
 

プラグインの新規追加画面で、「instagram feed」と検索すると、Smash Balloon Social Photo Feedと出てくるので、インストールします。
Smash Balloon Social Photo Feedをインストール
 

プラグインをインストールまたはアップロードしたら有効化します。
Instagram Feed(Smash Balloon Social Photo Feed)を有効化する
 

Smash Balloon Social Photo Feedの使い方基本

インスタグラムアカウントに接続する

インスタグラムのフィードを出すには、まず表示させたい対象のインスタグラムアカウントに接続(ログイン)する必要があります。
 

ダッシュボードから、Instagram Feed > Settingsをクリックしましょう。
Instagram feed > Setting
 

Instagram Feedの部分をクリックしたら、以下の画面が出てきます。青いバナーをクリックすればアカウントと紐付けることができます。
青いバナーをクリックしてアカウントと紐付ける
 

アカウントタイプを選択して接続します(通常はPersonal)。
通常はPersonalを選択してConnect
 

ログイン画面が表示されたらログインしましょう。
Instagramにログイン
 

接続を許可します。
Instagramにログイン>接続を許可
 

Connect This Accountを選択します。
Connetct This Account
 

紐付けされたら「Succcesfully connected」と出てきます。
表示したいアカウントかどうかを確認
 

以上でアカウントの接続設定は完了です。引き続きインスタグラムのフィードを表示させる方法をご紹介していきます。
 

インスタグラムフィードを表示させる

ここでは、任意のページ(固定ページまたは投稿)にインスタグラムのフィードを出してみましょう。
 

任意の固定ページ(または投稿)の編集画面を開いて、ブロックを追加します。
ブロックの追加
 

ショートコードブロックを追加します。
ブロックエディター >ウィジェット>ショートコード
 

ショートコードで[instagram-feed]のタグを貼り付けます。
ショートコードを貼り付ける
 

正しく貼り付けられたら、以下のようにInstagramが表示されます。
インスタグラムのフィードが表示された
 
 

ウィッジェットを利用してサイドバーまたはフッターに貼り付ける

WordPressのウィジェットを利用してサイドバーまたはフッターに貼り付けることもできます。

外観>ウィジェットを選択します。
外観>ウィジェット
 

ここではサイトバーにテキストウィジェットを設定して、[instagram-feed]のショートコードを貼り付けて保存します。
テキストウィジェットにショートコードを貼り付ける
 

表示を確認すると、インスタグラムフィードが表示されたことが確認できました。
サイドバーにインスタグラムフィードが設定できた
 
 

初期の表示設定のカスタマイズ

初期の表示設定はInstagram feedの設定ページから設定できます。

Instagram feed > Settingを選択します。
Instagram feed > Setting
 

Customizeタブを選択します。
Instagram feedの設定>Customize
 

初期状態のままでも構いませんが、変更したい場合は画像の幅、高さ、背景色、枚数、列数、画像の間隔など変更して保存をクリックします。
初期の表示設定
 

初期の表示設定
 

ショートコードで表示内容を設定する方法

先ほどショートコードを利用してインスタグラムのフィールドを表示する方法をご紹介しましたが、ショートコードにオプションを追記することでいろいろな表示にカスタマイズできます。
 

Instagram feed > Settingを選択します。
Instagram feed > Setting
 

Display your feedタブを選択します。
Instagram feedの設定>Display your feed
 

ここでは無料版で使えるショートコードについて説明していきます。ピンク色の部分がpro版になりますので、pro版以外の部分を解説していきます。
ショートコードの一覧
 

Customize Optionsの設定

Customize Options

  1. width・・・投稿表示の幅を設定
  2. withunit・・・投稿表示の幅を「pix または%」で設定
  3. height・・・投稿表示の高さを「値」で設定
  4. heightunit・・・投稿表示の高さを「pix または%」で設定
  5. background・・・投稿表示の背景色をカラーコードで設定
  6. class・・・CSSクラスを追加できる。CSSでオリジナルの装飾ができる

 

1.のショートコード、[instgram-feed width=50]で設定すると、以下のようなレイアウトになります。

widtth50の設定
 

Layout Optionsの設定

Layout Optionsの設定

  1. num・・・表示する画像の枚数を設定
  2. cols・・・フィードに表示するコラム数
  3. imagepadding・・・画像の余白を数値で設定
  4. imagepaddingunit・・・画像の余白をpxか%で設定

 

1. の[instagram-feed num=10]のショートコードを使って、Instagram Feedに表示する画像の枚数を10枚に設定しました。

画像の枚数を10枚に設定
 

Follow on Instagram Button Optionsの設定

InstagramのFollowボタンをカスタマイズすることもできます。

Followボタンをカスタマイズ
 

Followボタンをカスタマイズ
 

  1. showbutton・・・「Follow on Instagram」ボタンを表示するかしないか。表示する場合はtrue、表示しない場合はfalseで設定
  2. buttoncolor・・・ボタンの文字の色をカラーコードで設定
  3. buttontextcolor・・・ボタンの文字色をカラーコードで設定
  4. buttontext・・・ボタンの文字を設定

 

4.のショートコード、[instagram-feed followtext="webst8"]を使って、Follow meの文字をwebst8に変更しました。
Follow meの文字をwebst8に変更
 

上記以外にも色々と設定がありますが、今回は代表的なショートコードを説明しました。
 

インスタグラムフィードで複数アカウントを表示する方法

Instagram Feedの画面から複数のアカウントを表示・選択することができます。

青い接続ボタンをクリックします。
Instagramアカウントに接続する
 

アカウントタイプを選択して接続します(通常はPersonal)。
通常はPersonalを選択してConnect
 

ログイン画面が表示されたらログインしましょう。
Instagramにログイン
 

接続を許可します。
Instagramにログイン>接続を許可
 

Connect This Accountを選択します。
Connetct This Account
 

新たなInstagramアカウントに接続されました。
新たなInstagramアカウントに接続された
 

アカウントを複数追加した場合、ショートコード[instagram-feed user="ユーザーID"]と指定することで、どのアカウントを表示させるか指定することができます。
オプションでどのアカウントを表示させるか選択
 

まとめ

まとめです。今回は、WordPressに簡単にインスタの埋め込みができるInstagram Feedのプラグイン「Smash Balloon Social Photo Feed」について説明しました。
 

Instagram Feed(Smash Balloon Social Photo Feed)

Smash Balloon Social Photo FeedはWordPressとの連携がスムーズで、ショートコードを利用して簡単にインスタグラムのフィードを好きな場所に表示させることができます。。

自分のサイトとInstagramの連携を強化したい人はぜひ導入を検討してみてくださいね。

今回は以上になります。最後までご覧いただきありがとうございました。
 

 

弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

検索して記事を見つけたい方はこちら

検索して記事を見つけたい方はこちらにキーワードを入力してお探しください。

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2020年版WordPress(ワードプレス)の使い方総まとめ】

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-WordPress
-, ,

© 2021 WEBST8のブログ Powered by AFFINGER5