2021年9月16日 / 最終更新日時 : 2023年5月22日 info@rishuntrading.co.jp

Instagramとの連携方法(2023年2月更新)

今回は、備忘録も兼ねてInstagramとの連携について記載させて頂こうと思います。

具体的には、Instagramから記事の内容を取得し一覧表示を行い、該当記事をクリックした際には、その詳細内容を表示するといった方法になります。FacebookのGraph APIを使います。

(注意事項:2023/2/21時点の情報です。)

Agenda

前提条件

本項の記載は、既に以下を実施済みの方を対象にしています。

Instagramアカウント/Facebookアカウントを保有
Facebookアカウントに、Instagramアカウントを紐づけ
Facebook開発者アカウントの保有

もし、まだの人は、Googleなどの検索エンジンでそれぞれのやり方について、お調べ頂きお手続きください。

それでは実際にやっていきましょう！

１．トークンを発行する。

Facebook グラフ API explorerにアクセスし、トークンを取得していきます。

(1)Facebook グラフ API explorerにアクセスします。

https://developers.facebook.com/tools/explorer/

※2023/02/21現在のバージョンはv16.0です。

(2)右側のアクセストークンの画面で設定します。

Facebookアプリ：既に作成済みのFacebookアプリを指定します。

ユーザーまたはページ：ユーザ―アクセストークンを取得を指定します。

Facebookアプリとユーザーアクセストークンを指定

(3)アクセス許可に下記の項目を追加します。

※2021/9/15時点で、今回11項目を追加しています。

Events Groups Pages

・business_management

・pages_manage_ads

・pages_manage_engagement

・pages_manage_metadata

・pages_manage_posts

・pages_read_engagement

・pages_read_user_content

・pages_show_list

　Other

・instagram_basic

・instagram_manage_comments

・instagram_manage_insights

合計１１個指定しています。

(4)「Generate Access Token」ボタンを押下します。

「Generate Access Token」ボタンを押下します。

(5)発行されたトークンは後で使いますので、エディターに貼り付けておいて下さい。

コピーしエディターなどに貼り付けておきます。

２．トークンの有効期限を無期限にします。

発行されたトークンの有効期限はデフォルト２時間ですので、無期限にします。

(1)本設定には、「アプリID」と「app secret」が必要となります。マイアプリから取得します。

マイアプリを指定します。

(2)「アプリID」と「app secret」をエディターなどにコピーしておきます。

｢app secret｣を表示するには、｢パスワードの入力｣が求められますので、お使いのアカウントのパスワードを入力して表示後コピーして下さい。

「アプリID」と「app secret」をメモしておきます。

(3)下記のURLにブラウザでアクセスし、発行されたトークン(以降、「トークン２」と呼びます。)をメモしておきます。

https://graph.facebook.com/v16.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【トークン】

1	https://graph.facebook.com/v16.0/oauth/access_token?grant_type=fb_exchange_token&client_id=【アプリID】&client_secret=【app secret】&fb_exchange_token=【トークン】

※【アプリID】、【app secret】、【トークン】は前の項でメモした値をいれてください。

以下のような形で返却されてきますので、「トークン２」として保存しておきます。

{"access_token":"ここをトークン２としてメモします。","token_type":"bearer","expires_in":5180277}

1	{"access_token":"ここをトークン２としてメモします。","token_type":"bearer","expires_in":5180277}

(4)下記URLに再びブラウザでアクセスします。

https://graph.facebook.com/v16.0/me?access_token=【トークン2】

1	https://graph.facebook.com/v16.0/me?access_token=【トークン2】

※【トークン２】は前の項でメモした値を入れて実行してください。

(5)発行されたIDをエディターなどにコピーしておきます。

{
   "name": "XXXXXXXXXXXXXXXXXXXXXXXXX",
   "id": "(このIDをコピーしておきます。)"
}

{

"name": "XXXXXXXXXXXXXXXXXXXXXXXXX",

"id": "(このIDをコピーしておきます。)"

}

(6)下記URLにブラウザでアクセスします。

https://graph.facebook.com/v16.0/【前の項で取得したID】/accounts?access_token=【トークン2】

1	https://graph.facebook.com/v16.0/【前の項で取得したID】/accounts?access_token=【トークン2】

※「前の項で取得したID」と「トークン２」は前の項でメモした値を入れて実行してください。

(7)発行されたトークン(以降、トークン３と呼びます。)をエディターなどにコピーしておきます。

