Embedding an Instagram Post with BBCode Without Plugin

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.

On every Instagram post, there’s an “Embed” option that will bring up a chunk of HTML (which links to some JavaScript) to create an embed. However, a BBCode based web forum does not allow embedding arbitrary HTML like that.

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.

Instagram Rover L

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.

[URL=https://www.instagram.com/p/BfryG0VnUmF/][IMG]https://instagram.com/p/BfryG0VnUmF/media/?size=m[/IMG][/URL]

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

  1. Thanks for the code, but what if the Instagram posts has several pictures.

    Any way to make the other pictures show up?

    Like

    1. 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?)

      Like

Leave a Reply to jabalong Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s