CODEWITHSUNDEEP
htmljsonapiinstagram-api
eshellborn
eshellborn

Reputation: 11261

Using Instagram API for simple web page

So I am working on a fairly simple project, basically a web page that should list the captions from a certain instagram account. It's all designed, it just needs to be lit up with the content. Have a look at http://evanshellborn.com/speechofthebeets/.

I found that you can see a json file containing all the necessary data at instagram.com/{username}/media. So in my case, https://www.instagram.com/beets_are_life/media/. So before I put that page actually online, I was on my local machine, and I did a JSON call to that page and it worked perfectly. So I built it all out and my web page loaded the captions just like I wanted it to.

Then I went to put it online, (http://evanshellborn.com/speechofthebeets), but it doesn't work. Have a look at the script at the bottom of it, on my localhost that code works and the captions get loaded. But on the live page, I get an access not allowed error in the console. So I think Instagram doesn't allow this sort of direct access anymore, you have to go through their API.

Now I've tried looking at the API but it seems rather confusing. Basically what I'm asking for is a different JSON url that would give me the same result as https://www.instagram.com/beets_are_life/media/, but that would work from the live page.

I think https://api.instagram.com/v1/users/{user-id}/?access_token=ACCESS-TOKEN would work, just replacing {user-id} with the appropraite user_id. But where do I get an access token?

From reading https://www.instagram.com/developer/authentication/, it looks like you get one when a user puts in their user credentials. But I don't want to have anyone log in, I just want a simple web page.

Hopefully that made sense. How can I do what I want?

Upvotes: 2

Views: 905

Answers (2)

ashishyadaveee11
ashishyadaveee11

Reputation: 1041

This link will help you embeding the instagram on a simple html webpage. There is a button on the bottom of the post on instagram.when you click on the link a menu pops up. then click on embed enter image description here

now a box pops up

enter image description here

just copy paste the html and you are done. it will fetch the post for you

Upvotes: 0

krisrak
krisrak

Reputation: 12952

Looks like the API url https://www.instagram.com/beets_are_life/media/ does not support jsonp (no callback support), so u cannot use javascript (client side) for making API request, it will fail because of Access-Control-Allow-Origin error on browser side, you have make this API call on server side as proxy.

I guess https://www.instagram.com/<USER_NAME>/media/ is not a publicly documented API, thats the reason it is not supporting jsonp, Instagram uses it for their website and since it is same-origin it will work for them on client-side

Upvotes: 1

Related Questions