Clipkit^® Support

Clipkitに関する情報・よくあるご質問は
こちらでご確認いただけます。

2021.06.14公開
2023.05.23更新

Clipkit For ECでInstagramのタイムラインを表示したい。

自社Instagramを活用している場合、Clipkit For ECで投稿タイムラインを表示することが可能です。この記事ではInstagramとClipkitの連携方法を解説します。

INDEX

1. 準備

連携にあたって、事前に準備が必要なことが2点あります。

①Instagramのアカウントをプロアカウントに変更する。
　参照：Instagramでビジネスアカウントを設定する

②Facebookにて「ページ」を作成し、「ページ」と上記Instagramアカウントを連携する。
　参照：Facebook「ページ」の作成
　参照：FacebookページとInstagramの連携

※ブラウザにより、正常に連携ができない事象を確認しております。その場合は別のブラウザにてお試しください。

2. Facebook開発者向けサイトでの設定

①Facebook開発者向けサイトにアクセスし、「マイアプリ」をクリックする。

開発者向けサイトはこちら：Facebook for Developers

※初めて利用する場合は、ご自身のFacebookアカウントを使用して、開発者向けサイトに登録する必要があります。画面同じ場所にある「ログイン」をクリックして、指示に従い登録を完了させてください。

②画面右上の「アプリを作成」ボタンをクリックする。

③「その他」→「ビジネス」を選択し、アプリ作成に必要な情報を記入する。

※「アプリ名」は分かりやすい名前であればどんなものでも構いません。

④「アプリに製品を追加」の画面に遷移したら、右上の「ツール」から「グラフAPIエクスプローラ」をクリックする。

⑤「Facebookアプリ」の欄に先ほど作成したアプリの名前が入っていることを確認し、「ユーザーまたはページ」にて ”ページアクセストークンを取得" をクリックし、Facebookページと連携する

⑥連携後、「アクセス許可」の下にある入力欄から画像の通り3つの項目を追加し、「Generate Access Token」をクリックする。

【追加する項目】
・instagram_basic
・business_management
・pages_show_list

⑦表示されたアクセストークンをメモしておく。

⑨画面右上の「マイアプリ」からアプリ一覧画面を表示し、先ほど作成したアプリの名前部分をクリックする。

➉「設定＞ベーシック」をクリックし、「アプリID」と「app secret」をメモしておく。

3. Instagramツールでの設定

①ツールへアクセスし、必要情報を入力する。

ツールはこちら：Instagram Graph API Acquisition tool

・Access Token 1
→前項の2-⑦でメモしたアクセストークンを入力する。

・App ID
→前項の2-➉でメモした「アプリID」を入力する。

・App Secret
→前項の2-➉でメモした「app secret」を入力する。

・FaceBook Page Name
→事前準備で連携したFacebookページ名を入力する。

②「Get Tokens!」ボタンを押して、表示された「アクセストークン3」と「Instagram Business Account ID」をメモしておく。

4. Clipkit側での設定

①マイページから管理画面にアクセスし、「定数」をクリックする。

②必要事項を入力する。

・INSTAGRAM_ACCESS_TOKEN
→前項の3-②でメモした「アクセストークン3」を入力する。

・INSTAGRAM_BUSINESS_ACCOUNT_ID
→前項の3-②でメモした「INSTAGRAM_BUSINESS_ACCOUNT_ID」を入力する。

WEBサイト構築CMS

Clipkit^® Support

Clipkit For ECでInstagramのタイムラインを表示したい。

1. 準備