Instagramフィードをワードプレスに設置できるプラグイン「Smash Balloon Social Photo Feed」

ワードプレスにインスタグラムフィードを設置したい。

「Smash Balloon Social Photo Feed」プラグインを使えば簡単に設置できます。

プラグインは機能制限で使える無料版とフル機能で使える有料版があります。

本サイトのサイドバーにインスタフィードを設置してみましたので方法を解説していきたいと思います。

Smash Balloon Social Photo Feedプラグインをインストール

ワードプレスのプラグイン 「新規追加」でキーワード「Smash Balloon Social Photo Feed」で検索。

「今すぐインストール」をクリック。

インスタグラムアカウントを紐付けする

プラグインを「有効化」WordPress管理画面の右メニューの「Instagram Feed」より「設定」をクリック。

「Instagramアカウントを接続する」をクリック。

アカウントタイプの選択／個人的を選択

Instagramアカウントを接続する／「接続」ボタンをクリック。

表示させるインスタグラムの「アカウント名」「パスワード」を入力。

ログイン情報を保存するかを聞かれるので「後で」で問題ありません。

情報の共有を要求されますので「許可する」をクリック。

「このアカウントを接続する」をクリック。

インスタグラムのアカウント名が表示されたら接続が完了しましたので「変更を保存」をクリック。

これでインスタグラムアカウントをプラグインに紐付けできました。

表示の設定をする

カスタマイズ

Instagram Feed管理画面の「カスタマイズ」タブをクリック。

一般設定

フィードの幅、フィードの高さ、背景色を設定の設定ができます。

基本なにもしなくて問題ありませんが、必要に応じて設定してください。

レイアウト

レイアウトタイプは無料版は「グリッド」のみしか利用できません。

写真の数、列の数、画像の余白、モバイルレイアウトを無効化の設定ができます。

必要に応じて設定してください。

ちなみに本ブログでは写真の数「12」列の数「4」画像の余白「5ピクセル」モバイルレイアウトを無効化「チェック有り」で設定しました。

写真

写真の表示順／新着またはランダム

画像の解像度／自動検出、サムネイル、中、フルサイズ

任意で設定。

画像のホバースタイル／カルーセル

有料版のみ設定可能。

ヘッダー

自己紹介を表示

ヘッダーサイズ／小、中、大

自己紹介を表示

カスタムアバターを使う／昼ような場合URLを入力

ヘッダーテキスト色／色を選択

任意で設定する。

キャプション、いいねとコメント、ライトボックスコメント

有料版のみ設定が可能。

「さらに読み込む」ボタン

「さらに読み込む」ボタンを表示／人にでチェック

ボタン背景色／任意で選択

ボタンのテキスト色／任意で選択

ボタンのテキスト／任意でさらに読み込む

「フォロー」ボタン

フォローボタンを表示／任意で選択

ボタンの背景色／任意で選択

ボタンのテキスト色／任意で選択

美たんのテキスト／任意で入力

絞り込み、管理

有料版のみ設定可能。

GDPR（一般データ保護規則）

GDPR（一般データ保護規則）を有効化／自動、はい、いいえ

任意で設定。

その他

カスタムCSS／任意で入力

カスタムJavaScript／任意で入力

Ajaxを利用したテーマを使用していますか ?／任意で選択

画像のサイズ変更／任意で設定

API リクエストサイズ／任意で設定

JS ファイルを head で読み込む／任意で設定

CSS ファイルをショートコードでエンキュー／任意で設定

JSによる画像の読み込みを無効化／任意で設定

バックアップのキャッシュを有効化／任意で設定

AJAXで最初の投稿を読み込む／任意で設定

一定の間隔でキャッシュを強制的にクリア／任意で設定

カスタムテンプレートを有効／任意で設定

管理者エラー通知を無効化／任意で設定

フィードの問題を Eメールで送信する／任意で設定

利用状況のトラッキングを有効化／任意で設定

anage Data／任意で設定

設定後「変更を保存」をクリック。

フィードの表示

「フィードの表示」タブを選択

フィードの表示の[instagram-feed]をコピーする。

外観 ＞ 「ウィジェット」をクリック

「サイドバーエリア」をクリック。

サイドバーにある「+」をクリック。

ウィジェットの「ショートコード」を選び先ほどコピーしたフィードの表示の「instagram-feed」をペーストする。

「更新」ボタンをクリック。

以上でサイドバーにインスタグラムフィードを設置できます。

まとめ

いかがでしたか。

Smash Balloon Social Photo Feedプラグインを使えば簡単にインスタグラムフィードを設置することができました。

自分のサイトにインスタグラムフィードを表示したいと思っている方にオススメのプラグインです。

最後まで読んでいただきありがとうございました。