fbpx

BLOG カラーミーショップにInstagram画像を表示させるカスタマイズ（Instagram Graph API対応 2019年版）

Category: ECサイト

カラーミーショップにInstagram画像を表示させる（Instagram Graph API対応 2019年版）

カラーミーショップのテンプレートにInstagramの画像（フィード）を表示させるには、Instagram APIと「instafeed.js」のようなｊQueryを使った方法が簡単でしたが、
Instagram APIからInstagram Graph APIへの移行に伴い、2019年10月15日以降に新しくアカウントを作れなくなってしまいました。
これから取得する場合には、新しいInstagram Graph APIを使用しなければなりませんが、Instagram Graph APIに対応していないjQueryのライブラリは使えなくなります。

この記事を書いている時点では以前に取得したInstagram APIを使ってInstagramの画像を表示できていますが、2020年で提供終了がアナウンスされていますのでそれまでに切り替えが必要となります。

カラーミーショップにInstagram画像を表示させる為に必要となるもの

カラーミーショップのテンプレートにInstagram画像を表示させるには、以下の情報が必要となります。

  • 「ビジネスアカウント」に設定してるInstagramアカウント
  • InstagramアカウントとリンクさせているFacebookページ
  • facebook for developersのアカウント
  • Instagram Graph APIのアクセストークン
  • Instagram Graph APIのビジネスアカウントID

facebook for developersのアカウントは、Facebookのアカウントを持っていれば取得できます。

Instagram Graph APIのアクセストークンとIDを取得する方法

Instagramp DeveloperのサイトにリンクがあるInstagram Basic Display APIはアクセストークンの有効期限が1時間と短いので、有効期限がないInstagram Graph APIのアクセストークンを取得します。

Instagram Graph APIを使う場合、Instagram APIの時とは違い手順が多くなります。
簡単に流れをご紹介すると下のような流れになりますが、3段階のアクセストークンを取得しなければならないので時間を要します。

  1. Instagramアカウントをビジネスアカウントに切り替える
  2. Facebookページの新規作成（運用しているページがない場合）
  3. FacebookページとInstagramアカウントをリンクさせる
  4. facebook for developersでFacebookアプリを作成
  5. 1段階目のアクセストークンを取得する
  6. 2段階目のアクセストークンを取得する
  7. 3段階目のアクセストークンを取得する
  8. InstagramビジネスアカウントIDを取得

カラーミーショップのテンプレートにInstagramの画像を表示させるカスタマイズに必要となるのは、3段階目のアクセストークンとInstagramビジネスアカウントIDになります。
以後のステップで使うので、メモしておきます。

リンク先のサイトにアクセストークンとビジネスIDの取得方法が詳しく書かれています。
但し、カラーミーショップの場合はphpを使う方法が使えませんので、テンプレートに表示させる方法はこの記事を読み進めて下さい。

参考ページ：ARROWNブログ

カラーミーショップのテンプレートにInstagramの画像を表示させるカスタマイズ

ここまででカスタマイズの準備が整いました。
カラーミーショップのテンプレートにInstagramの画像を表示させるにはphpファイルを使った方法がベターですが、カラーミーショップではスクリプトを実行させるファイルの読み込みを禁止していますのでphpファイルを使った方法は使えません。
※カラーミーショップのFTPオプションを使用した場合でも読み込めません

今回はjQueryを使う方法で、カラーミーショップのテンプレートにInstagramの画像を表示させます。

JavaScript

先程取得したアクセストークンとビジネスアカウントIDを下のURLサンプルを使って差し替えてください。

アクセストークンとビジネスアカウントIDを差し替えたURLを下のコードの【URL】の箇所に貼り付けます。
HTMLはお好みで調整してください。

HTML

Instagramの画像を表示させたい箇所に以下のコードを設置します。
CSSはサイトに合わせて調整してください。

まとめ

アクセストークンとビジネスアカウントIDの取得が大変ですが、難しいところはないかと思います。
注意するのは、3段階目のアクセストークンを間違えないようにすることです。
複数のFacebookページを管理している場合、全ページのデータが羅列されていますので、該当するページのアクセストークンを使用しなければ目的のビジネスIDが取得できません。
「name」の行にFacebookページの名前が表示されています。
日本語はUnicodeで表示されているので、Unicodeエスケープシーケンス変換ツールなどを使って通常テキストに変換すれば読めるようになります。

ホーム > ECサイト > カラーミーショップにInstagram画像を表示させるカスタマイズ（Instagram Graph API対応 2019年版）