完全な自社用忘備録その・・久しぶり。（自社用なので、テキストのみです。間違ってたらゴメンナサイ）

ショッピングカートにInstagramを埋め込む案件発生

ただ今まで使っていた仕組みはPHPファイルでやってましたので、「カラーミーショップ」「Make shop」など、ユーザー側が作成したPHPの使用ができないサイトでは使えないです。

それに関連してできるようにした＆Ver22.0で新規取得した流れです・・・

いつものようにInstagramAPIはマイアプリで設定しますが、修正よりも「新規」でアプリを作り直した方が失敗が少なくて済みます。

 

前提として

・今回はすでに利用していたfacebookアカウントでの再設定

まず、FBに該当アカウントでログインしている状態で下記にアクセス
https://developers.facebook.com/

上部メニューより「マイアプリ」を選択

 

❶ まずは 

エラーとなったアプリで表示されているので（後で削除推奨）、それは無視して「アプリを作成」クリック

アプリの詳細：「アプリ名」を入れる（連絡先は入力済みと思います）

ユースケース：「その他」を選択

ビジネス：（アプリタイプを選択では）「ビジネス」を選択

 

❷ 1番目のアクセストークンを取得

 上部メインメニューの「ツール」→「グラフAPIエクスプローラ」をクリック

「ユーザーアクセストークンを取得」を選択し表示されたら、アクセス許可は以下を設定

business_management
pages_manage_ads
pages_manage_metadata
pages_read_engagement
pages_read_user_content
pages_show_list
instagram_basic
instagram_manage_comments
instagram_manage_insights

その後【Generate Access Token】クリックして
【１番目のアクセストークン】を取得 

※このクリックしてから色々（連携をとるインスタのID等）聞いてくるようになってますが、選択式なのでわかると思います。

※またこれ以降、アクセストークンとIDを取る作業は過去バージョンと同じです。

 

❸ 2番目のアクセストークンを取得

表示されたアクセストークンの左側にある〇に！をクリックするとアクセストークン情報が表示されるので、「アクセストークンツールで開く」をクリックアクセストークンデバッガー - Facebook for Developers
が開くので、【アクセストークンを延長】をクリック。

すると、「この長期アクセストークンは〇〇〇〇年〇〇月〇〇日に期限切れとなります」(有効期限２か月のトークン)と表示されるので、
表示されたトークン横の「デバック」クリック
すると、アクセストークンデバッガーページが更新され、再度表示されます。
この時一番上に表示されるのが、
【２番目のアクセストークン】です。

 

❹ 3番目のアクセストークンを取得

❷で表示した、「グラフAPIエクスプローラ」を開き、
・アクセストークンの項目に【2番目のアクセストークン　】を入力
・GET▼→v?.0▼/の欄に【　me/accounts　】と入力。
・「送信」クリック
すると中央に"data":～～が表示されるので、該当する"name"の"access_token"が、
【3番目のアクセストークン】です（無期限トークンです）
※無期限トークンかどうかは、
https://developers.facebook.com/tools/debug/accesstoken
にアクセス後、３番目のアクセストークンを入力して「デバック」して、期限が切られてなければOKですが、３番目のアクセストークンが以後の流れではあまり重要ではないので確認の必要はない。

 

❺ エラー

再度❷番で表示した、「グラフAPIエクスプローラ」を開き、
・アクセストークンの項目に【　３番目のアクセストークン　】を入力。
・GET▼→v?.0▼/の欄に【　me?fields=accounts{instagram_business_account}　】と入力
・「送信」クリック
すると必ず「エラー」となります。（検証したらVer8.0からどうも以下の流れになってた）

 

❻ 今度はOK？

❺番でエラーになった後に、（以下は❸番で画面更新された後に再度デバックするのと同じ作業ですが、❺番で１度エラーにならないとなぜか無期限トークンに切り替わらない）
アクセストークンデバッガー：
https://developers.facebook.com/tools/debug/accesstoken
にアクセス後、「２番目のアクセストークン」を入力して「デバック」
すると、アクセストークンデバッガーページが更新され、２番目のアクセストークンが綴りはそのままに【無期限トークン】に切り替わります。
この時一番上に表示されるのが、
【（便宜上）４番目のアクセストークン（＝２番目のアクセストークン）】です。

 

❼ Instagramビジネスアカウント

❺番と同じ手順で、４番目のアクセストークンで実行すると、エラーとならず
中央に"accounts"～が表示されるので、該当する"instagram_business_account"の値が【Instagramビジネスアカウント】です。
（複数を管理している場合、複数現れますので、❷番目で表示されるアカウント順の場所が該当するアカウントになります）

 

➑ 確認

下記で【４番目のアクセストークン】【Instagramビジネスアカウント】を該当箇所に置き換えて

https://graph.facebook.com/v22.0/【Instagramビジネスアカウント】?fields=name%2Cmedia.limit(【表示件数】)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Ctimestamp%2Cusername%7D&access_token=【４番目＝２番目のアクセストークン】

（バージョンは最新を記入）
ブラウザ（Firefoxがお勧めです）で実行して、JSON形式情報が表示すれば完了です

 

補足

❺番の一度エラーにならないと・・・というところはVer19での同様で、毎度のことながら今回もアプリを何度作り直しても、別のFBアカウントでも同じ結果でした。
なんなんだろ、これ・・・。

 

で、古いバージョンで作ったアプリは「APIバージョンのアップグレード」をちょいちょい連絡が、Meta上で来ます。

これは無視せず、リンク先を確認して必要あらばアップグレードが必須作業です

 

で埋込ですが、今まではPHPを書いて埋め込んでましたが、最初に書いたようにショッピングカートの仕様上、PHPは使えなくしてあります。

なので、いろんなサイトを参考にして外部ファイルを読み込ませる方式で解決しています。（ついでにセキュリティ対策も）

 

で、毎度の締めの営業です！

上記の設定（自動更新で最新記事から複数のInstagram投稿をHPに表示させる）を弊社では保守の一環でやってましたので、バージョンアップに伴う障害発生での作業は保守内で行うのですが、情報収集の過程でこれ有料サービス（単発対応で5～10万円！！）してるとこいっぱいあるやん！に気づきました！！

どうしてもうまくいかんのやけど・・・

ショッピングカートにインスタ埋め込みたいんだが・・・な全国のあなた！

保守（今回の対応だけでも元取れますよｗ）を依頼いただければ、保守の一環でやっちゃいますよ～と一応営業しておきます！（保守ありきなので結局は有償やんか！の声は聞きません・・・だってこれ意外と工数食うんです）