UPDATE: The media retrieval endpoint described below is no longer supported after October 24, 2020. See developer documentation here for details on how to migrate to a replacement endpoint. Thanks [Andrew].
Embedding an Instagram post is trivial on a WordPress blog like this one: copy the full Instagram URL (like
https://www.instagram.com/p/BfryG0VnUmF/) and paste it into the visual editor window. Behind the scenes, that URL is parsed to create an embed as shown here.
There are similar plugins to add an tag to a BBCode-based web forum. But what if a forum does not have such direct support installed? This was the case for the web forum set up as community driven support for JPL’s Open Source Rover.
Time to read the manual which in this case is Instagram’s developer resources page about embedding. They prefer that people use the fancy methods like that chunk of HTML we can’t use. But way down towards the bottom, they do describe how to use the
/media/ endpoint to pull down just an image file with no active components.
This is simple enough to use within the BBCode [IMG] tag. Then we can surround that image tag with a [URL] tag to turn it into a link to the Instagram post.
It’s not as fancy as the full embed code, but it does get the basic point across and provides an easy way to access the original Instagram post. Good enough for a SGVHAK Rover post on the JPL OSR web forum.
4 thoughts on “Embedding an Instagram Post with BBCode Without Plugin”
Thanks for the code, but what if the Instagram posts has several pictures.
Any way to make the other pictures show up?
I haven’t had to do this myself. A quick search indicated that Instagram posts with several pictures is called a “carousel” in their API documentation, but I found no information on how to individually access carousel images via the /media/ endpoint. Either it goes by some other name, or it doesn’t exist (yet?)
“This document explains how to use the new Instagram oEmbed endpoint. This endpoint is replacing Instagram’s Legacy oEmbed endpoints, which will be deprecated on October 24, 2020.”
I wonder if your BBCode example will still be supported after that date?
Thank you for bringing this up. I agree this specific technique will degrade and eventually stop working as the endpoint is deprecated.