タグ: WordPressプラグイン

今回はインスタグラムの投稿をWordPressのサイトにタイル状の形式で並べて表示することが出来る「Smash Balloon Social Photo Feed」の使い方をご説明します。

もちろんインスタグラムの投稿が更新されれば、WordPressの方でも自動で更新される仕組みとなっています。

説明を動画で見る

プラグインインストール

まずは、プラグインをインストールしましょう。

WordPress管理画面左メニューの「プラグイン」にマウスを乗せて、さらに表示される「新規追加」をクリックします。

表示された画面の右上の検索窓に「Smash Balloon Social Photo Feed」と入力してください。

結果が表示されると、似たようなプラグインも一緒に表示されるので、間違えないようにインストールしましょう。

「Post Feed」ではなく「Photo Feed」というのがポイントです。

確認が出来たら「今すぐインストール」をクリック。

インストールが完了したら、そのまま「有効化」までしてください。

インスタグラムアカウント連携

プラグインが有効化出来たら、プラグインの設定を行います。

WordPress管理画面左メニューに「Instagram Feed」という項目が追加されているので、直接クリックするか、さらに表示された項目から「すべてのフィード」をクリックします。

すると、フィードの作成画面が表示されるので、「新規追加」ボタンをクリックしましょう。

フィードの形式選択画面に移動しますが、このプラグインの無料版では他のものを選択できないので、そのまま「次へ」をクリック。

「Select one or more sources」ということで、１つまたは複数のソースを選択してください、と言われていて、

つまりは、何のタイムラインやフィードを繋げますか？

と聞かれている状態なので、インスタグラムです、と選択するのがここの設定の役割となります。

ご自身のインスタグラムとWordPressを連携するには「Add Source」をクリックします。

すると、一時的にWordPressの管理画面から別のサイトへ移動します。

「Select Account Type」では無料版である「Personal」を選択。

次に、「Login with Instagram」ボタンをクリックします。

すると、インスタグラムのログイン画面が表示されるので、ログインしましょう。

すでにログインしている方は、そのまま次の設定に進んでください。

プラグインがご自身のインスタグラムの一部情報を取得しても良いかの確認画面が表示されるので、「許可する」をクリック。

連携が完了すると、WordPressの管理画面に戻ってきます。

画面上にご自身のインスタグラムアカウントが表示されるので、チェックを入れて「次へ」をクリックましょう。

これでWordPressとインスタグラムの連携は完了です。

プラグインの設定

次に、WEBサイト上にインスタグラムをどのように設置するかの設定やカスタマイズを行います。

簡単なガイドが表示されるので読み進めてください。

画面の左側で設定を行い、右側では、カスタマイズ内容がプレビューとして表示されます。

カスタマイズ

まずは、画面左側上部の「カスタマイズ」タブに切り替えてみましょう。

最初にレイアウトの設定項目があるので見てみます。

すると、レイアウトの一覧が表示されます。

現在は「グリッド」というタイル状に画像を並べるレイアウトになっていますが、残念ながら、他のレイアウトは有料版のみ利用可能となっています。

フィードの高さ設定

次のカスタマイズ項目に「フィードの高さ」というものがあります。

ここでは、タイル状の画像の全体の高さを決められます。

適当に100と入れてみます。

単位はピクセルです。

右側のプレビューを見てみると、低すぎてアカウント名ぐらいしか表示されていないことがわかります。

今度は試しに500に変更してみます。

すると、右側のプレビューもすぐに変化します。

高さが十分に確保されると画像とボタンまで表示されることがわかります。

デバイスごとのプレビュー

このプレビュー画面では、「パソコン」「タブレット」「スマホ」の3種類のデバイスのプレビューを見ることが出来ます。

タブレットの表示はこのようになります。

スマホではこのような感じです。

フィードの高さを空欄にすると、自動調整となります。

フィードの画像枚数

「投稿数」という項目では、タイル状に何枚の画像を並べるかの設定が可能です。

数値を切り替えてどのように変化するか見てみましょう。

試しに3にしてみると、プレビューでも画像が3枚になりました。

スマホでは枚数を切り替えたい場合なども「モバイル」の方で設定してあげれば可能となります。

好みの枚数になるように設定してみてください。

タイルの列数設定

「列」という項目では、タイル状の画像を何列にするかの設定ができます。

こちらはパソコン、タブレット、スマホで切り替えが可能となっています。

画像ごとの余白

「投稿数」の上にある「余白」では、それぞれの画像にどのくらい余白を設けるか設定ができます。

