I'm trying to put a user's recent Instagram media on a sidebar. I'm trying to use the Instagram API to fetch the media.
http://instagram.com/developer/endpoints/users/
The documentation says to GET https://api.instagram.com/v1/users/<user-id>/media/recent/
, but it says to pass an OAuth access token. An access token represents the authorization to act on behalf of a user. I don't want users to log into Instagram to see this on the sidebar. They shouldn't even need to have an Instagram account.
For instance, I can go to http://instagram.com/thebrainscoop without being logged into Instagram and see photos. I want to do that through the API.
In the Instagram API, non-user-authenticated requests pass a client_id
instead of an access_token
. If I try that, though, I get:
{
"meta":{
"error_type":"OAuthParameterException",
"code":400,
"error_message":"\"access_token\" URL parameter missing. This OAuth request requires an \"access_token\" URL parameter."
}
}
So, is this not possible? Is there no way to fetch a user's latest (public) media without asking a user to log into an Instagram account through OAuth first?
var name = "smena8m";
$.get("https://images"+~~(Math.random()*3333)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=https://www.instagram.com/" + name + "/", function(html) {
if (html) {
var regex = /_sharedData = ({.*);<\/script>/m,
json = JSON.parse(regex.exec(html)[1]),
edges = json.entry_data.ProfilePage[0].graphql.user.edge_owner_to_timeline_media.edges;
$.each(edges, function(n, edge) {
var node = edge.node;
$('body').append(
$('<a/>', {
href: 'https://instagr.am/p/'+node.shortcode,
target: '_blank'
}).css({
backgroundImage: 'url(' + node.thumbnail_src + ')'
}));
});
}
});
html, body {
font-size: 0;
line-height: 0;
}
a {
display: inline-block;
width: 25%;
height: 0;
padding-bottom: 25%;
background: #eee 50% 50% no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can download any Instagram user photo feed in JSON format using ?__a=1
next to landing page address like this. No need to get user id or register an app, no tokens, no oAuth.
min_id
and max_id
variables can be used for pagination, here is example
YQL
may not work here inside snipped iframe, so you can always check it manually in YQL Console
APRIL 2018 UPDATE: After latest instagram updates you can't do this on client side (javascript) because custom headers for signed request can't be set with javascript due to CORS
Access-Control-Allow-Headers
restrictions. It still possible to do this via php
or any other server side method with proper signature based on rhx_gis
, csrf_token
and request parameters. You can read more about it here.
JANUARY 2019 UPDATE: YQL retired, so, check my latest update with Google Image Proxy as CORS
proxy for Instagram page! Then only negative moment - pagination not available with this method.
PHP
solution:
$html = file_get_contents('https://instagram.com/apple/');
preg_match('/_sharedData = ({.*);<\/script>/', $html, $matches);
$profile_data = json_decode($matches[1])->entry_data->ProfilePage[0]->graphql->user;