Embedsocialでは、Instagramのリール動画をウィジェットとして生成し、WEBサイトに適したデザインで埋め込み表示することができます。
リール動画の埋め込みには２つの方法があります。
リール動画のURL使って動画をサイトに表示する方法
Instagramアカウントを接続し投稿の中からリール動画のみを表示させる方法
皆様の状況に合った方法で設定を進めてください。
全体の流れは以下の通りです。
以下にステップごとに解説します。
方法1：リール動画のURLを使ってWEBサイトに表示させる方法
この方法は、Instagramが発行するリール投稿ごとのリンクURLを使って、Webサイトに埋め込むためのウィジェットを作成します。リール動画の数が少ない場合に向いている方法です。
1-1.「ソースの追加」からInstagram投稿を取り込み
ログイン後、管理画面左の「ソースの追加」からプラットフォームの選択画面に移ります。そこでInstagramを選択します。
1-2. 「URLで投稿を追加」を選択
「URLで投稿を追加」を選ぶと、特定の投稿だけをピンポイントで取り込めます。
「次へ」で、投稿URLを入力するステップへ進みます。
1-3. Instagramリール動画の公式埋め込みURLを取得する
Instagram側でリール動画を開き、３点メニューをクリックします。
「リンクをコピー」で投稿URLをコピーし、あとでEmbedSocialに貼り付けます。
1-4. ソースの接続
コピーしたリンクを貼り付け、「ソースの接続」を押して、貼り付けたURLから投稿を取得します。
1-5. ウィジェットの作成
取得できたら「ウィジェットの作成」で、そのままサイト掲載用のウィジェット作りへ進めます。
1-6. 「AIで始める」を選択し、テンプレートを作成する
「AIで始める」を選ぶと、目的に合ったレイアウトを素早く提案してくれます。
テンプレートをベースにするとより早く理想のデザインを作成できます。
1-7. デザインを調整して保存する
編集画面で、AIとチャットしながらデザインを調整していきます。
なお、左側サイドメニューから「テンプレート」をクリックすると、デザイン全体をすぐに変えることができますので、お試しください。
その他の編集については、以下の記事の詳細がございますのでご参照ください。
編集が終わりましたら、画面右上の保存をクリックして編集内容を確定させます。
1-8. 埋め込み用コードを取得しWEBサイトに貼り付ける
サイドメニューの「埋め込み」をクリックして、WEBサイトの埋め込み用コードの取得セクションを開きます。
みなさんのWEBサイトに適したコードのタイプを選び、「コードをコピーする」をクリックして、サイトのご希望の場所に貼り付けて、設定は完了です。
方法2：Instagramアカウントを接続しリールだけを表示させる方法
この方法は、一度Instagramアカウントを接続しアカウント内の投稿を取り込んだ後、リールだけを表示させる方法です。トグルのON/OFFで表示を切り替えられるので、複数のリール動画を埋め込み表示したい場合に適しています。
2-1.「ソースの追加」をクリック
「ソースの追加」をクリックしてソース（投稿収集元）の設定に進みます。
2-2. Instagramをソースとして選択
取り込み元にInstagramを選んで、投稿をソースとして追加しましょう。
2-3. Instagramビジネスアカウントを接続する
@ビジネスにチェックが入っていることを確認し「次へ: アカウントを接続する」をクリックします。
EmbedSocialに選択済みのInstagramアカウントの中から、WEBサイトに表示させたいリール動画を含むアカウントを選択します。
EmbedSocialとInstagramビジネスアカウントの設定が初めての場合は、Facebookとの接続などのステップに誘導されます。画面の指示に従いお進みください。
InstagramビジネスアカウントとEmbedSocialの接続については、以下の記事で詳細をご確認ください。
2-4. ウィジェットの作成
取得できたら「ウィジェットの作成」で、そのままサイト掲載用のウィジェット作りへ進めます。
2-5.「モデレーション」をクリック
エディター画面が表示されたら、上部メニュータブから「モデレーション」をクリックします。
2-6. 投稿の表示・非表示を設定する
モデレーションページでは、ウィジェット上での投稿の表示・非表示を設定することができます。
個別に設定する場合は、各投稿の右側＝「ウィジェットに表示」列のトグルのON/OFFを切り替えてください。
操作する投稿が多い場合は、モデレーションページ上にある一括操作オプションが便利です。例えば、アカウント内の投稿のうちリール動画の数が少ない場合は、一度全ての表示を無効化＝非表示にして、その後リール動画のみ表示をONにする方法が効率的です。
2-7. リール動画の表示を確認後デザインを調整する
これで希望のリール動画だけがウィジェットに表示されるようになりました。
続いてエディター画面で、AIとチャットしながらデザインを調整していきます。
なお、左側サイドメニューから「テンプレート」をクリックすると、デザイン全体をすぐに変えることができますので、お試しください。
その他の編集については、以下の記事の詳細がございますのでご参照ください。
編集が終わりましたら、画面右上の保存をクリックして編集内容を確定させます。
2-8. 埋め込み用コードを取得しWEBサイトに貼り付ける
サイドメニューの「埋め込み」をクリックして、WEBサイトの埋め込み用コードの取得セクションを開きます。
みなさんのWEBサイトに適したコードのタイプを選び、「コードをコピーする」をクリックして、サイトのご希望の場所に貼り付けて、設定は完了です。
ご不明な点は、いつでもお問い合わせください。担当チームから回答させていただきます。
サブスクリプション・ご契約等に関するお問い合わせ先：セールスチーム
操作方法についてのお問い合わせ先：カスタマーサクセスチーム
画面右下のチャットボタンからお問い合わせください