Sauce by SNPT (Snapppt) のInstagramフィード埋め込みコード取得・設定方法

アカウントの取得・連携設定

はじめに

Sauce by SNPT (Snapppt) は外部サービスのため、予告なく仕様やサービスの内容が変更される可能性があります。あらかじめご了承ください。

ここで掲載しているInstagramフィード表示設定の設定方法は、Leendeが制作したBASEデザインテーマ「SMILE」「GOODLIFE」をご利用いただいている方が対象となります。

Sauce by SNPT (Snapppt) の設定には下記が必要になるようです。

  • Facebookページ
  • Instagramのプロアカウント(ビジネスアカウント or クリエイターアカウント)
  • FacebookページとInstagramのプロアカウントのリンク設定

Sauce by SNPT (Snapppt) でアカウントを取得する前に設定を済ませておいた方がスムーズかと思います。FacebookページとInstagramのリンク設定ができていない場合、Sauce by SNPT (Snapppt) のアカウント取得でエラーが出て先に進めませんでした。

以下の手順は、2022年12月現在のものです。Sauce by SNPT (Snapppt) 側で手順の変更などがあった場合、掲載しているキャプチャーと異なることがございます。

Sauce by SNPT (Snapppt) は外部サービスのため、サポートいたしかねます。アカウントの取得・設定が進まない場合は、お手数ですがSauce by SNPT (Snapppt) の ヘルプ をご覧いただき、それでも解決しない場合は、ヘルプページ画面右下の よりSauceのサポートにご連絡をお願いいたします。

サインアップ

Sauce by SNPT (Snapppt) の公式サイト にアクセス。

右上の Sign Up Free をクリック。

アカウントの作成

下記を入力し、reCAPTCHA にチェックを入れ、Create your account をクリック。

  • Instagramのユーザーネーム
  • Sauseで使用するメールアドレス
  • Sauseで使用するパスワード

Instagramアカウントの連携

ここからInstagramのプロアカウントとFacebookページへの連携設定が開始します。
Connect Instagram をクリック。

Facebookへのログイン

Facebookページを管理しているアカウントでログイン。

スタートをクリック。

Instagramにログイン

Sauseと連携させたいInstagramアカウントでログイン。

Instagramがプロアカウントになっていない場合

Instagramがプロアカウントになっていない場合は、下記のキャプチャーのように、ここで設定画面が出るかもしれませんので、画面に従い設定をしてください。

すでにプロアカウントをお持ちの方は次へお進みください。

Instagramアカウントの選択

Sauceで利用したいInstagramアカウントにチェックを入れ、次へをクリック。

Facebookページの選択

Sauceからのアクセスを許可するFacebookページにチェックを入れ、次へをクリック。

Sauceに許可するアクセスの設定

すべてのオプションがONにしないといけないようです。
スクロールしてすべてONになっていることを確認し、完了をクリック。

Facebookへのリンク完了

OKをクリック。

下のようなキャプチャーが表示されれば成功です。
Next をクリックして、アンケートに答えていきます。

下のようなキャプチャーが表示されない時もあるようです。
その場合はアンケートも表示されないかもしれませんので、その場合は「Eメールの確認」へお進みください。


エラーが出た場合

InstagramとFacebookページのリンクができていない可能性がありますので、FacebookページでInstagramとのリンクをご確認ください。

アンケートに答える

いくつかのアンケートに答えます。
英語での質問ですので、一応翻訳かけただけの訳を画像に入れていますので、ご参考まで。

これでアンケートは終了です。

Eメールの確認

Sauceのアカウント作成で登録したメールアドレス宛に Confirm your Sauce account email という件名で、下記のメールが届いているはずです。

このメールの CONFIRM EMAIL をクリックすれば、アカウントの取得・連携設定は完了です。

注)確認メールが届かない場合

下記を行ってみてください。

  • 迷惑メールフォルダを確認する

  • 迷惑メールフォルダにも届いていない場合は、メールアドレスが間違っている可能性がありますので、Verify Your Emailの画面の下のフォームに「正しいメールアドレス」を入力し「Update」を押す

  • それでもメールが届かない場合は「下記以外のメールアドレス」を入力し「Update」を押す
    • 初回登録時のメールアドレス
    • 上記のUpdateで入力したメールアドレス



フィード埋め込みコードの取得

フィード埋め込みコードの取得

Sauceにログイン

ナビゲーションの Visual Shopping → Live Feed Galleries をクリック。

左側のメニューに、Live Instagram feed embed code の下にある Copy embed code をクリックするとコードがコピーされます。

コピーしたコードはBASEの管理画面「デザイン → テーマ設定 →【Instagram】フィード埋め込みコード」に貼り付けてください。



Galleryの設定

Theme

ブラックとホワイトがあるようですが、変化が見られませんでした。


Style-1(Grid)

正方形のグリッドレイアウトです。


Style-2(Stack)

スタイルを見るとMasonryのようなレイアウトで、積み重なるようですが、変化が見られませんでした。


Style-3(Carousel)

カルーセルスライドになるようです。
投稿数、画像の高さ、自動再生、次のスライドに切り替わるまでの時間が設定できます。

画像の高さは変更できましたが、画像の幅と画像の比率は変更できませんでした。


Style-4(Mosaic)

グリッドが4倍の大きさになる箇所があるレイアウトです。


Style-5(Portrait)

画像比率が縦長のグリッドレイアウトです。


Rows & Columns

行と列の設定です。


Gutter Width

画像と画像の間の余白の設定です。


Outer Margin

フィード全体の左右の余白の設定です。


Rounded Posts

画像の角丸の設定です。角の角度は変更できませんでした。
Gutter Widthと併せた方が良さそうです。


Zoom on Hover

マウスが画像の上に乗った時にズームさせるかの設定です。


Embed Heading & Sub Heading

見出しやテキストの設定です。
デザインテーマには「INSTAGRAM」の見出しを設置しておりますので、基本的には空欄で構いませんが、補足で文言を入れたい時にこちらをお使いください。

デザインテーマでは、Style(H1〜H6)は文字の大きさが変わるように設定してあり、Positionも位置が変更できます

Embed Heading & Sub Headingの設定は、BASEの管理画面ではなく、Sauceの管理画面で設定してください。




補足

投稿が反映されない時

設定直後は投稿の読み込みが不安定な感じがしました。

Instagramで投稿しても、すぐにSauceに反映しないことがありました。その際は少し時間を置いてからご確認ください。

またGallery Style、Rows、Columns、Posts(Style-3の場合のみ)の設定の際に、正常に読み込まれないケースがあるかもしれませんが、この場合も少し時間を置いて様子を見てください。