ブログ

  1. トップ
  2. ブログ
  3. インスタの投稿一覧をWordPressに埋め込む「Smash Balloon Social Photo Feed」運用のコツ

WordPress

インスタの投稿一覧をWordPressに埋め込む「Smash Balloon Social Photo Feed」運用のコツ

皆さま、こんにちは。

ビジュアルで魅せることができるSNS「Instagram(インスタグラム)」を運用しているお店や企業もずいぶん増えてきました。飲食店では「アカウントはもう必須といっていい」ものだと先日他店舗展開している飲食店のオーナーさんから聞きました。ユーザーとしてもInstagramでお店の情報をチェックするのは当たり前になってきたように思います。

Instagramの運用に力を注ぐ方々が多い一方で、WEBサイトとInstagramをどうつなげていくかという課題に直面されて悩まれているというお声もよく聞きます。スタッフに任せているInstagramは更新頻度が高いので、WEBサイトの訪問者様にも見てもらえるとメリットが多いですよね。


そこで便利なのがInstagramのタイムライン(=フィード、投稿一覧)をWEBサイトに埋め込む機能です。公式に用意されていないのですが、WordPressで構築されたWEBサイトならプラグインで簡単に実装できます。

複数のプラグインがありますが、今回は無料で使えて多くの機能が備わっており、デザインも比較的柔軟に対応できるプラグイン「Smash Balloon Social Photo Feed」をご紹介します。「Smash Balloon Social Photo Feed」の使い方から運用のコツまで幅広くご紹介しますので、すでにこのプラグインを使われている方にも読んでいただければうれしいです。

  1. 「Smash Balloon Social Photo Feed」の初期設定とWEBサイトへの埋め込み方
  2. 「Smash Balloon Social Photo Feed」を違和感のないデザインにカスタマイズする方法
  3. 運用のコツ①WEBサイトからInstagramへアクセスを増やす方法
  4. 運用のコツ②プロ版にする選択をしたほうがよい場合は?

この4つの項目に分けてご紹介します。

1.「Smash Balloon Social Photo Feed」の初期設定とWEBサイトへの埋め込み方

プラグイン自体の設定はとてもシンプルですが、運用中のInstagramアカウントにパソコンでログインする必要があります。まずInstagramアカウントとパスワードをご準備ください。パスワード忘れの場合はInstagramのログインページからリセットできます。

◆事前準備は2つ:Instagramにブラウザからログイン、WordPressに「Smash Balloon Social Photo Feed」をインストール

事前準備が済みましたら、WordPressとInstagramの連携を進めていきます。

①WordPress管理画面左メニュー「Instagram Feed」からプラグインの管理画面へ進み、アカウントを連携する

途中で該当アカウントが【Personal】か【business】か聞かれます。Instagramアカウントの設定に応じて選択してください。

②InstagramからWordPressのプラグインへ情報を送る許可を出す

IDやパスワードを入れて進んでいくと、ブラウザが開いてInstagramとの連携画面になります。許可を求められますので「許可する」をクリック。

③個人アカウントで運用している場合にのみ、プロフィール画像をプロフィール文を要求されるので記入する

businessアカウントの場合は、FacebookとConnectして(つなげて)いますか?などの項目を追加で聞かれることがあります。このあたりはInstagramの規約や機能面が変更されたり拡充されたりすることで変更になることがありますが、ご自身のアカウントに合ったものを選択してください。

特にどちらを選ぶかによって生じる問題はなく、【Personal】でも【business】でも連携はスムーズです。今のアカウント設定に合わせて選んでください。

④Instagramの投稿はショートコードでWEBサイトに埋め込みで完成

連携が完了すると、WordPress管理画面に投稿が表示されます。これをWEBサイトに埋め込むにはショートコードが発行されるので、発行されたショートコードを管理画面で確認し、WEBサイトの好きな場所へコピペするとOKです。WordPressのウィジェット機能を使うと簡単にショートコードを埋め込めます。

