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

Instagramとの連携方法

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

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

(注意事項:2021/9/15時点の情報です。)

Agenda

前提条件

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

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

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

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

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

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

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

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

※2021/09/15現在のバージョンはv12.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」をエディターなどにコピーしておきます。

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

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

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

1	https://graph.facebook.com/v5.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/v5.0/me?access_token=【トークン2】

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

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

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

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

{

"name": "XXXXXXXXXXXXXXXXXXXXXXXXX",

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

}

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

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

1	https://graph.facebook.com/v5.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取得のファンクションを実行します。

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

入力欄に「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/v4.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/v4.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%;

}

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

INSTAGRAM

弊社のInstagramの内容をリスト表示しています。クリックすると詳細を確認できます。

2022-04-19rishuntrading_limited
今回は、フランス🇫🇷生まれのスマホ収納棚｢e-pause｣シリーズの｢TAO｣をご紹介。TAOは中国語の｢套(tao)｣から付けられています。覆う、被せると言った意味があり、スマホを収納して(覆って)、たまには少しスマホと距離をとって、自然とのつながりや、対面でのやり取りなどを楽しみませんかという思いが込められています。njoy.jp #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading
2022-04-15rishuntrading_limited
「のりたまたまりん」様のオークションサイトを制作させて頂きました🎉「のりたまたまりん」様のレアな商品を入札形式で購入できるサイト。弊社サイトでご紹介。 #webサイト制作 #オークションサイト #ホームページ制作 #rishuntrading
2022-04-13rishuntrading_limited
今回は、クロアチア🇭🇷のプロダクト「VAU」のアイテムをご紹介。ドイツのデザイン賞を受賞したこちらの商品、日本ではあまり使われませんが、封筒を開封する専用のクールなアイテム「Curve letter opener」です。写真の通り、クロアチア🇭🇷の工房で、ひとつひとつ手作り。封筒が届くと、ワクワク🤗、普段とちょっと違った欧州の雰囲気？を味わえます。ハサミで良いじゃんと言ったらだめですよ。njoy.jp #レターオープナー #クロアチア #欧州輸入品 #vau #njoy #rishuntrading
2022-04-11rishuntrading_limited
フランス🇫🇷生まれのスマホ専用収納棚e-pauseシリーズ、僕が初めてCEOのアグネスさんにお会いしたのは2019年、彼女からお聞きしたのは、「スマホは必需品だけど、せっかくの家族旅行なのに子供達が、ずっとスマホをいじっていて本当にショックだった。」とおっしゃっていました。きっかけはそれだけではないのですが、そのためになんとかしたくて、自主的にスマホと適度な距離を取れる方法はないかと考えられたのが「e-pause」です。njoy.jpで紹介してます。 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading
2022-04-08rishuntrading_limited
研究機関:専修大学様の科研による学術研究によるWebサイトを制作しました🎉弊社サイトでご紹介させて頂いております。☺️ #webサイト制作 #rishuntrading
2022-04-06rishuntrading_limited
山口県山口市の会員制リラクゼーションサロン｢音色(Neiro)｣様のWebサイトを制作しました。🎉弊社サイトでご紹介させて頂きました。 #音色 #リラクゼーションサロン #webサイト制作 #rishuntrading
2022-03-31rishuntrading_limited
クロアチア🇭🇷のブランド｢VAU｣の｢キャンドルホルダー｣☺️。キャンドル🕯の炎が持つ揺らぎの力は、自然現象が持つ｢1/fゆらぎ｣のリズムを刻んでいます。ゆったりとした雰囲気を与え、リラックス効果があると言われています。古代メソポタミアのジグラートと言われる階層上の建造物から着想したデザインで、円形の段が上部に向かって伸びるイメージ。2018年ドイツのDesign award winner賞を受賞。njoy.jpで取り扱っています。 #キャンドルホルダー #コンシャスリビング #Vau #クロアチア #欧州輸入品 #njoy #rishuntrading
2022-03-24rishuntrading_limited
フランス🇫🇷生まれのありそうでなかったスマートフォン専用の収納ボックス｢e-pause｣シリーズ。動画でご紹介しているのは、｢WAVEINABOX｣というスマートフォンを収納するデザインオブジェ。フランス🇫🇷生まれの｢e-pause｣は、njoy.jpで販売しています。 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading
2022-03-14rishuntrading_limited
先日、国立新美術館で行われている｢メトロポリタン美術館展｣に行ってきました☺️ニューヨーク、メトロポリタン美術館のヨーロッパ絵画部門の改装に伴い、本来門外不出の名画が日本で展示❗️そのほとんどが日本初公開。教科書にも載っている巨匠の名画が。。その中でも私が心を奪われたのは、この作品(マリー・ドニーズ・ヴィレール)。詳しくはないですが。展示室に入った瞬間に目が合いました。絵画の大きさや迫力もそうですが、目線がこちらをずっと追いかけてきます。(ように見えます。) (写真はポストカードですが。) 日本とは違った感性を味わいたい方におすすめ。5/30までやっているそうです。njoy.jp #メトロポリタン美術館展 #欧州輸入品 #njoy #rishuntrading
2022-03-11rishuntrading_limited
フランス🇫🇷生まれのスタイリッシュなスマートフォン収納パネル「e-pause｣。たまには、スマートフォンを休めよう。というちょっと変わったコンセプト☺️デジタルデトックスの流れを汲んだ新しい潮流です。。フランス🇫🇷生まれの｢e-pause｣は、njoy.jpで販売しています🤗 #フランス #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading
2022-03-09rishuntrading_limited
クロアチア🇭🇷で2018年に立ち上げたブランド｢VAU｣は、もともとは、大手ビール会社の瓶のふたなどを製造していたファミリー企業PESで生まれました🎉。彼らにとって新しい試みではありましたが、素晴らしい冒険の始まりでした。今回ご紹介するのは、｢OROBORUS(ウロボロス)｣という名のネックレス。ウロボロスから着想したこのネックレスは、ひねりを加えた大きなリングが特徴。ウロボロスは古代象徴の1つで自身の尾を噛んで輪となった龍を図案化したもの。循環性や永続性、無限大などを創造しています😊龍の写真はイメージ…。njoy.jp #コンシャスリビング #vau #njoy #欧州輸入品 #rishuntrading
2022-03-02rishuntrading_limited
フランス🇫🇷生まれの｢e-pause｣は、｢禅(zen,)｣の考え方にも共感😊。e-pauseは、スマートフォン専用の収納パネル。njoy.jp #デジタルデトックス #njoy #epause #欧州輸入品 #rishuntrading