How to Embed Instagram Photos on Your Website

Instagram allows you to embed photos shared by its users, on your website. This is a great feature if you want to spice up your website a bit. In this tutorial, I will demonstrate how to embed Instagram photos on your website or blog.

Instagram is the most popular photo sharing app, also one of the most popular free apps, full of beautiful photos shared by hundreds of millions of users from around the world. From amazingly beautiful nature scenes to magnificent sky and space photos, from cities, roads and buildings to colorful illustrations, you can find almost any type of photos and pictures on Instagram. Though it is not a stock photo site, the beauty and quality of some of the photos on Instagram are higher than most stock images.

Instagram is available not only as a website that you can access via a web browser on all devices including computers, smartphones, tablets and more but also as an app that you can download and install on your mobile device. While you need to use its app version in order to post and share photos on Instagram, using the web version for certain tasks such as embedding photos on your site will be more efficient.

You can embed any Instagram photo on your website, as long as its publisher has given permission for the photo to be embedded. For example, if you have a personal blog, you can embed your own personal Instagram photos to enrich your blog. If you are running a business website, putting some photos on your website from your business' Instagram profile is also a good idea. In short, you can display not only your own Instagram photos on your website but also photos from any other profiles. If you are just looking to embed some nice random pictures, you can also check these popular hashtags to get some ideas.

TIP: You can find more tutorials about embedding content from other sites below:
How to Embed YouTube Videos on Your Website
How to Embed SoundCloud Tracks on Your Website
How to Embed Google Maps on Your Website

Now, let's see how an Instagram photo is embedded on a website.

How to Embed an Instagram Photo on Your Site

The first thing you need to do is to find a photo on Instagram that you would like to embed. In this example, we will be using the photo located at the following page, shared by Earth Pics, an account that shares beautiful nature, sky and city pictures:

https://www.instagram.com/p/BM1tEBGBxTi/

STEP 1: Visit instagram.com and find a photo to embed. If you don't have a specific photo yet, you can simply use the photo on the above link while following this tutorial.

STEP 2: Once you find a photo to embed, click on it, to display it fully. On the photo page, you will see a larger version of the photo, information about the profile that posted it, comments and other options.

STEP 3: At the bottom right corner below the comments section, just to the right of the like button and "Add a comment" input field, you will see a button with three dots, click on it.

How to Embed Instagram Photos on Your Website - 1

This will display a small popup with a few options including a link to report inappropriate content and a link to embed the photo.

How to Embed Instagram Photos on Your Website - 2

STEP 4: Click the Embed link, which will open another small window with embed code and options.

How to Embed Instagram Photos on Your Website - 3

On the Embed dialog, you will see a textarea at the top which holds the embed code, a checkbox to include the photo caption or not, a button to copy the embed code and a link to Instagram's terms of use. To make sure you will be in compliance with their terms of use, it is advised to check it.

STEP 5: If you want the photo caption to be displayed on your website below the embedded image, keep it checked, otherwise uncheck it, and then click Copy Embed Code button. You should see the button text change to Embed Code Copied!.

STEP 6: Open the page or file on your website where you want to embed the photo and paste the copied embed code into it. For example, you can open the HTML file with your web design software, or a simple text editor such as Notepad and add the embed code like the following:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Instagram Photo Embed Demo</title>
</head>
<body>

  <!-- Paste embed code here... -->

</body>
</html>

The resulting embedded photo will look like this:

A photo posted by Earth Pics (@earthpix) on

The photo will occupy the full width of its parent element automatically; however, you can adjust its width and height with the help of CSS styles, if you know your way around editing CSS code.

This concludes our tutorial about embedding Instagram photos, hopefully you will be able to find some beautiful pictures to put on your website.

Keep in mind that, even though embedding content from other websites usually seems like a cool thing to do, often times it reduces your website loading speed, so it should be done responsibly and only when you think it will enrich your website.

Also Check:
7 Sites Alternative to Flickr
3 Free Photo Editing Apps
5 Free Online Photo Editing Software

If you are using a CMS such as WordPress or an online website builder, you can also use some plugins of widgets to embed Instagram photos on your site without touching code.

Was this post helpful?

If you found this post to be helpful, please share it! Thank you :)

f t g+ in