ページごとに違うインスタ投稿を見せる｜ウィジェットを複数作る方法

アカウントとウィジェットの関係

まず用語をそろえておきます。Social Feed では「連携アカウント」と「ウィジェット」が別のものです。

ポイントは、見た目と絞り込みがすべてウィジェット側にあることです。同じアカウントの投稿でも、ウィジェットを分ければ、ページごとにまったく違う一覧を出せます。反対に、1つのウィジェットの中で「このページではこの投稿、あのページではあの投稿」と切り替える仕組みはありません。見せ方を変えたい場所の数だけ、ウィジェットを作ることになります。

なお、1つのウィジェットに表示できるのは1つのアカウントの投稿だけです。2つのアカウントの投稿を混ぜて1つの一覧にすることはできません。

プランごとに作れるウィジェットの数

数えるのは、連携しているすべてのアカウントのウィジェットの合計です。アカウントを2つ連携していても、ライトプランなら合わせて3つまでです。上限に達すると、管理画面の「＋ ウィジェットを追加」が押せなくなり、「複製」を押しても「現在のプランで作成できるウィジェット数の上限に達しています。」と表示されます。新しいアカウントを連携するときにもウィジェットが1つ作られるので、上限に達していると連携もできません。料金の詳細は料金プランをご覧ください。

フリープランはウィジェットが1つなので、この記事の「ページごとに分ける」使い方はできません。ただし、同じタグを複数のページに貼ることはできます(後述)。フリープランでできることはInstagramウィジェットを無料で使うにまとめています。

手順1. どのページに何を出すかを先に決める

作り始める前に、ページと出したい投稿の対応表を作っておくと、ウィジェットの数を無駄に増やさずに済みます。たとえば、飲食店を2店舗運営している会社なら、次のようになります。

このように「見せ方が同じならタグを使い回す」と決めると、必要なウィジェットはA〜Dの4つです。ライトプラン(3つまで)に収めたいなら、店舗Aと店舗Bのページを、両店の投稿をまとめたスライダー1つで兼ねる、といった調整をします。

絞り込みの準備をしておく。ページごとに投稿を分けるには、主にキャプションのキーワードを使います。「#店舗A」「#採用」のように、投稿のキャプションに目印になる言葉を決めて入れておきます。これから投稿するものだけでなく、過去の投稿にも出したいものがあれば、Instagram側でキャプションを編集して目印を足しておきます。目印は、普段の文章では使わない言葉にすると、意図しない投稿が混ざりにくくなります。

手順2. 1つ目のウィジェットを仕上げる

最初のウィジェットは、Instagramアカウントを連携したときに作られます。複製は「元の設定をそのまま写す」機能なので、1つ目をきちんと仕上げてから複製すると、後の作業が少なくなります。

1. 管理画面のウィジェット一覧で、ウィジェットのカードにある「設定・プレビュー」を開きます。
2. 「ウィジェット名」に、置くページがわかる名前を入れます(例: 「トップページ」)。名前を空にすると「@ユーザー名」が使われますが、複数作ると見分けがつかなくなります。
3. レイアウト、列数、表示件数、余白、最大幅、文字サイズ、文字色、投稿をクリックしたときの動作、アカウントの見出しの表示を決めます。ページ共通で使う設定はここで決め切っておきます。
4. プレビューで見た目を確認し、「設定を保存」を押します。
5. 画面下の「WEBサイトにタグを設置」にある埋め込みタグを「コピー」し、トップページに貼ります。

手順3. 複製して、違うところだけ直す

