Instagram API에서 이미지 데이터를 가져오는 노트
8047 단어 HTMLJavaScriptInstagram
지금까지 나는 자주 써야 한다고 생각해서 적어 두었다.
애플리케이션 등록
자신의 인스타그램 계정으로 로그인
응용 프로그램을 등록합니다.
액세스 토큰 가져오기
응용 프로그램을 등록하면 클라이언트 ID를 얻을 수 있습니다.
https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token
https://instagram.com/oauth/authorize/?client_id=【CLIENT-ID】&redirect_uri=【REDIRECT-URI】&response_type=token
브라우저에서 상기 주소를 클릭하면 방문 영패가 되돌아옵니다
#access_token=의 코드가 필요하기 때문에 적어야 합니다.
http://hogehoge.com/#access_token=************************
웹 사이트에서 얻은 데이터를 표시하다
취득한 JSON 데이터를 토대로 WEB 웹사이트에 표시됩니다.
사이트의 샘플 코드를 참고하여 어떻게 데이터를 얻고 표시하는지 모든 안건을 맞춤형으로 제작할 수 있습니다.
instagram.js$(function() {
$(".instagram").text("loading...");
$.ajax({
url: "https://api.instagram.com/v1/users/self/media/recent",
data: { access_token: "【ブラウザで叩いて返ってきたコードを入力】" },
dataType: "jsonp",
error: function(jqXHR, textStatus, errorThrown) {
$(".instagram").text(textStatus);
},
success: function(data, textStatus, jqXHR) {
$(".instagram").text("");
for (var i = 0, length = 5; i < length; i++) {
var d = data.data[i];
$(".instagram").append(
$("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));}
}
});
});
gallery.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォトギャラリー</title>
</head>
<body>
<div class="instagram"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="instagram.js"></script>
</body>
</html>
$(function() {
$(".instagram").text("loading...");
$.ajax({
url: "https://api.instagram.com/v1/users/self/media/recent",
data: { access_token: "【ブラウザで叩いて返ってきたコードを入力】" },
dataType: "jsonp",
error: function(jqXHR, textStatus, errorThrown) {
$(".instagram").text(textStatus);
},
success: function(data, textStatus, jqXHR) {
$(".instagram").text("");
for (var i = 0, length = 5; i < length; i++) {
var d = data.data[i];
$(".instagram").append(
$("<div>").addClass("image").append($("<a>").attr("href", d.link).attr("target", "_blank").append($("<img>").attr("src", d.images.thumbnail.url))));}
}
});
});
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォトギャラリー</title>
</head>
<body>
<div class="instagram"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="instagram.js"></script>
</body>
</html>
사이트 축소판 그림
Reference
이 문제에 관하여(Instagram API에서 이미지 데이터를 가져오는 노트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/redamoon/items/917ba43ddff9d91102bf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
