Embed Instagram Photos or Videos into a Website

of 06

Embed Instagram Photos or Videos into a Website

A Facebook employee demonstrates the new Instagram video option during a press event at Facebook headquarters
Justin Sullivan/Getty Images News

Ever wanted to share a particular Instagram photo (or several of them) on your website, but was frustrated that you had to save the photo to your computer and upload it to your site?

Instagram now has an embed feature that you can use to easily insert photos or videos into the HTML of your website or blog, and you don’t have to be a web designer to figure out how to do it.

Click through the follow steps to see how you can easily embed any Instagram photo or video in your website in just a few minutes.

of 06

Find the Instagram Photo or Video Page You Want to Embed

Screenshot of Instagram.com/AboutDotCom

The first step to properly embed an Instagram photo or video is to access the official Instagram photo/video page that you’re looking to showcase on your website. This means that the URL must be something like: instagram.com/p/xxxxxxxxxx/.

For this example, we’ll use a photo take from the official About.com Instagram account, but you can use any Instagram photo (or video) that you want.

Instead of right clicking your mouse and choosing “Save As” or taking a screenshot of the image, you’re simply just going to look for the three little gray dots in the bottom right corner of the image box, underneath the description and comments.

of 06

Choose the ‘Embed’ Option

Screenshot of Instagram.com/AboutDotCom

Click the three little gray dots and you should see two options pop up. One is “Report inappropriate” and the other is “Embed.”

Click on “Embed.”

of 06

Copy the Embed Code

Screenshot of Instagram.com/AboutDotCom

Once you click “Embed,” a box will pop up in the middle of your screen displaying a string of code.

You don’t have to know how any of that code works or what it means in order to properly embed the photo or video into your site.

Simply click on the green “Copy Embed Code” button to automatically copy  the entire string of code.

We’re done with the Instagram page now.

Next, you can move on to your website or blog.

of 06

Paste the Instagram Embed Code into the HTML of Your Website

Screenshot of HTML pasted into WordPress

It’s up to you to access the admin area or dashboard of whichever website or blogging platform you’re using, and find the right area to insert the code.

For example, if your site runs on WordPress, you just need to access your editable post or page in “Text” mode (rather than Visual mode), right click in the editor, and select “Paste” to put your copied embed code into the box.

Save it, center it if you like, publish it and you’re done.

of 06

View Your Page and Embedded Instagram Photo

Screenshot of Instagram embedded into WordPress site

Take a look at the published page online to see the new Instagram photo or video neatly embedded right into it.

You should be able to see the photo with the link to the Instagram user’s name at the top as well as the number of likes and comments beneath it.

If it’s a video instead of a photo, visitors to your website will be able to play the video right there on your site.

Of course, if nothing shows up on your site, you may have pasted the code in the wrong place or perhaps didn’t copy the full string of code.

Check out this great HTML WordPress help article if you’re having any trouble.