인스타그램 API 사용
19320 단어 JavaScriptInstagram
차리다
인스타그램 계정을 비즈니스 계정으로 바꾸다.(APP만 사용할 수 있나요?)
[설정] - [계정] - [전문 계정으로 전환]
페이스북에 페이지를 만들다.
[설정 및 프라이버시] - [설정] - [페이지 만들기](바닥글)
인스타그램 계정을 페이스북에 링크
페이스북 페이지 설정을 통해 인스타그램 계정을 연결합니다.
[페이지 설정] - [Instagram] - [링크 계정]
페이스북 for 개발자로 응용 프로그램 만들기
계정을 만들고 프로그램을 만듭니다.
facebook for developers
앱 제품에 인스타그램 추가
[제품] - [인스타그램]
액세스 토큰 만들기
차트 API 리소스 매니저를 표시합니다.
페이스북 애플리케이션, 사용자 또는 페이지, 액세스 라이센스를 설정합니다.
Facebook 응용 프로그램 설정 만든 응용 프로그램
사용자 또는 페이지에 사용자 토큰을 설정합니다.
액세스 권한
pages_show_list
instagram_basic
설정
(사진에 있음) 아래에 없어도 괜찮아요.
business_management
instagram_manage_comments
instagram_manage_insights
[Generate Access Token] 버튼을 클릭하여 액세스 토큰을 만듭니다.
인스타그램 User ID 조사
차트 API Explorer에 me/accounts?fields=id를 입력하고 전송 버튼을 클릭합니다.
계속해서 얻은 id 입력000000000000000?fields=instagram_business_account을 사용하고 발송 단추를 누르세요.
Instagram User ID가 표시됩니다.
이루어지다
페이지가 표시될 때 자신의 투고 일람표를 평평하게 보여 주십시오.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Instagram</title>
</head>
<body>
<div class="container"></div>
<script src="./app.js"></script>
</body>
</html>
app.jsimport style from './style.scss';
const apiUrl = 'https://graph.facebook.com/v7.0/';
const igUserId = '10000000000000000';
const accessToken = 'トークンを入力';
document.addEventListener('DOMContentLoaded', () => {
_getMyMeida();
});
function _getMyMeida(url = '') {
// Get the Instagram Business Account's Media Objects
const api = url || `${apiUrl}${igUserId}/media?fields=caption,children,comments_count,id,like_count,media_type,media_url,thumbnail_url&access_token=${accessToken}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
if (data.data !== undefined) {
_createTile(data.data, (url === '') ? true : false);
if (data.paging !== undefined && data.paging.next !== undefined) {
_getMyMeida(data.paging.next);
}
}
})
.catch(error => {
console.log(error);
});
}
function _createTile(media, insert) {
const container = document.querySelector('.container');
const fragment = document.createDocumentFragment();
media.forEach((item, i) => {
const tile = document.createElement('div')
tile.classList.add('tile');
const figure = document.createElement('figure');
const img = document.createElement('img');
img.src = item.thumbnail_url || item.media_url;
figure.appendChild(img);
const caption = document.createElement('figcaption');
caption.textContent = item.caption;
figure.appendChild(caption);
tile.appendChild(figure);
fragment.appendChild(tile);
});
if (insert) {
container.insertBefore(fragment, null);
} else {
container.appendChild(fragment);
}
}
style.scss* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-image: linear-gradient(to left bottom, #fa709a 0%, #fee140 100%);
}
.container {
display: flex;
flex-wrap: wrap;
.tile {
flex: 0 0 calc(100% / 5);
position: relative;
transition: transform 0.2s linear;
&:hover {
transform: scale(1.5);
z-index: 1;
}
&::before {
display: block;
content: "";
padding-top: 100%;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
figcaption {
position: absolute;
left: 2%;
bottom: 2%;
width: 96%;
height: 3em;
padding: 0 5px;
background: rgba(80, 80, 80, 0.7);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: #f0f0f0;
font-size: 12px;
line-height: 1.5;
}
}
}
github
h23k/instagram-embed
Reference
이 문제에 관하여(인스타그램 API 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/h23k/items/bbebb33693297531b590
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
페이지가 표시될 때 자신의 투고 일람표를 평평하게 보여 주십시오.
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Instagram</title>
</head>
<body>
<div class="container"></div>
<script src="./app.js"></script>
</body>
</html>
import style from './style.scss';
const apiUrl = 'https://graph.facebook.com/v7.0/';
const igUserId = '10000000000000000';
const accessToken = 'トークンを入力';
document.addEventListener('DOMContentLoaded', () => {
_getMyMeida();
});
function _getMyMeida(url = '') {
// Get the Instagram Business Account's Media Objects
const api = url || `${apiUrl}${igUserId}/media?fields=caption,children,comments_count,id,like_count,media_type,media_url,thumbnail_url&access_token=${accessToken}`;
fetch(api)
.then(response => {
return response.json();
})
.then(data => {
if (data.data !== undefined) {
_createTile(data.data, (url === '') ? true : false);
if (data.paging !== undefined && data.paging.next !== undefined) {
_getMyMeida(data.paging.next);
}
}
})
.catch(error => {
console.log(error);
});
}
function _createTile(media, insert) {
const container = document.querySelector('.container');
const fragment = document.createDocumentFragment();
media.forEach((item, i) => {
const tile = document.createElement('div')
tile.classList.add('tile');
const figure = document.createElement('figure');
const img = document.createElement('img');
img.src = item.thumbnail_url || item.media_url;
figure.appendChild(img);
const caption = document.createElement('figcaption');
caption.textContent = item.caption;
figure.appendChild(caption);
tile.appendChild(figure);
fragment.appendChild(tile);
});
if (insert) {
container.insertBefore(fragment, null);
} else {
container.appendChild(fragment);
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-image: linear-gradient(to left bottom, #fa709a 0%, #fee140 100%);
}
.container {
display: flex;
flex-wrap: wrap;
.tile {
flex: 0 0 calc(100% / 5);
position: relative;
transition: transform 0.2s linear;
&:hover {
transform: scale(1.5);
z-index: 1;
}
&::before {
display: block;
content: "";
padding-top: 100%;
}
figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
figcaption {
position: absolute;
left: 2%;
bottom: 2%;
width: 96%;
height: 3em;
padding: 0 5px;
background: rgba(80, 80, 80, 0.7);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
color: #f0f0f0;
font-size: 12px;
line-height: 1.5;
}
}
}
h23k/instagram-embed
Reference
이 문제에 관하여(인스타그램 API 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h23k/items/bbebb33693297531b590텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
