Embed the latest post from instagram to my website - html

I am trying to find a way how to embed and show always the latest instagram post from my instagram profile on my website (e.g.iframe). Is there a way to do it?
I found the way how to show specific post only (not the latest post automatically).

https://www.instagram.com/developer/endpoints/users/#get_users_media_recent_self
Get you api by logging into instagram.
Call the api from where you want the image to be displayed

Related

Facebook Graph API - all account pages + posts data

I'm having an issue trying to write the correct GET request using the Facebook API explorer tool.
I'd like to access all my Facebook pages and the below data from their respective posts. I can achieve this by adding the page name manually, but I'd like it to be more dynamic if I was to add more pages in the future.
posts?ids=Pagename,Pagename,Pagename,Pagename&fields=message,created_time,full_picture,shares,likes.summary(true).limit(0),comments.summary(true).limit(0),from,permalink_url
I know you can use me/accounts but I've had no luck when trying the append the above posts GET request.
Furthermore, I'd like to get the page profile picture from the posts. Just adding picture to the above request doesn't work. Since the profile picture is displayed in each post I'd imagine there is a key to access it?
Any help is appreciated.
I discovered the answer after I reread the documentation
https://graph.facebook.com/v7.0/me/accounts?fields=picture,posts{message,created_time,full_picture,shares,likes.summary(true).limit(0),comments.summary(true).limit(0),from,permalink_url}
All attached accounts profile picture + above data.

How do I embed a live Instagram feed to a webpage rather than individual posts?

I am aware that I can embed individual Instagram posts to my website in HTML, but I want to embed a live feed consisting of the five most recent posts which update along with the profile in real-time.
For those who want to know why: I want this feature to be part of the "Photoblog" page of my site without having to have visitors navigate away.
How can this be done?
The best way would be to use their API.
You have this endpoint: https://www.instagram.com/USERNAME/media/ where you don't need any token.
It gives you the last 20 posts.
Then you just display that on your site :)

Instagram, get JSON feed for cetain hashtag without using API

I am creating a personal app and I am having some trouble. I have tried using the Instagram API to get a JSON feed of images by hashtag (any image insta, not just images on my profile).
My issue with the API is that i cannot seem to search public images without having my app in live mode. i keep getting a 400 unauthorized access_token error, even though i do have a valid access token.
I cannot put my app in live mode because insta require a privacy policy url and a company name and I am not a company. I am an independent dev making a personal app.
Whilst searching through stack overflow i cam across this url:
https://www.instagram.com/bikerpicgirl/media/
This allows me to get images by user without the API. I am wondering if anyone knows a similar url where i can get a feed like this but for hashtags instead of users.
I could just make a scraper that mimics the search process but this seems way to overkill and is alot of effort for something that should be so simple.
Yes, you can explore Instagram media by hashtags with this url format:
/explore/tags/your-tag/
for example if hashtag is #amsterdam your url would look something like this:
https://www.instagram.com/explore/tags/amsterdam/
As Jon Goodwin mentioned in the comment this example link is subject to change and may not work in the future.

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?
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
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
now a box pops up
just copy paste the html and you are done.
it will fetch the post for you

Documentation for getting Facebook feed stream on website?

Trying to integrate a Facebook page stream into an element for a website?
The Facebook Like Box has a "show stream" option that displays this data.
Be aware, it is against Facebook's policy to exactly copy any of it's features and use on your own site (as if emulating Facebook).
With that said, you need to grab this information manually using either the Graph API or FQL. There is no social plugin that can do this automatically.
You can check out the Graph API documentation here: https://developers.facebook.com/docs/reference/api/
You can test out some Graph API calls here:
https://developers.facebook.com/tools/explorer/
You can learn more about FQL here:
https://developers.facebook.com/docs/reference/fql/