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.
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:
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.
This will display a small popup with a few options including a link to report inappropriate content and a link to embed the photo.
STEP 4: Click the Embed link, which will open another small window with embed code and options.
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:
<title>Instagram Photo Embed Demo</title>
<!-- Paste embed code here... -->
The resulting embedded photo will look like this:
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.
More Instagram Tips
How to Filter Comments on Instagram How to Change Your Instagram Profile Photo How to Clear Instagram Top Search How to Check Your Search History on Instagram Instagram Hashtags: How to Use Hashtags on Instagram How to Clear Instagram Search History How Can I Permanently Delete My Instagram Account? Where to Find Photos You Liked on InstagramInstagram Tips