1. 一覧で、仕上げたウィジェットのカードにある「複製」を押します。「ウィジェットを追加しました。」と表示され、一覧にカードが1つ増えます。
2. 増えたカードの「設定・プレビュー」を開き、まず「ウィジェット名」を置くページの名前(例: 「店舗A」)に変えます。複製直後の名前は元の名前を引き継がないので、ここで必ず付け直します。
3. 違うところだけを直します。店舗Aのページなら、レイアウトをスライダーにし、表示件数を8件にし、キャプションのキーワードに「#店舗A」を入れて「含む」を選ぶ、といった具合です。
4. プレビューに、出したい投稿だけが並んでいるかを確認して保存します。
5. このウィジェットの埋め込みタグをコピーして、店舗Aのページに貼ります。複製すると埋め込みタグは新しく発行されるので、元のウィジェットのタグとは違うものになります。

複製で引き継がれるのは、表示と絞り込みの設定のすべてです。公開・非公開の状態も引き継がれるため、非公開にしていたウィジェットを複製すると、新しいウィジェットも非公開のままです。タグを貼ったのに何も出ないときは、まずここを確認してください。「＋ ウィジェットを追加」から作ると、初期設定のウィジェットができます。

ページ別の絞り込みの例

絞り込みは、リール(すべて / 除外 / リールのみ)、カルーセルの表示・非表示、動画を含めるか、期間(30日 / 90日 / 365日)、キャプションのキーワード(含む / 除外)を組み合わせて使います。機能の追加についてはお知らせもあわせてご覧ください。

キーワードはカンマ区切りで複数指定でき、いずれか1つでも当てはまれば対象になります。大文字と小文字は区別されず、全角の「＃」と半角の「#」も同じものとして扱われます。1つのウィジェットで選べるのは「含む」か「除外」のどちらか一方なので、「#店舗Aを含み、#採用は除く」のような指定はできません。そうしたいときは、目印の付け方を工夫するのが近道です。

1つのウィジェットを複数のページに貼る

同じ見せ方でよいページには、同じタグを貼るだけで十分です。タグを置いた位置にそのまま描画されるので、ブログの記事テンプレートや、全ページ共通のフッターに置くこともできます。設定を変えると、そのタグを貼ったすべてのページに反映されます。

数に限りがあるプランでは、「共通で使う1つ」と「特別なページ用」に分けると、少ないウィジェットで多くのページをまかなえます。ライトプランなら、たとえば「全ページ共通のフッター用」「採用ページ用」「商品ページ用」の3つです。

1つのページに複数のウィジェットを置く

1つのページに2つ以上のウィジェットを置くこともできます。それぞれのタグは置いた位置に描画され、レイアウトもクリック時の動作も別々に動きます。たとえば、店舗ページの上部にメニュー写真のグリッド、下部にイベントのスライダー、という組み合わせです。置くときは次の点に気をつけてください。

1. それぞれの一覧の上に、「メニュー」「イベント」のような見出しをページ側で付けます。2つの一覧が何のためにあるのかが伝わります。
2. 絞り込みが重ならないようにします。同じ投稿が2回並ぶと、手抜きに見えてしまいます。
3. スマートフォンでの読み込みに配慮します。12件のグリッドを2つ置くと画像は24枚です。1つあたりの件数を減らすほうが、ページが軽くなります。

複数のウィジェットで表示数はどう数えるか

表示数は、ウィジェットがページに表示されるたびに、ウィジェットごとに1回数えます。月の上限があるフリープランとライトプランでは、その合計を上限と比べます。ウィジェットごとに上限があるわけではありません。

表示数は「見た人の数」ではなく「表示された回数」です。全ページに置いたフッターのウィジェットは、訪問者が見たページの数だけ数えられるので、いちばん表示数を使います。上限に近づいてきたら、まずフッターの一覧を見直すのが効果的です。

ウィジェット一覧のいちばん上には、今月の表示数がプランの上限とあわせて表示されます。各ウィジェットのカードには「表示回数(30日)」とグラフが出るので、どのページの一覧がよく見られているか、どれが表示数を使っているかがわかります。上限の80%と100%に達したとき、また毎週の表示数は、メールでも知らせます。

上限を超えても、その月の末までは表示を続けます。2か月続けて超えた場合は、翌月から表示を止めます(止めている間も表示数は数えます)。スタンダードプランには表示数の上限がありません。

