目次
アカウントの取得・連携設定
- はじめに
- サインアップ
- アカウントの作成
- Instagramアカウントの連携
- Facebookへのログイン
- Instagramにリンク
- Instagramにログイン
- Instagramアカウントの選択
- Facebookページの選択
- Sauceに許可するアクセスの設定
- Facebookへのリンク完了
- アンケートに答える
- Eメールの確認
フィード埋め込みコードの取得
Galleryの設定
- Theme
- Gallery Style
- Rows & Columns
- Gutter Width
- Outer Margin
- Rounded Posts
- Zoom on Hover
- Embed Heading & Sub Heading
補足
アカウントの取得・連携設定
はじめに
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にリンク
スタートをクリック。
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
ブラックとホワイトがあるようですが、変化が見られませんでした。
Gallery Style
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の場合のみ)の設定の際に、正常に読み込まれないケースがあるかもしれませんが、この場合も少し時間を置いて様子を見てください。