问题
I was wanting to embed a photo from my instagram account in to my blog. I thought it would be a simple case of copying the embed code from the photo, paste it in to my editor and off I go. This doesn't seem to be the case though. As you can see from the screenshot, I get the photo information but no photo.
If I put just an image tag in to the html the image shoes perfectly but not in the style of an instagram photo.
i.e.
<img src="https://www.instagram.com/p/BFbPlbwIceD" />
Does anyone have any ideas why the embed code isn't working. I've also tried the embed code in a plain html file and it doesn't work either, so it's not my CMS which is causing the issues, which is Umbraco.
回答1:
(The below answer applies to local html files without a server only)
I was facing the same problem and noticed this line in the embed code:
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
When I added the scheme ("http") to the source like below, the image showed up correctly.
<script async defer src="http://platform.instagram.com/en_US/embeds.js"></script>
Hope this helps.
回答2:
I had the same issue. In react you have to process the embeds like:
componentDidMount() {
window.instgrm.Embeds.process();
}
This dit it for me!
回答3:
The issue has been reported.
Seems to be a known issue which isn't easy to fix: http://issues.umbraco.org/issue/U4-8646
回答4:
The cause of the problem is that the
<script async src="//www.instagram.com/embed.js"></script>
Runs before the
<blockquote>...</blockquote>
Is present in the DOM. This means that the script doesn't find any blockquotes to turn into iframes on load.
Since the script is marked as async you can run into race conditions where you get a different order of load on each refresh.
You need to make sure the script is loaded after the blockquote is present. Either move the script part at the end of the document. Or if are using JS to add the to the DOM later, you can also run
instgrm.Embeds.process()
After you are sure is in the DOM.
Source: https://www.instagram.com/developer/embedding/
回答5:
I'm getting on to this one late but currently the issue appears to happen on a number of sites still.
After some research on my own site I noted an error in the console on loading. Following the link in the error it took me to the following location
https://www.instagram.com//www.instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js
obviously that page doesn't load js as it is not a proper web link.
To overcome this, replace this line at the bottom of your embed
<script async src="//www.instagram.com/embed.js"></script>
with this
<script async src="https://instagram.com/static/bundles/es6/EmbedSDK.js/47c7ec92d91e.js"></script>
It works currently but if they change the js url again it may break the link.
It should appear now.
回答6:
It's possible that the Instagram API has been changed, someone reported a similar issue with Tweets not embedding properly recently too. Log it as an issue on http://issues.umbraco.org.uk with some report steps and hopefully someone will be able to fix it.
I've just tested and it does the same for me too.
回答7:
I ran into this problem and eventually found out that the newer versions of wordpress will auto-embed the image or video if you just past the url on a line by itself in the editor. I suspect this is a very recent addition as I had to search a while to find it. For an example, I used it on this page to add an Instagram video to the post: http://blog.pokefind.com/awesome-pokemon-go-functioning-costume/
回答8:
Believe it or not - I think I have solved the problem. Just add this line
<iframe style="display:none"></iframe>to your code and everything will work perfectly.
来源：https://stackoverflow.com/questions/37322148/why-is-instagram-embed-code-only-showing-an-instagram-icon-not-the-image