There are several methods to achieve this on your website.
Solution One
After the user comes back from Instagram with the access token, simply replace '{userid}' with 'self' in your current API call.
Your current API call:
https://api.instagram.com/v1/users/1167507032/media/recent?access_token={ACCESS_TOKEN}&callback={CALLBACK}
Modify the API call as follows:
https://api.instagram.com/v1/users/self/media/recent?access_token={ACCESS_TOKEN}&callback={CALLBACK}
Solution Two
Once the user returns from Instagram with the access token, make an additional request to the Instagram API to fetch the current user's name and ID like this:
var requestUrl = 'https://api.instagram.com/v1/users/self?' + ACCESS_TOKEN
var userId = ''
var userName = ''
$.ajax({
type : "GET",
dataType : "jsonp",
url : requestUrl,
success : function(response) {
userId = response.data.id
userName = response.data.username
}
});
Both of these approaches should work. For solution two, remember to include a callback function in the AJAX call to handle the response and extract the necessary information.