Instagram API를 사용하여 웹페이지에 표시
모두 사랑 Instagram
Instagram에 투고한 데이터를 취득하고 싶었으므로 정리했습니다. (지금 느낌)
이번에는 SandBox의 기능을 사용하여 구현.
Instagram API
Instagram API는 2016년 6월에 사양이 변경되어 Instagram API를 사용하려면 Instagram 승인이 필요하다. (단지, 심사가 매우 엄격한 것 같다..)
SandBox
계정 생성
앱을 다운로드하고 계정 만들기
※이번, 작성 방법은 생략합니다
htps //w w. Ins g et al. 코m/
애플리케이션 등록
htps //w w. Ins g et al. 이 m/로 ゔぇぺぺr/ 방문
* Application Name : アプリケーション名
* Description : アプリケーション説明
* Company Name : 会社名(任意ですので、空欄で大丈夫)
* Website URL : WebサイトURL
* Valid redirect URIs : 認証リダイレクトURL(Website URLと同じ)
* Privacy Policy URL : 個人情報保護方針のURL(任意ですので、空欄で大丈夫)
* Contact email : 連絡先メールアドレス
※ 나중에 내용 편집 가능.
액세스 토큰 획득
https://instagram.com/oauth/authorize/?client_id=「取得したCLIENT ID」&redirect_uri=「設定したValid redirect URIs」&response_type=token
http://リダイレクトURL.com/#access_token=XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
https://api.instagram.com/v1/users/self/media/recent?access_token=取得したアクセストークン
웹페이지에 표시
JavaScript만으로도 볼 수 있지만 보안을 고려하여 PHP를 사용합니다. (javascript 액세스 토큰이 보이기 때문에..)
※html, CSS는 잘 조정해 주십시오.
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Instagtam API 0084</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="common/instagram.css">
</head>
<body>
<h1><i class="fa fa-instagram fa-fw"></i>Instagtam API 0084</h1>
<ul class="instagram"></ul>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="common/instagram.js"></script>
</body>
</html>
PHP
instagram.php
<?php
//POSTリクエストの場合のみ受付
if($_SERVER['REQUEST_METHOD'] == 'POST'){
//アクセストークン
$access_token = "XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; //取得したアクセストークンを設置
//JSONデータを取得して出力
echo @file_get_contents("https://api.instagram.com/v1/users/self/media/recent/?access_token={$access_token}");
//終了
exit;
}
?>
자바스크립트
instagram.js
$(function(){
var $container = $(".instagram");
var html = "";
$.ajax({
url: "common/instagram.php",//PHPファイルURL
type:"POST",
dataType: "json"
}).done(function(data){
//通信成功時の処理
$.each(data.data,function(i,item){
var imgurl = item.images.low_resolution.url; //低解像度の画像のURLを取得
var link = item.link; //リンクを取得
html += "<li><a href='" + link + "' target='_blank'><img src='" + imgurl + "'></a></li>";
});
}).fail(function(){
//通信失敗時の処理
html = "<li>画像を取得できまへん。</li>";
}).always(function(){
//通信完了時の処理
$container.html(html);
});
});
"XXXXXXXX.XXXXXXX.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" 위치에 획득 한 액세스 토큰을 설치합니다.CSS
instagram.css
body {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
}
.instagram {
width: 90%;
margin: 0 auto 20px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
.instagram li {
padding: 20px;
}
.instagram li img {
width: 320px;
height: auto;
}
@media screen and (max-width: 47.9375em) {
.instagram li {
width: 40%;
padding: 10px;
}
.instagram li img {
width: 100%;
}
}
참고문헌
Instagram 공식
Instagram 문서
InstagramAPI에서 이미지 얻기
Reference
이 문제에 관하여(Instagram API를 사용하여 웹페이지에 표시), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/0084ken/items/f17700a5c094bbc14a21텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
