07 Sep

เริ่มต้นใช้งาน Instagram API.

Instagram ถือเป็น social media อีกหนึ่งเจ้าที่คนนิยมเล่นกัน ซึ่งทำให้งานเทำเว็บจำนวนมากต้องการเอารูปหรือโพสต์ล่าสุดมาแสดงในเว็บเพื่อให้เว็บมีการอัปเดทข้อมูลของเว็บไปด้วย 

ขั้นตอนในการสมัครขอใช้ api กับ instagram

1 ไปที่ https://www.instagram.com/developer/ และ login ถ้ามี user instagram แล้วแต่หากยังไม่มีก็สมัครใหม่

2 หลังจากสมัครและ login แล้วจะมาหน้า Dashboard กดเลือก  Manage Clients และเลือก Register a New Client

3 หลังจากนั้นจะมาหน้า Register new Client ID กรอกรายละเอียดลงไปครับ

4 เมื่อกรอกเสร็จแล้วเราจะได้  Client Id มา

5 หลังจากได้ค่า Client id มาเราจะมาทำการขอ Token  โดยพิมพ์
https://api.instagram.com/oauth/authorize/?client_id=74f33836b340e5135135&redirect_uri=http://webunique.in.th&response_type=token
อย่่าลืมเปลี่ยน Client id และ redirect url ครับ
และ copy ไปวางใน browser

6 ถ้าไม่มี Error อะไรเราจะมาอยู่หน้ายืนยันกด Authorize

 7 เราก็จะได้ Token Access ซักที  (หลายขั้นตอนจริงๆ)

เรามาดูตัวอย่างกันครับ

จากตัวอย่างผมใช้ javascript ในการดึงข้อมูลมาแสดง 6 รูปล่าสุดที่โพสต์

var token = '5447071285.9ad93e2.xxxxxxxxxxxxxxxxxx',  //ใส่ค่า Token ที่ได้มาจากวิธีด้านบน
    userid = 555555555, // เป็น  user id ของเราครับ ได้มาจากเข้าไป view source ใน instagram ของเราครับ (เราต้อง login อยู่ )
    num_photos = 10; // จำนวนรูป
 
$.ajax({  // เรียก ajax
	url: 'https://api.instagram.com/v1/users/' + userid + '/media/recent', // จริงๆมีการดึงข้อมูลหลายแบบ สามารถดูใน Doc Endpoints
	dataType: 'jsonp', 
	type: 'GET',
	data: {access_token: token, count: num_photos}, // ค่าที่ส่งไป
	success: function(data){ 
 		for( x in data.data ){  // loop รูปที่ได้มา
			
                            // ใส่ li list ใน class ที่ต้องการ
                         $('.instx').append('<li><img src="'+data.data[x].images.low_resolution.url+'"></li>'); 
		
	      } 
   
    
	},
	error: function(data){
		console.log(data); 
       }
});

 

Leave a Reply

Your email address will not be published. Required fields are marked *