このトークン３が有効期限が無期限のトークンとなります。

{
   "data": [
      {
         "access_token": "(ここをコピーしておきます。)",
         "category": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
         "category_list": [
            {
               "id": "XXXX",
               "name": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
            }
         ],
         "name": "RishunTrading\u682a\u5f0f\u4f1a\u793e",
         "id": "XXXXXXXXXXXXXXX",
         "tasks": [
            "ANALYZE",
            "ADVERTISE",
            "MESSAGING",
            "MODERATE",
            "CREATE_CONTENT",
            "MANAGE"
         ]
      }
   ],
   "paging": {
      "cursors": {
         "before": "MTA3ODE4MDc3MzkwMzY1",
         "after": "MTA3ODE4MDc3MzkwMzY1"
      }
   }
}

{

"data": [

{

"access_token": "(ここをコピーしておきます。)",

"category": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",

"category_list": [

{

"id": "XXXX",

"name": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"

}

"name": "RishunTrading\u682a\u5f0f\u4f1a\u793e",

"id": "XXXXXXXXXXXXXXX",

"tasks": [

"ANALYZE",

"ADVERTISE",

"MESSAGING",

"MODERATE",

"CREATE_CONTENT",

"MANAGE"

]

}

"paging": {

"cursors": {

"before": "MTA3ODE4MDc3MzkwMzY1",

"after": "MTA3ODE4MDc3MzkwMzY1"

}

(8)念のため、トークン３が無期限になっているかを確認します。

アクセストークンデバッカーにアクセスし、トークン３を入力後、「デバッグ」ボタンを押下します。

トークン３を入力し「デバッグ」ボタンを押下

有効期限が「受け取らない」になっていれば、無期限になっています。

有効期限が「受け取らない」になっているかを確認

３．InstagramビジネスIDの取得

(1)グラフAPIエクスプローラーにアクセスします。

https://developers.facebook.com/tools/explorer/

(2)アクセストークン欄にトークン３を入力した状態で、InstagramビジネスID取得のファンクションを実行します。

アクセストークン欄にトークン３を入れます。

アクセストークン欄にトークン3の入力

入力欄には｢me?fields=instagram_business_account 」を入れて、送信ボタンを押下します。

入力欄に「me?fields=instagram_business_account 」を入れて、送信ボタンを押下

(3)発行されたInstagramビジネスIDをコピーしておきます。

{
  "instagram_business_account": {
    "id": "ここがInstagramビジネスIDになります。"
  },
  "id": "xxxxxxxxxxxxxxxxxxxx"
}

{

"instagram_business_account": {

"id": "ここがInstagramビジネスIDになります。"

"id": "xxxxxxxxxxxxxxxxxxxx"

}

４．Facebook Graph APIを使用したプログラムを作成

JavaScript(jQuery利用)からFacebook Graph APIを使って、Instagramから記事を取得し表示するプログラムをここでは例として挙げます。

(PHPの事例は多くあったので、今回はJavaScriptで)

//------------------------------------------------
// Instargram連携
//------------------------------------------------
jQuery(window).on('load', function() {
    var count = 0;
    var limit = 10; //表示件数
    var text = '';
    var data;
    var graph_api = 'https://graph.facebook.com/v16.0/';
    var accessToken = 'XXXXXXXXXXXXXXXXX'// アクセストークン3
    var businessID = 'XXXXXXXXXXXXXXXXX'; //InstagramビジネスID
    var fields = 'media{caption,media_url,permalink,timestamp,username}';
    var url = graph_api + businessID + '?fields=' + fields + "&access_token=" + accessToken;
    $.ajax({url: url})
    .done(function(res){
        data = res.media;
        limit = 12;
        count = 0;
        $.each(data, function(index, val) {
        $.each(val, function(i, elem) {
            if (elem.media_url && count < limit) {
                text1='<li><div class="linkinsta">';
                text2 = '<img class="imginsta" src="'+elem.media_url+'">';
                date = new Date(elem.timestamp);
                month = date.getMonth() + 1;
                text3 = '<span class="insta-timestamp">'+month+'月'+date.getDate()+'日</span><span class="writer">'+elem.username+'</span>';
                text4 = '<h3 class="h3ttlinsta">'+elem.caption+'</h3>'
                text5 = '</div></li>';
                count ++;
                text = text + text1 + text2 + text3 + text4 + text5;
            }
        });
        });
        $('#instagram-list').html(text);
    })
    .fail(function(jqXHR, status){
        $('#instagram-list').html('<li>読み込みに失敗しました。</li>');
    })
});

//------------------------------------------------

// Instargram連携

//------------------------------------------------

jQuery(window).on('load', function() {

var count = 0;

var limit = 10; //表示件数

var text = '';

var data;

var graph_api = 'https://graph.facebook.com/v16.0/';

var accessToken = 'XXXXXXXXXXXXXXXXX'// アクセストークン3

var businessID = 'XXXXXXXXXXXXXXXXX'; //InstagramビジネスID

var fields = 'media{caption,media_url,permalink,timestamp,username}';

var url = graph_api + businessID + '?fields=' + fields + "&access_token=" + accessToken;

$.ajax({url: url})

.done(function(res){

data = res.media;

limit = 12;

count = 0;

$.each(data, function(index, val) {

$.each(val, function(i, elem) {

if (elem.media_url && count < limit) {

text1='<li><div class="linkinsta">';

text2 = '<img class="imginsta" src="'+elem.media_url+'">';

date = new Date(elem.timestamp);

month = date.getMonth() + 1;

text3 = '<span class="insta-timestamp">'+month+'月'+date.getDate()+'日</span><span class="writer">'+elem.username+'</span>';

text4 = '<h3 class="h3ttlinsta">'+elem.caption+'</h3>'

text5 = '</div></li>';

count ++;

text = text + text1 + text2 + text3 + text4 + text5;

}

});

$('#instagram-list').html(text);

})

.fail(function(jqXHR, status){

$('#instagram-list').html('<li>読み込みに失敗しました。</li>');

})

});

５．出力したHTMLをCSSでレイアウトを整える。

次に出力したHTMLをCSSで整えます。あくまでも例です。リスト表示をクリックするとモーダルで開くようにしています。

.ul-instagram{
	list-style:none;
	display:flex;
	flex-flow:row wrap;
	width:100%;
}
.ul-instagram>li{
	flex:0 0 50%;
	display:inline-block;
	color:#fff;
	margin-bottom:10px;
	width:50%;
	padding:0 5px;
}
.linkinsta{
	display:block;
	transition:0.2s;
	width:100%;
	position:relative;
}
.linkinsta:before{
	content:'';
	display:block;
	width:100%;
	padding-top:100%;
}
.linkinsta:hover{
	filter:brightness(1.2);
}
.imginsta{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
	position:absolute;
	top:0;
	left:0;
}
.h3ttlinsta{
	font-size:14px;
	color:#fff;
	text-overflow:ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display:none;
}
.insta-timestamp{
	display:none;
}
.writer{
	display:none;
}
/* modal dialog */
.insta-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height: 100vh;
    background:rgba(0,0,0,0.8);
    display:none;
	z-index: 99999;	
}
.insta-modal-wrap{
    position:absolute;
    width:100%;
    max-width:600px;
    margin:0 auto;
    max-height: calc(100vh - var(--tophead-size1));
    min-height: 180px;
    overflow:scroll;
	top:50px;
    background:#f5f6f7;
}
.insta-box{
    display:block;
    width:100%;
    background:#f5f6f7;
}
.insta-img{
    width:100%;
}
.insta-author{
	background:#fff;
	padding: 16px 24px;
	margin-bottom:20px;
	font-weight:600;
	font-size:14px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.insta-word{
    width:100%;
	margin-bottom:60px;
}
.insta-date{
	background:#fff;
	padding: 16px 24px;
	font-size:14px;
}
.insta-text{
	background:#fff;
	padding: 0 24px 40px;
	font-size:14px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}
.insta-close-btn{
    position:sticky;
	left:10px;
	bottom:10px;
	top:auto;
	right:auto;
}
.insta-close-btn>a{
    display:flex;
	justify-content:center;
	align-items:center;
    width:50px;
    height:50px;
    color:#fff;
    background:var(--main-color);
    border-radius:50%;
	font-size:30px;
	line-height:30px;
	margin-left:10px;
	margin-bottom:10px;
	padding-bottom:3px;
	transition:0.3s;
}
.insta-close-btn>a:hover{
	filter:brightness(1.2);
}
@media (min-width: 576px){
	.ul-instagram>li{
		flex:0 0 33.333%;
		padding:0 5px;
		display:flex;
		justify-content:center;
		align-items:center;
		width:33.333%;
	}
}
@media (min-width: 600px){
	.insta-modal-wrap{
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		height:60vh;
	}
}
@media (min-width: 992px){
	.ul-instagram>li{
		flex:0 0 25%;
		width:25%;
	}
}
@media (min-width: 1200px){
	.ul-instagram>li{
		flex:0 0 16.666%;
		width:16.666%;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

.ul-instagram{

list-style:none;

display:flex;

flex-flow:row wrap;

width:100%;

}

.ul-instagram>li{

flex:0 0 50%;

display:inline-block;

color:#fff;

margin-bottom:10px;

width:50%;

padding:0 5px;

}

.linkinsta{

display:block;

transition:0.2s;

width:100%;

position:relative;

}

.linkinsta:before{

content:'';

display:block;

width:100%;

padding-top:100%;

}

.linkinsta:hover{

filter:brightness(1.2);

}

.imginsta{

display:block;

width:100%;

height:100%;

object-fit:cover;

object-position:center center;

position:absolute;

top:0;

left:0;

}

.h3ttlinsta{

font-size:14px;

color:#fff;

text-overflow:ellipsis;

overflow: hidden;

white-space: nowrap;

display:none;

}

.insta-timestamp{

display:none;

}

.writer{

display:none;

}

/* modal dialog */

.insta-modal{

position:fixed;

top:0;

left:0;

width:100%;

height: 100vh;

background:rgba(0,0,0,0.8);

display:none;

z-index: 99999;

}

.insta-modal-wrap{

position:absolute;

width:100%;

max-width:600px;

margin:0 auto;

max-height: calc(100vh - var(--tophead-size1));

min-height: 180px;

overflow:scroll;

top:50px;

background:#f5f6f7;

}

.insta-box{

display:block;

width:100%;

background:#f5f6f7;

}

.insta-img{

width:100%;

}

.insta-author{

background:#fff;

padding: 16px 24px;

margin-bottom:20px;

font-weight:600;

font-size:14px;

box-shadow: 0 1px 1px rgb(0 0 0 / 10%);

}

.insta-word{

width:100%;

margin-bottom:60px;

}

.insta-date{

background:#fff;

padding: 16px 24px;

font-size:14px;

}

.insta-text{

background:#fff;

padding: 0 24px 40px;

font-size:14px;

box-shadow: 0 1px 1px rgb(0 0 0 / 10%);

}

.insta-close-btn{

position:sticky;

left:10px;

bottom:10px;

top:auto;

right:auto;

}

.insta-close-btn>a{

display:flex;

justify-content:center;

align-items:center;

width:50px;

height:50px;

color:#fff;

background:var(--main-color);

border-radius:50%;

font-size:30px;

line-height:30px;

margin-left:10px;

margin-bottom:10px;

padding-bottom:3px;

transition:0.3s;

}

.insta-close-btn>a:hover{

filter:brightness(1.2);

}

@media (min-width: 576px){

.ul-instagram>li{

flex:0 0 33.333%;

padding:0 5px;

display:flex;

justify-content:center;

align-items:center;

width:33.333%;

}

@media (min-width: 600px){

.insta-modal-wrap{

top:50%;

left:50%;

transform:translate(-50%,-50%);

height:60vh;

}

@media (min-width: 992px){

.ul-instagram>li{

flex:0 0 25%;

width:25%;

}

@media (min-width: 1200px){

.ul-instagram>li{

flex:0 0 16.666%;

width:16.666%;

}

６．実際に出力して見た例

2024-04-19rishuntrading_limited
ITソリューションなどの事業を展開する｢株式会社三正総研｣様のコーポレイトサイトを制作させて頂きました🎉。弊社サイトに制作事例として掲載😊。ご依頼ありがとうございました。 #三正総研 #コーポレイトサイト製作 #rishuntrading
Instagram記事へ
2024-04-11rishuntrading_limited
｢おもちゃ投資ラボ｣様のLPを制作させて頂きました🎉以前にWebサイトや会員制サイトなど弊社にて制作させて頂いたお客様です！この度、会員数も順調に増え、おもちゃ投資をより多くの方に知っていただきたい！との事で弊社に制作依頼がございました。弊社の制作事例として弊社サイトにてご紹介させて頂いております😊。 #おもちゃ投資ラボ #ラインディングページ #Webサイト制作 #rishuntrading
Instagram記事へ
2024-04-10rishuntrading_limited
保護犬･猫と共に暮らす障がい者グループホーム｢Akala｣様のWebサイトを制作させていただきました🎉。弊社サイトにて、弊社の制作事例としてご紹介させていただいております😊。 #グループホームAkala #Webサイト制作 #rishuntrading
Instagram記事へ
2024-03-29rishuntrading_limited
RishunTradingでは、｢株式会社ZEエナジー｣様のWebサイトを制作させていただきました🎉弊社サイトにて制作事例としてご紹介させて頂いております😊 #zeenergy #webサイト制作 #rishuntrading
Instagram記事へ
2024-03-25rishuntrading_limited
東京都台東区にて不動産の売却、不動産購入の仲介を事業を行う株式会社IREAS様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させて頂きました😊 #IREAS #webサイト制作 #rishuntrading
Instagram記事へ
2024-03-01rishuntrading_limited
日曜夜10時放送のドラマ｢アイのない恋人たち｣で、自ら発掘したフランス製のスマホ収納棚(e-pause)がちょこちょこ出ています😍。ドラマのヒロイン、エリカさんが経営するブックカフェ屋さんに、それはおいてありまーす‼️(イラストにしていますので、実際はテレビやTVerで見て下さい。ドラマ撮影が終わるまで控えてました。) フランス製のスマホ収納棚｢e-pause｣シリーズは、スマホを預けてその場所でやるべきことに集中しようというのがコンセプト。デジタルデトックスの流れを汲んだ商品で、世界15ヵ国で販売されています❤️ 池袋・大塚にあるブックカフェ｢里葉｣さんにおいて頂いていたのがきっかけで、｢里葉｣さんがそのドラマの撮影場所となり、この｢e-pause｣の商品をそのまま使って頂いたようです。ありがとうございます😤 フランス🇫🇷の展示会｢MAISON&OBJET(メゾン・エ・オブジェ)｣✈️にて、そのコンセプトが気に入り一番最初に取扱い始めた商品で、ものすごく思い入れがあります😊。フランスの会社の代表の方にも、わざわざ日本で行われた弊社の展示会に実際来て頂き、そして、一緒に展示ブースで説明員まで行って頂きました。コロナや円安、また、日本ではなかなか受け入れ難いコンセプトという事で、残念ながらあまり売れていませんが、ただ、こうやってドラマなどにちょっとでも使われたりすると本当にうれしいものですねー😊 なお、このドラマで使われた商品は、まだ販売中ですが、｢Amazon｣や｢楽天｣では販売しておりません。もし、欲しいなあなどと思った方は、njoy.jpにてお買い求めいただくか、当社サイトにお問い合わせください😊 #アイのない恋人たち #スマホ収納棚 #Epause #デジタルデトックス #france #里葉 #nJoy #rishuntrading
Instagram記事へ
2024-01-29rishuntrading_limited
ネイルサロンやスポーツ関連事業(指導者派遣、イベント開催)などを行う合同会社キッカケ様のコーポレイトサイトを制作させていただきました🎉弊社サイトにてご紹介させていただきました☺。 #合同会社キッカケ #rishuntrading #webサイト制作
Instagram記事へ
2024-01-26rishuntrading_limited
近隣の他県からもご利用のある滋賀県の自動車販売事業者｢合同会社G-STYLE｣様のWebサイトをフルリニューアルさせて頂きました🎉。弊社サイトでご紹介させていただきました☺ #gstyle #webサイト制作 #rishuntrading
Instagram記事へ
2024-01-16rishuntrading_limited
オーガニックサイエンス株式会社様のコーポレイトサイトを制作させていただきました🎉。弊社サイトでご紹介させていただきました☺😊 #オーガニックサイエンス株式会社 #webサイト制作 #rishuntrading
Instagram記事へ
2024-01-15rishuntrading_limited
東村山市の中村造園様のWebサイトを制作させて頂きました🎉。弊社サイトでご紹介☺️ #中村造園 #webサイト制作 #rishuntrading
Instagram記事へ
2023-12-18rishuntrading_limited
コインランドリーの新店舗立ち上げ、コインランドリーのM&Aなど、コインランドリーに特化した事業を行う｢株式会社キョウエイ｣様のコーポレイトサイトを制作させて頂きました🎉。弊社の制作事例として弊社サイトでご紹介させていただきました😊。 #株式会社キョウエイ #Webサイト制作 #rishuntrading
Instagram記事へ
2023-12-13rishuntrading_limited
株式会社サクライト様のECサイト(ワインの販売サイト)を制作させて頂きました🎉。弊社の制作事例として弊社サイトにてご紹介させて頂きました😊。 #株式会社サクライト #Webサイト制作 #rishuntrading
Instagram記事へ