How to Embed ANY Public Instagram Post With JUST HTML
ฝัง
- เผยแพร่เมื่อ 3 ต.ค. 2024
- 👉 Scrape Instagram Posts to Embed: stevesie.com/a...
Do you want to spice up your website with Instagram posts from related hashtags, users or locations? Maybe you used a widget in the past, but it broke with the recent Instagram API changes. In this video we'll show how you can modify the current Instagram official embed codes to work with any post, so you can target by recent hashtag posts, or any account you're interested in.
Embed Code Template: gist.github.co...
omg this is exactly what I was looking for! your explanation is so clear and straight to the point yet easy to understand even though I have zero coding knowledge. TYSM for caring Steviesie!!! I appreciate youu
You are a genius. Forget Harvard, spend 5 minutes with this guy!
Came across this on accident. What a cool video! I rate this 😎
This is great man! Good job! I loved it! I'll share this with everyone
Awesome, thank you!
Great video Stevesie. What about getting the latest post on Instagram, automatically without changing the code? Is there a detailed function for that?
Thanks
I would like to know as well, thank you!
Great video! You saved my broken website!
Great to hear!
Thanks man! Really help me with this api update!
You are most welcome!
Dude, amazing content! Thank you!
Glad it helped!
Wow. Really smart approach with the diff tool
I want to copy and paste embed code your eyes to the wall. But anyways this code only works on computer it doesn’t work on mobile device.
Haha, thanks for the feedback Trevor. I feel like they must support mobile embedding somehow. I'll take a look and make a new video if I find out how.
Great video! Could you make a video on how to replace the shortcode... how to work with the template and e.g. fetch every instagram post from a user and put each one of it in a blog post on my wordpress website? I've never worked with django...
Thanks Christine! Yea, the hard part is actually getting the codes in an easy way. You can do this yourself if you go to the account(s) you're interested and look at their feeds. I talk a little about how to make this process a little less manual here: th-cam.com/video/-ptpQ22t2j0/w-d-xo.html
You don't really need Django -- this is just basic HTML you can put into your blog / website. So if you have a list of post shortcodes, you'd need to generate one big blob of this HTML for each post shortcode which is what Django would be helpful for (to cut down on copy-pasted code) but is not a requirement.
Good job but I’d love to see how you could sort a table of posts whether it’s top 3 posts in a slideshow, etc
Thanks! Yea, so you can sort them based on the Post ID you get back however you like and then embed them one after another. I'm not familiar with being able to embed multiple posts as a slideshow (if Instagram supports that), but if they do then we can probably work with that and pass in multiple Post IDs is what I'm guessing you mean!
I feel like your eyes are gonna come out of your face lol
I better start wearing sunglasses then! 😎
@@StevesieData hahaha you have big eyes that's what I meant to say
That’s exciting how that works
Perfect Thank you
Glad it helped
Thank you for this video :) I would love to see one for IG stories if possible that would be amazing :)
Great, thanks! Unfortunately embedding stories is a bit risky from a copyright perspective unless they're your own stories. You can see th-cam.com/video/DJPlGDuHnN8/w-d-xo.html for how to scrape data from stories, but you'd need to develop your own front end for displaying the content.
Yes you can embed Instagram stories on your website, but from your profile only. Right now I am using Taggbox Widget for embedding Instagram stories on my website.
@@StevesieData hello. i would like to see this video. it will be very helpful. It seems that the video is private. Looking forward your awnser please. Thank you :)))
This is absolutely genious, god bless
Thank you Santiago!
tx a lot! but i´m newbie and did all and works, but wanna know how get dinamic on specific user IG, i mean everytime this user do an instagram post, can be this auto-update on my website widget?
Hey, great question! It's not too difficult, you just need to check when the specific user creates a new post (say once per day, or more frequently if you want), and you just need the shortcode from there. You can see this video: th-cam.com/video/-ptpQ22t2j0/w-d-xo.html for more information on how to do it.
How can we add recent posts slides automatically to website
It's tricky to do *completely* automatically. You'll need to get the list of "shortcodes" to embed from Instagram and then feed them to generate a different embed code for each post you want to embed. There's ways to do this, please check out the link to our website for more info!
Thanks for this, mate!
You're very welcome :)
Great video bro
Glad you enjoyed!
Make a tutorial and a doc explaining to embed instafeed using picuki API in WordPress...
Thanks for the feedback!
bro can u tell me how to how to use instagram pictures in html
I am facing CORS policy issue
thank you i was trying this, but again it only embed one picture
so whats the difference?? what i missed here??
Great question! Yea, the idea here is that this shows how to "templatize" the embedding so all you need to know is the post's shortcode / ID to embed it. This means that you can get a list of multiple posts you want to embed, and then for each post substitute the post ID into this template code to embed it, allowing you to curate a list of posts you want to embed instead of just one.
Fantastic! thank you👍.
Our pleasure!
Thank You Sir! Quick Q? Can this still be done as of Jan. 2021? - (I saw another video of yours that said something about Instagram being tougher)
Hey Todd, yes embedding should still be good since it's official code that Instagram provides us!
please when you charge the video, put automatic translate in youtube option...please! thank you
How can I share my profile not post from Instagram on my website?
Hey Stevesie, awesome video. I was looking for something like this but using LinkedIn feed where I could populate posts of specific hashtag on my website. Do you have that kind of tutorial already or could you make one? Thanks much.
Thanks! Yes, it looks pretty easy on LinkedIn, you can see this help article here: www.linkedin.com/help/linkedin/answer/86529/embed-content-from-the-linkedin-feed?lang=en
The issue though is figuring out the list of content IDs to embed (very similar to this Instagram video). We offer a manual LinkedIn scraping solution here: th-cam.com/video/XhDqk2MfcYE/w-d-xo.html so you could use that to grab a large list of posts about a hashtag (or topic), then generate an embed code for each one of those scraped content IDs for your site. I'll see if I can cover this in a future video since this sounds like a great idea, thanks!
@@StevesieData Wow thanks for the fast response. Amazing. I've tried the method based on the given link about embed content from linkedin feed but seems like i got to go each individual post and embed one by one. Which doesn't fit what i'm looking for. It's cumbersome and time consuming.
The scraping method looks like i got to do extra steps. Maybe I'll try it.
But I'll be happy and can't wait if you gonna do another tutorial for this. That would be splendid. Thanks again, Stevesie. I enjoyed your videos.
boss still i am not what a non programmer need to do step by step . which code i need to put in my site to embed all the feed of any instagram acc ?
It's not that hard! You'll need the list of post IDs (or shortcodes) upfront, and then you need to call this code each time for each individual post, injecting the shortcode where I demonstrate in the code. So if the author of the page posts something new, you need to continually check for new posts... that's the only tricky part!
Hi, where i can study how to get the list of all shortcodes of a user? Thanks!
Hi Nico! You can see here for how to get the posts and shortcodes for a user: th-cam.com/video/-ptpQ22t2j0/w-d-xo.html
Hey Probably late to the game but is there a change you can embed the code onto a app that you have developed yourself - I want to use the Hastag
can we do it on 2 columns? like the photo on left and description and other elements on right?
Possibly! Please check out the code we mention in the video here: gist.github.com/stevesie88/ca9544bf3d1f381466199529ca7ed2cf - you can try altering it and moving the styles around, though keep the class names, data attributes and IDs intact so that Instagram's official Javascript is able to work with it properly (note that it's injected at the end and then alters a few things to make it look fancy!).
is it still relevant? After instagram updating their api policy
Can anyone tell the parameters to be passed for autoplaying the reel on mute from insta embedding
bruhh not that is just that i cant post videos from other people's video
do you know how to embed instagram live streams? like live stories?
Hi Michael. I'm not sure if this is possible, and if so most likely would violate Instagram's Terms of Service unless you see an officially supported way to embed them (like with these posts) - you need to be extremely careful when it comes to re-publishing content like you're describing.
any idea why they let you embed everything else but not stories or live?
This does not seem to work anymore
What specifically is the issue? You should be able to simply copy the embed code provided by Instagram and replace it with the post IDs you need.
How to viral instagram post sir
I have a problem. I put the code into HTML, but it shows "View this post on Instagram", not the post itself. How to fix it...?
Hi, that message is coming from Instagram, so you can't really do much about it unfortunately... it may have something to do with permissions or age restrictions on the post.
@@StevesieData I already found out how to fix this problem, but anyway thanks...
@@artyomagadzhanyan5472 how did you fix this problem?? I am having the issue as well, please share haha
Nice
Hi.. I would like to elembed only 'like button count' of a particular post. Can I do it?
Hi Rowan! I'm not sure about that button, but you can get the like count for any post using this: stevesie.com/apps/formulas/instagram-post-details and then display that count on the button.
Really nice video! But I can't view the post on my site. It says "View this post on Instagram"
Hey, that's strange - it may be because the post is private or may require the user to be above a certain age. If you post a link to where your code is hosted I can take a look!
i had this issue as well..did you ever get it solved
However, I can't view the post on the site. It says "View this post on Instagram"
Huh, can you post the URL or link to what you're trying to embed and I can take a look?
@@StevesieData nothing works actually.
Here's the pen codepen.io/michalens/pen/dyoyJVW
I've been looking up and down on how to do this as of recent as I KNEW IG changed their API and sandboxed their last one.
I'm actually using Django 3.0 right now and am working on a few different (personal) sites. Is there any way you can do a video on injecting the feed on to a template? I mean, I see what you did there and it looks like you could easily just do a {{ extend template_name.html }}, wouldn't this work better as a model or view since you'd have to call it the feed? Maybe I'm wrong, I'm still wet behind the ears when it comes to Django, I'm only about 3 months deep.
Hey Brett! It sounds like you want to embed a collection of posts in your template? You can define this embed code as a single template and then call into it by using the "with" declaration in Django and including the template, e.g. {% with shortcode='123' %} {% include 'app/ig_post.html' %} {% endwith %}
And if you throw that into a for loop in the template, you'll have a nice clean feed without a copy-pasted mess. Just have the "view" send in a list of post shortcodes to the template and iterate through them outside of the above code.
There are other approaches as well, but without knowing much more about your specific project I would suggest this to get something working.
How do i delete the “embed”option on my instagram explore page?
Hi Denise, I'm not exactly sure what you mean... is this on the app? You can't really delete the option to embed anything unless it's content you own and can then make private if that's what you mean.
Stevesie Data on the explore page where theres the 3 dots ... when i press them the “not interested” option is no longer there... where did it go? I used that all the time when the feed had things I didn’t want to look at.
Works in 2020?
Hi Gavin, yes - this is using official Instagram-provided code from their embed feature.
post by user
Do you mean you want to get all of the posts for a specific user? This is possible - you just need to get all of the Post IDs / Shortcodes for the individual user and then apply this technique for each post.
too much for me....hahaha, I´m getting crazy trying to embed my insta on my page... =(
www.vamoshoneyweddingstories.com
insta: @vamoshoney_weddingstories
=,(
Ah - yes it's a little technical! If you just want to embed your own feed, this video may help: th-cam.com/video/av5OBKMQeqY/w-d-xo.html