こちらもプレビューを見ながら設定してみましょう。

一通り設定したら次のカスタマイズ項目に移ります。

画面左側を一番上までスクロールして、「CUSTOMIZE」という部分をクリック。

今度は「配色」から色の設定をしてみましょう。

フィードの配色設定

「カスタマイズ」タブの「配色」項目では色合いの全体設定が可能です。

通常は「テーマから継承」に設定されているので、他のものに変更したい場合は、チェックを変えてみましょう。

「ライトカラー」はテーマ自体が白をベースにしていると変化がわかりづらいかもしれません。

「ダークカラー」にすると、背景が暗い感じになります。

「カスタム」では自分の好みのカラーに調整可能です。

「Background」で背景色、「Button1・２」で、画像下のボタンの色合いを変更することが出来ます。

ヘッダーの設定

「カスタマイズ」内の「ヘッダー」では、画像上部のアカウント情報欄の調整ができます。

ヘッダーのサイズは「小・中・大」の3種類から選択可能です。

アイコン設定

プラグインの無料版ではインスタグラムのアイコンを自動取得できないようなので、手動で画像をアップロードしましょう。

「カスタムアバターを使う」の項目で画像をアップロードすると、ヘッダーのアイコンを設定することが出来ます。

アカウント名の色設定

「テキスト」項目の「色」では、アカウント名の色を変更することが出来ます。

プロフィールの設定

「自己紹介を表示」をオンの状態にすると、その下の項目で入力した文章がヘッダーに表示されます。

タイルの領域設定

「スクロール可能な領域の外側を表示」の設定では、背景色をどこまで適用するかを切り替えることが可能です。

色がついていないとわかりづらいかもしれません。

他のヘッダー項目は有料版のみとなります。

また、左側の一番上までスクロールして「CUSTOMIZE」から他の項目を設定します。

もっと見るボタンの設定

「もっと見るボタン」が有効になっていると、画像下に画像追加読み込み用のボタンが表示されます。

「テキスト」の項目では、このボタンの文字を決めることが可能です。

「色」の項目では、ボタンの色を「配色設定」のときよりも細かく調整することが出来ます。

「背景」ではボタンの背景色を変更可能で、「ホバー状態」では、マウスを乗せたときの色合いの変更「テキスト」では、文字の色を変更することが出来ます。

フォローボタンの設定

次は、「フォローボタン」の設定を見てみます。

「フォローボタン」が有効になっていると、「もっと見るボタン」の横に、インスタグラムをフォローしてもらうためのボタンが表示されます。

細かい設定内容は、もっと見るボタンの時と同じなので、いろいろと変更して好みのスタイルに変えてみましょう。

「ライトボックス」という項目はすべて有料版の機能なので、ここでは割愛させていただきます。

フィードの全体設定

今度は「カスタマイズ」タブから「設定」タブに切り替えて、フィード全体の設定を行います。

ソース

「ソース」では、誰のアカウントを接続しているか、また、アカウントを追加する場合の設定が可能です。

フィルタと承認は有料版となります。

並べ替え

「並べ替え」の項目では、タイル状の画像を、最新の投稿順にするか、ランダムで表示するかの設定を変更することが出来ます。

ショッピングフィードという項目も有料版です。

「高度な設定」も基本的に利用することがないと思いますので飛ばしましょう。

これで一通りの設定は完了です。

フィードの設置

設定が完了したら、実際にWordPressに設置をしていきましょう。

画面右上の「埋め込み」という部分をクリックすると、作成したフィードがショートコードとして表示されます。

「コピー」ボタンをクリックするとショートコードがコピーできるので、後は投稿・固定ページ・ウィジェットなど、好きな場所に貼り付ければ、カスタマイズしたインスタグラムのタイル画像が表示されます。

サンプルとして、固定ページを新規に用意して、そのまま貼り付けてプレビューしてみます。

すると、このように表示されることがわかります。

「ウィジェットに追加」ボタンをクリックすると、WordPressのウィジェット管理画面が表示されるので、旧バージョンのウィジェット画面の場合は「Instagram Feed」ウィジェットを配置するか、「カスタムHTML」でショートコードを貼り付けましょう。

新バージョンのウィジェット画面でもやることは一緒です。

実際にWEBサイトを見てみると、サイドバーに入れても自動でサイズ調整されることがわかります。

まとめ

お疲れ様でした。

これでインスタグラムの画像をWordPressの好きな場所に設置することが出来るようになりました。

有料版のみの機能も多いですが、カスタマイズ項目も豊富で使いやすいので ぜひ利用してみてください。