季節や期間限定のウィジェットの扱い

夏のキャンペーンページのように、一時的にだけ使う一覧は、終わったら「非公開」に切り替えておくと便利です。非公開にすると、埋め込みタグはページに何も表示しません。サイトからタグを外さなくてよいので、翌年また使うときは「公開」に戻すだけです。

使わなくなったウィジェットは「削除」で消せます。削除は元に戻せず、そのタグを貼っているすべてのページで何も表示されなくなります。新しく作り直したウィジェットには別のタグが発行されるので、削除する前に、どのページに貼っているかを確認してください。整理のつもりで連携を解除すると、そのアカウントのウィジェットがすべて消えてしまうので注意が必要です。

管理を楽にするコツ

1. 名前は見た目ではなく、置く場所で付ける。「スライダー2」より「店舗Aページ」のほうが、どこに貼ったかがすぐわかります。
2. どのタグをどのページに貼ったか、表にして残す。
3. キャプションの目印のルールを、投稿する人と共有する。「店舗Aの投稿には必ず#店舗Aを入れる」と決めておかないと、ページに出るはずの投稿が出ません。

うまくいかないとき

2つのページに同じ一覧が出る。同じタグを両方に貼っているか、複製したウィジェットの絞り込みを変え忘れています。各ページに貼ったタグと、各ウィジェットの「WEBサイトにタグを設置」に出ているタグを見比べてください。

ウィジェットを追加・複製できない。プランの上限に達しています。使っていないウィジェットを削除するか、プランを変更してください。

新しいウィジェットが何も表示しない。公開・非公開の状態と、絞り込みで投稿が0件になっていないかをプレビューで確認します。プレビューでは出るのにページに出ない場合は、Instagramの埋め込みがサイトに表示されない原因と直し方を順に確認してください。

設定を変えたのにページが変わらない。別のウィジェットを編集していないか、名前とタグを確認してください。なお、フリープランではInstagramの新しい投稿の反映が1日1回ですが、表示件数や絞り込みなどの設定を変えたときは、次にページを開いたときに反映されます。

よくある質問

ウィジェットを増やすたびにInstagramを連携し直す必要はありますか?ありません。ウィジェットは、連携済みのアカウントの下に追加します。

1つのウィジェットの絞り込みを変えると、ほかのウィジェットも変わりますか?変わりません。複製したウィジェットも、複製した時点で設定が写されるだけで、その後はそれぞれ独立しています。

店舗ごとにInstagramアカウントが分かれています。アカウントをそれぞれ連携し、アカウントごとにウィジェットを作れます。ウィジェットの上限と月の表示数は、すべてのアカウントの合計で数えます。1つのアカウントで両店の投稿をしているなら、キャプションの目印で分けるほうがウィジェットの数を抑えられます。

WordPressで、ページごとに違うタグを貼るには?ページの編集画面で「カスタムHTML」ブロックを使い、そのページ用のタグを貼ります。詳しくはWordPressにInstagramの投稿を表示する方法をご覧ください。

まとめ

ページごとに違う投稿を見せたいときは、見せ方を変えたい場所の数だけウィジェットを作り、キャプションのキーワードなどで絞り込みます。1つ目をきちんと仕上げてから「複製」し、名前と違うところだけを直すのが手早い方法です。同じ見せ方でよいページはタグを使い回せば、ライトプランの3つでも多くのページをまかなえます。表示数は全ウィジェットの合計で数えるので、全ページに置く一覧ほど多く使う点も覚えておいてください。まずは無料で登録してウィジェットの設定を試し、ページを分けたくなったら料金プランで数を選べます。製品の紹介はSocial Feed by grip spaceのページにあります。

参考にした資料

Social Feed by grip space「料金プラン」 https://marketing-labo.jp/function/widget#wig-price

ibis studio株式会社「プライバシーポリシー」(Instagram 連携に関するデータ取扱) https://marketing-labo.jp/privacypolicy