Instagram

Capture and share the world's moments.

Embedding

Embedding Instagram posts is an easy way to add Instagram photos and videos to the stories you want to tell on articles or websites. You can embed your own content as well as photos and videos from public profiles. As always, people own their Instagram content, and embedded posts give the proper attribution by showing the username and linking back to the original content on Instagram.

Embedding on your website

To embed Instagram content you need to first visit the post on the web and get the embed code. Go to the post URL if you have it, or you can go to http://instagram.com/[username] and then click the post to expand it. Click the more [...] button and select "Embed".

This will open a dialog where you can get the HTML embed code. Simply copy the code into your website and the embedded post will automatically load. By default the post contains the media caption. You can decide to hide it by simply unchecking the caption option in the Embed button dialog.

Embedded posts are responsive and automatically resize if the embedding container becomes smaller. This means that the content will look great both on desktop and mobile websites.

We’re putting the Weekend Hashtag Project on hold this weekend. Instead, we’re challenging people around the world to participate in the 10th Worldwide InstaMeet! Grab a few good friends or meet up with a larger group in your area and share your best photos and videos from the InstaMeet with the #WWIM10 hashtag for a chance to be featured on our blog Monday morning. Be sure to include the name of the location where your event took place along with the unique hashtag you've chosen for your InstaMeet in your caption. Photo by @sun_shinealight

A photo posted by Instagram (@instagram) on Oct 3, 2014 at 11:00am PDT

Embedding in WordPress

WordPress makes it even easier to embed Instagram content on your blog. All you have to do is to copy the Instagram URL of the media page and paste it on its own line in the WordPress editor. For example:

http://instagram.com/p/bNd86MSFv6/

You can

also use the Wordpress shortcode which allows you to remove the caption or manually specify the width. Just paste this in your blog post as an example:

[instagram url=http://instagram.com/p/bNd86MSFv6/ hidecaption=true width=320]

You can

check out the WordPress documentation for more information on how to use and customize the embedded posts: http://support.wordpress.com/instagram/instagram-images/

Embedding for developers

We provide two ways to programmatically add an Instagram post to your page: an oEmbed endpoint and a simple URL append endpoint. Neither requires an access_token or client_id.

Given a short link, the oEmbed endpoint allows you to get the embed code and additional information about the media associated with the link.

The embed code contains a preview HTML code and a reference to the Instagram embeds.js JavaScript library. When the library is loaded, it scans the page for the HTML code and generates the fully rendered post.

If you want to load the library separately from the HTML code, you can call the oEmbed endpoint with the omitscript parameter. This is useful for websites that want to handle the loading of the embeds.js script by themselves. To manually initialize the embed code, you can then call the JavaScript function instgrm.Embeds.process().

The embedded post is responsive and will adapt to the size of its container. This means that the height will vary depending on the container width and the length of the caption. You can set the maximum width by using the maxwidth parameter. You can also use the hidecaption parameter to display the post without the caption.

If loading the embed code is not an option, you can use the URL append endpoint. Given an Instagram short link, this endpoint issues a redirect to that media’s image file. If you embed an Instagram image this way, you must provide clear attribution next to the image, including attribution to the original author and to Instagram, and a link to the Instagram media page.

  • GET /oembed Returns the embed code and info about the media associated with a url.
  • GET /p/shortcode/media Issues a redirect to that media's JPG file.

GET /oembed

  • Response
http://api.instagram.com/oembed?url=http://instagr.am/p/fA9uwTtkSN/
{ "author_id": 9538472, "author_name": "diegoquinteiro", "author_url": "http://instagram.com/diegoquinteiro", "height": null, "html":"...", "media_id": "558717847597368461_9538472", "provider_name": "Instagram", "provider_url": "http://instagram.com/", "title": "Wii Gato (Lipe Sleep)", "type": "rich", "thumbnail_url": "http://distilleryimage5.ak.instagram.com/5dceebb02c5811e3b57222000a9e07e9_8.jpg", "thumbnail_width": 640, "thumbnail_height": 640, "version": "1.0", "width": 658 } 

Given a short link, returns the embed code and information about the media associated with that link.

Parameters
url A short link, like http://instagr.am/p/fA9uwTtkSN/.
callback A JSON callback to be invoked.
omitscript If set to true, the embed code does not include the script tag. This is useful for websites that want to handle the loading of the embeds.js script by themselves. To manually initialize the embed code, call the JS function instgrm.Embeds.process().
hidecaption If set to true, the embed code hides the caption. Defaults to false.
maxwidth Maximum width of returned media. This value is optional and must be greater than 320. Note that the maxheight parameter is not supported and always returns null. This is because the embed code is responsive and its height varies depending on its width and lenght of the caption.

GET /p/shortcode/media

  • Response
http://instagram.com/p/fA9uwTtkSN/media/?size=t
HTTP/1.1 302 FOUND Location: http://distillery.s3.amazonaws.com/media/2010/10/02/7e4051fdcf1d45ab9bc1fba2582c0c6b_6.jpg 

Given a short link, issues a redirect to that media's JPG file.

Parameters
size Desired size of the resulting media. Supported values are t (thumbnail), m (medium), l (large). Defaults to m.