WordPressの使い方：Instagramをタイル状に表示する方法

WordPressにInstagramの投稿をタイル状に表示させるには、プラグイン「Instagram Feed（Smash Balloon Social Photo Feed）」を使うと簡単に表示させることができます。

■Instagram（インスタグラム）とは
簡単に言うと『写真や動画の投稿に特化したSNS』です。
フィルタでの加工も可能なので、オシャレな写真を投稿することができます。

■ プラグイン「Instagram Feed（Smash Balloon Social Photo Feed）」
①インストール
まずプラグインをインストールする必要があります。

WordPressにログインし『プラグイン』『新規追加』をクリック。
検索欄に『Smash Balloon Social Photo Feed』と入力すると表示されます。
『Smash Balloon Social Photo Feed』→Instagram
『Smash Balloon Social Post Feed』→Facebook
よく似ているのですが、今回はInstagramの方をインストールします。
※ブラウザの検索からインストールするのではなく、WordPressのプラグイン検索からインストールしてください。

②アカウント連携
次にプラグインとInstagramを連携させます。
先にInstagramのログインしておくとスムーズです。
インストールするとWordPressのサイドバーに『Instagram Feed』が追加されるのでクリック。

『Instagram | Conntact an Instagram Account』をクリック。

個人アカウントかビジネスアカウントかを聞かれるので、選択し、connectをクリック。

ビジネスアカウントについては下記リンクをどうぞ。
Insta Lab：Instagramビジネスアカウント移行手順と人気企業プロフィールの作り方


「プラグインがプロフィール情報、メディアへアクセスしますがいいですか？」的なものがでてきますので、『承認する』をクリック。

連携するアカウント名が表示されるので『Connect This Account』をクリック。
複数アカウントを持っている場合であっても連携することが可能です。

最後に「変更を保存」をクリックして保存します。

これで連携が完了しました。

■プラグインを設置する
表示させるにはショートコードを使用します。
表示させたい場所に

[instagram-feed]

と入力してください。
※ブロックエディターを使用している場合はカスタムHTMLで入力します。

アカウントの連携が済んでいる場合、正常に表示されます。

連携がまだの場合は、以下のメッセージが表示されます。

「このエラーメッセージはWordPress 管理者にのみ表示されます
エラー：接続アカウントがありません。
Instagramフィードの設定ページにアクセスして、アカウントを接続してください。」

これで設置は完了です！

■設定
そのままでも問題なく使用できますが、画像の表示数などを変更することも可能です。
WordPressのサイドバーに『Instagram Feed』『2. Customize』をクリック。

上から順に解説していきます。（一部省略します）
▼General

Width of Feed：幅の設定。単位はpx、%で。
Height of Feed：高さの設定。未入力の場合、自動で設定されます。
Background Color：背景色の設定。

▼Layout

Layout Type：Pro版で使用できます。
Number of Photos：一度に表示する画像の枚数の設定。
Number of Columns：表示する際の列数の設定。
Padding around Images：画像の周りの余白の設定。数値を入力し、単位はpx、%で。
Disable mobile layout：スマホなど画面の小さいデバイスで表示させる際、画像が小さくなりすぎないように自動で列数を減らす設定。チェックを入れると無効にできます。

▼Photos

Sort Photos By：画像の並び順の設定。表示する画像の並び順を、「Newest to oldest（新しい順）」か「Random（ランダム）」で設定できます。
Image Resolution：画像の解像度の設定。特にこだわりが無ければこのままがオススメです。

▼Header

Show Feed Header：ヘッダー（InstagramのID・プロフィール写真）の表示設定。
Header Size：ヘッダーの大きさの設定。
Show Bio Text：ヘッダーに自己紹介を表示するかどうかの設定。
Header Text Color：ヘッダーの文字色の設定。

▼’Load More’ Button

Show the 'Load More’ button：設定した枚数より多い画像を表示するための、「Load More」ボタンの設定。
Button Background Color：ボタンの背景色の設定。
Button Text Color：ボタンの文字色の設定。
Button Text：ボタンのテキストの設定。日本語を設定することも可能です。

▼’Follow’ Button

Show the Follow button：フォローボタンの表示設定。
Button Background Color：ボタンの背景色の設定。
Button Text Color：ボタンの文字色の設定。
Button Text：ボタンのテキストの設定します。「フォローする」のように日本語を設定することもできます。


ヘッダーは上の部分、Load Moreとフォローボタンは下に表示されます。

その他オプションでも様々な設定ができますが、割愛します。

■番外編：Instagram Feed（Smash Balloon Social Photo Feed）を設定していて、突然表示されなくなった！
APIの変更があったようです。もう一度、WordPressとInstagramを連携し直す必要があります。
詳しくは以下の公式サイトをご覧ください。
Instagram APIの変更について（SMASH balloon公式サイト）

■まとめ
検索する際は「Instagram Feed」ではなく「Smash Balloon Social Photo Feed」と打ってくださいね。

以上、『WordPressにInstagramをタイル状に表示する方法』でした。
お疲れさまでした。

The following two tabs change content below.

小笹 通典

1971年、奈良県橿原市生まれ。京都でWebを中心としたプロデュースなどを行うオフィスピコッツの代表。これまで多種多様なWEBサイトの制作や運営、プロデュースに携わり、複数のWEB系のコンテストなどでの受賞暦も持つ。 現在、WEBサイトの作成や運営などはもちろん、新規事業立ち上げのサポートや各種プロジェクトのアドバイザー、大学校や高校の講師、PTA会長、CEOなど、活動の範囲を広げている。

Wordpress

Posted by 小笹 通典