今回の記事では、プラグイン「Smash Balloon Social Photo Feed」を使ったワードプレスサイトへのインスタグラムヴィジェットの埋め込み方法を紹介します。
- インスタグラムをサイドバー等に埋め込むことで、インスタグラムのフォロワー数を増やす機会を増やすだけでなく、サイト自体が華やかにもなります
- プラグイン「Smash Balloon Social Photo Feed」 を使用することで、簡単にインスタグラムヴィジェットの設置が可能となり、更に更新も自動なのでとても便利です
WEBMAGAZINE「GOKUI」の運用を開始して約３か月が経過し、徐々にサイトの内容が充実してきましたので、この辺りでそろそろSNSとの連携を進めていこうと思います。
連携を考えているSNSは「Instagram（インスタグラム）」「Twitter（ツイッター）」「Facebook（フェイスブック）」の３つですが、とりあえず今回は「Instagram （インスタグラム）」のサイドバーへの埋め込みを試してみます。
Instagram （インスタグラム）の埋め込み方法は、一番便利そうな「Smash Balloon Social Photo Feed」というプラグインを選んでみました。
では早速進めていきます。
まずはプラグイン「Smash Balloon Social Photo Feed」をワードプレスにインストールします。
１）ワードプレスの管理画面から、プラグイン＞新規追加と進み、プラグインを追加する画面を表示させます。
キーワード右の空欄に 「Smash Balloon Social Photo Feed」 と入力すると、Smash Balloon Social Photo Feedが表示されるので、「今すぐインストール」をクリックしてインストールします。
２）インストールが終わったら「有効化」をクリックします。
３）次にワードプレスの管理画面から、Instagram Feedを選択し、「Smash Balloon Social Photo Feed」の設定画面を表示させます。
設定画面は「Configure」「Customize」「Display Your Feed」「Support」の４つの画面（タブ）に分かれていています。
「Configure」
インスタグラムとの連携や更新時間等、大まかな設定をするところ
「Customize」
埋め込むヴィジェットのレイアウト、大きさ、カラー等をカスタマイズするところ
「Display Your Feed」
埋め込むショートコードを作成するところ。
知識があればショートコードをカスタマイズすることも可能。
有料版であればカスタマイズの幅が更に広がります。
「Support」
マニュアルやFAQ、システム情報等が記載されているところ。
まずはインストールしたプラグインとInstagramを紐づける必要があるので、 「Configure」の赤枠のところをクリックしてアカウントを設定します。
４）確認画面が表示されるので「Connect」をクリックして次に進みます。
５）下の画像のように、登録したインスタグラムアカウントが表示されれば登録は完了です。
上手くいかない場合には、現在使用しているブラウザでインスタグラムにログインしていない可能性があるので確認してみて下さい。
６）次に「Customize」でヴィジェットのレイアウト、大きさ、カラー等を設定します。
Generalはヴィジェットの大きさを指定するところです。
横幅、高さはこのままでOKですが、背景色はお好みでどうぞ。
- Width of Feed ：横幅
- Height of Feed ：高さ
- Background color：背景色
ヴィジェットのLayoutを指定するところです。
大幅な変更は有料版のみになるので、こだわりがあるのであればどうぞ。
- Number of Photos：写真の枚数
- Number of Columns：列の数
- Padding around Images：写真間の余白
- Disable mobile layout：モバイル用表示の使用可否
写真表示の設定をするところです。
写真表示の順番は、Newest to oldest（新しい順）かRandom（ランダム）のどちらかが選べます。解像度はそのままでOKです。
- Sort photos By： 写真表示の順番
- Image Resolution：写真の解像度
レイアウトされた写真の上部（ヘッダー）に、インスタグラムのプロフィール等を表示すするかしないかを指定するところです。表示する場合には、サイズ、文字色等が指定できます。
- Show Feed Header：ヘッダー部分の表示
- Header Size：ヘッダー部分のサイズ
- Show Bio Text：プロフィール文章の表示
- Header Text Color：プロフィール文章の文字色
「もっと見るボタン」の設定をするところです。
- Show the ‘Load More’ button：もっと見るボタンの表示
- Button Background Color：もっと見るボタンの背景色
- Button Text Color：もっと見るボタンの文字色
- Button Text ：もっと見るボタンの文字
「フォローボタン」の設定をするところです。
- Show the Follow button：フォローボタンの表示
- Button Background Color：フォローボタンの背景色
- Button Text Color：フォローボタンの文字色
- Button Text ：フォローボタンの文字
７）「Customize」が完了したので、 「Display Your Feed」の画面に移動し、ショートコードを使ったヴィジェットのサイドバーへ埋め込み作業に移ります。
ショートコードは「Display Your Feed」に（下の画像の青枠のところ）記載されているので、文字列の部分を右クリックでコピーします。
７）次にワードプレスの管理画面から、外観＞ヴィジェットと進み、ヴィジェットを設置したい部分（今回はサイドバー部分）に「カスタムHTML」を追加し 、内容のところに先ほどコピーしたショートコードを貼り付けます。
タイトルに文字を入力するとヴィジェットの上部に表示されますが、特に入力しなくても構わないです。
以上で設置完了です。
設置したサイトを開いて確認してみて下さい。