では次に、デザインのカスタマイズについてご紹介します。

2.「Smash Balloon Social Photo Feed」を違和感のないデザインにカスタマイズする方法

デザインはプロ版に比べると無料版でできることには限りがあるのですが、それでもWEBサイトのデザインに合わせて調整ができます。

いくつかのカスタマイズ項目の中で、以下の項目は無料版の機能内で設定できます。
変更するとプレビュー画面がありますので、WEBサイトのデザインと違和感がなくなるよう設定してください。

  • フィードレイアウト
  • 配色
  • ヘッダー
  • 投稿
  • もっと見るボタン
  • フォローボタン

WEBデザインに合わせた色を設定するなど、馴染ませようとすると専門的な知識も少し必要になります。もしなかなかうまくいかないと思ったら、WEBサイトを作ってくださったデザイナーさんや制作会社の担当者さんにご連絡して調整していただくのもよいと思います。

■リール動画の表示/非表示も設定可能
最近はInstagramも動画の活用が多く、リール動画をたくさんアップされているアカウントもあると思います。WEBサイトでリール動画を載せるかどうかは設定で選べます。

【設定>フィルタと承認>特定の投稿を表示】でリール動画を表示するかどうかのチェックボタンがあります。動画を載せない場合はチェックを外してください。

3.運用のコツ①WEBサイトからInstagramへアクセスを増やす方法

このプラグインは投稿した本文が見えるものではないので、写真だけがズラッと並びます。そのため、WEBサイトの訪問者様が写真を見て満足してしまい、Instagramへアクセスしない可能性もあります。

Instagramのフォロワーやインプレッション数を増やしたいときは、写真に内容がわかるよう文字を載せて投稿するのも一つの方法です。

WEBサイトでブログとして書かれることが多かった情報コンテンツをInstagramで実践するようなイメージでしょうか。商品情報の間に”コーディネートのコツ”など情報を含むような投稿を入れ、WEBサイトからの流入を促します。写真だけでは伝わりづらいですが、写真に文字を入れることでアクションしてもらいやすくなると思います。

文字入れ加工は写真加工のアプリで簡単にできます。投稿するために画像加工アプリを使っているなら文字入れ機能も付いていることがほとんどで、文字入れのハードルは高くありません。Instagramアカウント運用の一環として実践してみるのもよいのではないでしょうか。

4.運用のコツ②プロ版にする選択をしたほうがよい場合は?

「Smash Balloon Social Photo Feed」をインストールすると【プロ版にアップデート】のリンクが出ます。どんな使い方をするときにプロ版にしたほうがよいのかは追加される機能で検討するとよいと思います。

  • Instagramのショッピング機能を使っている
  • ハッシュタグのフィードを出したい
  • いいねの数を表示させたい
  • ストーリーズの表示もしたい

プロ版ではさまざまな機能が追加されますが、多くの皆さんが関心があるだろうと思われるのは上記の4つかなと思います。

アパレルや雑貨などではInstagramのショッピング機能を使われているお店も多いです。その商品をそのままWEBサイトに載せられるので、管理も楽になりますね。

また、無料版ではアカウントに投稿した一覧(最新から順に)しか出せないのですが、プロ版になると並べ方を変えたり、ハッシュタグのフィードを表示させたりできます。

そのほかプロフィール以外のいいね数やフォロワー数を出すなど、機能が拡張されるため、そのような表示が必要と判断された方はプロ版のご登録をおすすめいたします。

まとめ

WordPress以外で構築したWEBサイトにInstagramのフィード(タイムライン)を表示させるのは実は大変な作業です。WordPressだからこそ簡単にできるので、WordPressで構築したWEBサイトをお持ちで、Instagramの運用もしっかりされているならぜひ「Smash Balloon Social Photo Feed」を活用して連携されるとメリットが大きいと思います。

WEBサイト上での表示も軽く、無料版でできることも十分あります。まずはご自身でできる設定の範囲内でプラグインを活用し、連携をスタートさせてみるのはいかがでしょうか。