ECCUBEで、ECサイトを作ることになりましたよっと。
果たして無事に作成することはできるのでしょうか💖
さて、今回はECCUBEにインスタグラムの投稿を表示させていく。
ECCUBEってさ、プラグインでちょいちょい金を奪われていくシステムだよね。
できることは、プラグインに頼らずにやっていきたい気持ちだよね。
なので、Instagram Graph APIを使ってみたいと思います。
必要なのは、インスタのビジネスIDと、無限のアクセストークンです。
はてなんのことやらね。
前提として、このふたつを手に入れるには
- Instagramアカウントをプロアカウントにすること
- Facebookページを作成してあり、Instagramのアカウントと連携していること
が必要。
APIを使えるようにするぞ！
まず、開発者向けページにアクセスします。（Facebookにログインした状態で）
開発者アカウントを持っていない人は、最初にアカウントを作成してね。
https://developers.facebook.com/
アカウントができたら、メニューから「マイアプリ」を選ぶ。
上部の「アプリを作成」をクリック。
「その他」を選択し、次へ。
「ビジネス」を選択し、次へ。
アプリの名前、メールアドレス、ビジネスポートフォリオ（任意）を選択して
「アプリを作成」をクリック。
Facebookのパスワードを求められるので入力。
アプリの設定＞ベーシックの中の
アプリIDとapp secretをメモしておく。
アクセストークン1をGETする
グラフAPIエクスプローラーへアクセス。
https://developers.facebook.com/tools/explorer?locale=ja_JP
Metaアプリを選択
許可を追加する。↓
追加するのは下記。
Events Groups Pages
・business_management
・pages_manage_ads
・pages_manage_metadata
・pages_read_engagement
・pages_read_user_content
・pages_show_list
Other
・instagram_basic
・instagram_manage_comments
・instagram_manage_insights
「Generate Access Token」をクリックして「●●さんとして続行」をクリックする。
アプリがアクセスするビジネスを選択し、続行
アプリがあるアクセスを選択し、続行
アプリがアクセスするInstagramアカウントを選択し、続行
トークン取得が不要なものにチェックを入れないように。
最後に保存をクリック、OKをクリックするとアクセストークン1が発行される。
これもメモしてね。
これは有効期限があるので、（…確か1時間とか…）
無限のアクセストークン3をゲットするまで時間をあけずにいくよー！✨
アクセストークン2をGETする
↓のURLにアクセス。
https://graph.facebook.com/v4.0/oauth/access_token?grant_type=fb_exchange_token&client_id=アプリIDを入力&client_secret=app secretを入力&fb_exchange_token=アクセストークン1を入力メモしたアプリID、app secret 、アクセストークン1を入力してアクセス。
青色のところを書き換えてね。
すると下記が表示される。
{"access_token":"トークン2はここの部分だよ","token_type":"bearer","expires_in":xxxxxxx}
めもしてね。
アクセストークン3をGETする
トークン2を下記に入力し、アクセスする
https://graph.facebook.com/v4.0/me?access_token=アクセストークン2を入力するとnameとidが表示されるのでこれもメモ。。
{
"name": "xxxxxxxx",
"id": "xxxxxxxxx"
}
そして下記のURLにアクセスする
https://graph.facebook.com/v4.0/↑で取得したidを入力/accounts?access_token=アクセストークン2を入力すると下記が表示。
{
"data": [
{
"access_token": "ここがアクセストークン3だよ！！おめでとう！",
"category_list": [
{
"id": "xxxxxxxx",
"name": "xxxxxxxxx"
},
{
"id": "xxxxxxxxxxxxxxx",
"name": "xxxxxxxxxxxxxxxxxxxx"
}
アクセストークンデバッガーで確認する。
https://developers.facebook.com/tools/debug/accesstoken
下記のように有効期限「受け取らない」スコープが許可を追加で追加したものになってればおっけー。
ページIDの数字をメモしておいてね。
あーつかれたね。あと少しだよ。
InstagramビジネスアカウントIDをGETする
下記にアクセスする。
https://graph.facebook.com/アクセストークンデバッガーで確認したページIDを入力?fields=instagram_business_account&access_token=アクセストーン3を入力すると下記が表示される。
{
"instagram_business_account": {
"id": "ここがInstagramビジネスアカウントIDだよ！"
},
"id": "xxxxxxxxxxxxxxxxxx"
}
うわー！つかれたー！！
あとは実装するだけだよー！！
ECCUBEにいざ反映！
コンテンツ管理のJavaScript管理に下記を張り付けるよ。
/* カスタマイズ用Javascript */
/*insta*/
$.ajax({
type: 'GET',
url: 'https://graph.facebook.com/v5.0/InstagramビジネスアカウントID?fields=name%2Cmedia.limit(表示する画像の数)%7Bcaption%2Clike_count%2Cmedia_url%2Cpermalink%2Cthumbnail_url%7D&access_token=アクセストークン3',
dataType: 'json',
success: function(json) {
var ig = json.media.data;
var html = "";
for (var i = 0; i < ig.length; i++) {
var link = ig[i].permalink;
var image;
if(!ig[i].thumbnail_url) {
image = ig[i].media_url;
} else {
image = ig[i].thumbnail_url;
}
html += '<li><a href="' + link + '" target="_blank"><img src="' + image + '"></a></li>'
}
$(".ec_instagram").append(html);
}
});これさー、最初、media_urlで投稿URLを取得してたわけ。
そしたら、リールのサムネイルが表示されなくて、えーーーっなんでやねーん。てなったわけ。
なので、thumbnail_urlでリールのurlを取得しているよ。
次に、コンテンツ管理のブロック管理から、新しいブロックを作成するよ。
ブロック名とファイル名は好きなものを。
<div class="ec_instaRole">
<h3>Instagram</h3>
<ul class="ec_instagram"></ul>
</div>CSSはひとまずこんな感じ。
/*Instagram*/
.ec_instaRole{
max-width: 1130px;
margin: 0 auto;
}
.ec_instagram{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0;
}
.ec_instagram li{
width: calc(100% / 5);
list-style: none;
}
.ec_instagram img{
width: 100%;
object-fit: cover;
height: 230px;
}
@media screen and (max-width:599px){
.ec_instagram li{
width: calc(100% / 3);
}
.ec_instagram li:last-child{
display: none;
}
.ec_instagram img {
height: 120px;
}
}そして、レイアウト管理から好きなところにブロックを配置したら完成！🎉a
おっつかれさまでしたー！！