【図解付き】2020年版　InstagramをWordPresssで表示する方法 「 Smash Balloon Social Photo Feed」の設定

FacebookやTwitterはWordPressのテーマに組み込まれていることが多いのですが、Instagramはプラグインを利用する必要があります。
利用者が多く、１ページ全体、サイドやヘッダーに簡単に埋め込みができる「Smash Balloon Social Photo Feed」をご案内します。
ホームページに表示させてInstagramのフォロワー獲得に繋げましょう！！

Smash Balloon Social Photo Feedの設定

「プラグイン」→「新規追加」で「Smash Balloon Social Photo Feed」を検索します。
「Instagram」でもヒットします。

検索で見つかったら「今すぐインストール」をClickして→「有効化」にします。

左のメニューに「Instagram Feed」が表示されるので設定画面を開きます。

「1. Configure」タブの設定画面で、Instagramアカウントに接続するために青いボタンをClickします。

「個人またはビジネスInstagramプロファイルを接続していますか？」と別ウインドウが表示されたら、該当する方を選択してください。
今回は「一般」で進めます。

Instagramの認証に進みます。
アカウント情報が表示されない場合は、ブラウザでInstagramにログインしておきましょう。

もう一度確認画面が表示されるので、Instagramのアカウントを確認

アカウント情報が表示され、連携完了です。

Instagramをホームページに表示

「3. Display your Feed」タブの設定画面に Instagramの写真を表示させるショートコード「instagram-feed」をコピーします。

Instagramを表示する[ページ]、[投稿]、または[ウィジェット]に直接貼り付けます。

するとこちらの画像のように、 Instagramの写真を簡単に表示することができます。
もちろん、 Instagramに写真をUPすると、自動更新します。

Instagram Feedのカスタマイズ

２０枚の写真を表示することができますが、表示数を少なくするなど様々なカスタマイズができます。

Configure(設定)

「1.configure」タブの設定です。

• Preserve settings when plugin is removed:
  不具合などでプラグインを削除し再インストールした場合、レ点チェックを入れてあれば、設定を保存しているので引き継ぐことができます。
• Check for new posts every:
  新しく InstagramにUPされた画像をホームページに反映させるためにチェックする間隔を決めます。
  「分」「時間」「day」で設定ができます。
  [1][Days]にすると１日ごとに Instagramが更新されていないかチェックします。

Customize(カスタマイズ)

「２.customize」タブの設定です

General 一般

• Width of Feed: 埋め込み画面の横幅
• Height of Feed: 埋め込み画面の高さ
• Background Color: 埋め込み画面の背景色

埋め込みしたInstagramを表示する幅と高さを「%」「px」で指定できます。
%は画面に対しての割合です。
背景色も変更可能です。

Layout レイアウト

• Number of Photos: 写真の表示枚数　最大表示枚数は33枚です
• Number of Columns: 列の数
• Padding around Images: 写真の周りの余白
• Disable mobile layout: モバイルレイアウトを無効にする
  モバイル表示は列数を少なくしてモバイル画面に収まるレイアウトにします。
  チェックを外すとモバイルレイアウトが無効になります。

• 

• 

Photos 写真

• Sort Photos By: 画像を並び替える　「新しいのから古い画像」「ランダム」のどちら
  

  

• mage Resolution: 画像解像度　自動検出を推奨しています
  

  

Photo Hover Style・Carousel ホバースタイル・カルーセル

• Photo Hover Style: ホバースタイル　写真にマウスを合わせた時の挙動設定
• Carousel: カルーセル　写真をスライド表示

Header ヘッダー

ヘッダー部分の詳細設定です

• Show Feed Header: ヘッダーを表示 チェックを外すとヘッダーが非表示になります。
• Header Size: ヘッダーの表示サイズ「small」「medium」「large」の３パターンから選択できます。

• 

• 

• 

• Show Bio Text: プロフィールを表示　チェックを外すと自己紹介文が非表示になります。
  Only applies for Instagram accounts with bios→ BIOSを持つInstagramアカウントにのみ適用されます。

• Header Text Color: ヘッダーのテキストの色を変更できます。

Caption・Likes & Comments・Lightbox Comments キャプション・コメント

写真につけたコメントやいいねの数、コメント数を表示できたりします。
Pro版のデモがあるのできになる方はチェック
https://smashballoon.com/instagram-feed/demo/

‘Load More’ Button もっと見るボタン

Instagramを表示した時に下に表示される「Lord More」ボタンの詳細設定です。

• Show the ‘Load More’ button: ボタンの表示、非表示
• Button Background Color: ボタンの背景色
• Button Text Color: ボタンテキストの色
• Button Text: ボタンテキストを変更

• 

• 

ボタンの背景色を「黄」ボタンテキストを「赤」ボタンテキストを「もっと見てみる」に変更しました。

‘Follow’ Button フォローボタン

Instagramを表示した時に下に表示される「follow」ボタンの詳細設定です。

• Show the Follow button: フォローボタンの表示、非表示
• Button Background Color: ボタンの背景色
• Button Text Color: ボタンテキストの色
• Button Text: ボタンテキストを変更

ボタンの背景色を「黄」ボタンテキストを「赤」ボタンテキストを「もっと見てみる」に変更しました。

Post Filtering・Moderation フィルタリング・モデレーション

• Post Filtering: フィルター機能を使って、指定した単語やハッシュタグで優先して表示、または非表示にすることができます。
• Moderation: 特定の画像を非表示（画像IDで指定）、特定のユーザーをブロック

Misc その他

普通の利用であれば設定変更は必要ないです。

• Custom CSS: CSSをカスタマイズできます
• Custom JavaScript: JavaScriptをカスタマイズできます
• Cache error API recheck: キャッシュエラーを再チェックするかどうか
• Enable Backup Caching: キャッシュをバックアップしますか
• Force cache to clear on interval: 一定間隔でキャッシュクリアしますか
• Disable Icon Font: アイコンフォントを無効にしますか
• Icon Method: アイコン方式を選択

Display your Feed

「3.Display your Feed」タブの設定です。
色々なデザインの表示方法をショートコードで簡単に利用できます。
投稿やサイドバーなど表示する場所で表示方法を変えてもいいですね