ComputersConsumer ElectronicsCell PhonesHome Theater & AudioGraphic Design & Video EditingInternetIndustrial Technology

4 Ways to Embed Instagram Photos and Videos

Updated on February 24, 2017
How to Embed Instagram photos and Videos on your site
How to Embed Instagram photos and Videos on your site

Are you having trouble figuring out as to how you can embed your Instagram photos and video to your blog or website? Then you have come to the right place. Every Instagramer wishes to showcase their beautiful Instagram photos and creative videos to the whole world, and with the introduction of Instagram web embeds everyone has been looking for ways to showcase their Instagram photos and videos on their website or blog in the best way possible. In the process some might like the introduced embedding and some might not and would obviously be looking for more ways to display their photos more beautifully while getting rid of the traditional and ugly looking unfashionable characters from your embedding. Since Instagram has been inspiring millions of users to learn and do amazing and creative photography and videography one can expect users to promote themselves on the web, besides Instagram embedding opens up more dimensions for users to get more followers and likes which in turn will get them recognized by advertisers for promoting their brands. As a result more popularity and brand following. So are you ready to inspire people with your photographs and videos? How silly, yes you are! :D

Let's Get Started

In this article we shall discuss several amazing and flexible embedding methods to bring out your photo and video embed like a charm. Sit tight it's a beautiful article and will be quick! :) You might find some steps lengthy and technical but they are all in the writing and hardly take seconds to process when using the actual process. The whole article contains 4 methods of embedding your Instagram photos and videos wherein the first method is the base and if you have understood the first method then remaining methods will become very easy.

Method-I (Instagram Web Embed Method) Default method

Since basically we all are using Instagram, we will keep the latest addition of Instagram web embeds as the default method so that we know how to use the basic method of Instagram embedding and then move on to other methods. To begin first log in to your Instagram web profile. To log in visit Instagram.com. Log in with your Instagram username and password.

Log in to your Instagram Account
Log in to your Instagram Account

Navigate to your Instagram web profile by using the drop down menu on the top right toolbar. Now as you have logged into your instagram web profile, just scan through your photos and videos and choose a desired photo or video that you wish to embed on your website or blog. Click on the chosen photo to open the photo window popup. Now in the photo window click on the photo settings ( The three small dots) at the bottom right hand side of the comments box.

Click the dot icon to get Embed Options
Click the dot icon to get Embed Options

Upon clicking you get two options of "reporting the photo as inappropriate" and "embed" the photo option. Click on "embed" to generate the embed code for your chosen photo.

Click embed to get generate the Instagram embed code
Click embed to get generate the Instagram embed code

Copy the generated embed code and move to your website or blog where you wish to embed or feature your Instagram photo or video.

Copy the generated embed code
Copy the generated embed code

Until now everything was easy and simple but now comes the embedding part and I know not all Instagram users are familiar with html. Don't worry the embedding part doesn't require one to be a professional web designer or programmer. In fact the embedding process is quite easy and you need to know just a few couple of parameters to learn how to control your photo or video embedding on your blog posts or website. To begin with the embedding we will start with blogger which is a very easy and very basic platform and will also help you understand how to embed your Instagram photos and videos on your website. Log in to your Blogger profile and open a post where you wish to embed the Instagram embed code. Instead of using the normal editor, switch to html mode editing by clicking "html" on the top left toolbar.

Go to html mode on your Blog platform
Go to html mode on your Blog platform

Aligning Your Instagram Embeds

To begin the embedding start with a div tag that is <div and define the alignment for your embedding that is whether you wish to align your photo in the center or left or right by defining align="center" that is your photo will be aligned in the center. and close it with a > to close the div tag. So altogether you start with <div align="center"> and then paste your copied Instagram embed code and close it with a slash div tag that is </div> , So altogether the code looks like this.

<div align="center">
###Your Copied Instagram generated code goes here###
</div>
Aligning and pasting the Instagram generated code in to your Blog
Aligning and pasting the Instagram generated code in to your Blog

Now switch back to normal editing from html editing by clicking "Compose" on the top right toolbar of your editing window to check how you photo gets embedded in the post. If you wish to align your photo somewhere left or right then simply instead of center attribute in align parameter user left or right to align your photo to left or right respectively. You can also change your photos size and other parameters, to learn about it see the tips section. Use the same technique to embed your photos or videos to your WordPress blog or website in places wherever html is accepted or else use "custom html" to embed the photos and videos. Hurrah you just learned how to embed your Instagram photos and videos to your blog or website.

Click compose to check the results of your embedding
Click compose to check the results of your embedding

Instagram web embeds has features which show how many likes and comments has the photo got and most of all it displays the creator of the photo or video which in turn drives others to follow you on Instagram or your blog. So web embeds basically gives you instant fame and more followers. Now if you didn't like the Instagram web embeds then you can also use other Instagram embed services to test your photo or video displaying to the next level. So let's get started with other popular embed methods that Instagramers are using.

A Short Instagram Tutorial Video

Method-II ( Embed Instagram Method)

This method is quite popular among those who particularly love flashy presentations and flash players. This tool is known as "Embed Instagram" which is developed using developer tools and comes quite handy for generating quick embed codes for Instagram photos and videos. To begin the method firstly copy the Photo or video URL which you wish to embed on your site or blog.

Copy the Instagram video or photo url
Copy the Instagram video or photo url

Now visit Embed Instagram to generate the embed code for your photo or video. To generate the code, paste the copied URL in the Instagram URL box and click "Generate Embed Code" to generate your Embed code which will also show a preview of your added URL.

Visit embed Instagram and generate the Instagram embed code for your photo or video
Visit embed Instagram and generate the Instagram embed code for your photo or video

Now simply use the same trick of embedding as in method-I to embed your Instagram videos to your site. Just put the generated code in between the div tags and specify an alignment for your embed. The best part about this method is that video embeds come out surprisingly well and photos too along with description of the photo and the creator of the photo or video.

Enjoy the rich snippet Instagram photo and Video embeds
Enjoy the rich snippet Instagram photo and Video embeds

Method-III (Insta Embed Method) Only for Video Embeds

Coming to this method, this method is exclusively for Instagram video embedding and is quite popular among those who love html and flash generated videos (Fast cats :)). This method includes the use of Instaembed site which is exclusively made for generating flash and html rich video players for Instagram videos. To begin the method firstly copy the video URL which you wish to embed on your site or blog.

Copy the Instagram video Url
Copy the Instagram video Url

Now visit InstaEmbed.com to generate the embed code for your photo or video. To generate the code, paste the copied video URL in the Instagram URL box and choose the parameters like what type of video player embed do you want, whether you want a flash powered video player or a html 5 powered video player. You can also decide the size parameter for your video which contains mainly two options of 640x640 default(large) and 320x320 (small). After choosing your desired parameters, click "Generate Embed Code" to generate your Embed code which will also show a preview of your added video URL.

Visit Instaembed.com to generate your Instagram video embed code
Visit Instaembed.com to generate your Instagram video embed code

Now as usual use the same trick of embedding as in method-I to embed your Instagram videos to your site. Just put the generated code in between the div tags and specify an alignment for your embed. The best part about this method is that video embeds come out surprisingly well and especially the 320 sized videos look so adorable.

Embed your Instagram video and Enjoy
Embed your Instagram video and Enjoy

Method-IV (Rich Content Embed Method)

This method is a very popular and preferred method of embedding Instagram photos and videos because this method brings out your photos and videos so beautifully that even the photos which you wished that they looked good would also come out like a charm. Most of all you can also use this method to embed your Instagram photos in the apps that you own and hence quite famous among developers too. This method includes the use of embedly a famous developer tool. To begin the method firstly copy the photo or video URL which you wish to embed on your site.

copy the Instagram photo or video url
copy the Instagram photo or video url

Now visit the embed.ly site to generate the embed code for your photo or video. To generate the code, click the "Get Embed Code" button on the site.

Visit the embedly.com to generate your rich snipped embed codes
Visit the embedly.com to generate your rich snipped embed codes

Upon clicking "Get Embed Code" you will be redirected to Embed code generator service of embed.ly . Now simply paste the copied Instagram photo or video URL in the URL option and click generate. You will be surprised how beautifully embed.ly generates your copied URL's preview. Click on "Copy Embed Code" to copy the generated embed code.

Copy the generated rich snippet embed code for your Instagram photo or video
Copy the generated rich snippet embed code for your Instagram photo or video

Once again use the same trick of embedding as in method-I to embed your Instagram videos or photos to your site. Just put the generated code in between the div tags and specify an alignment for your embed. The best part about this method is that embed codes generated are so beautiful and professional to look at.

Finally embed your Instagram photo or video
Finally embed your Instagram photo or video

Also do you know embed.ly also powers a very popular social media feed app called Tintup which you can also use it for displaying your whole Instagram feed, but I don't recommend using it because that way you lose the creativity of single embeds and then what difference does it make in having Instagram web profile and using Tintup apart from hosting it on Instagram or on your own site besides it gets too crowded and also adds to much to your site's loading speed.

Instagram Web Embed Tips and Tricks

Ahem ! So you all know how to embed your Instagram photos and videos to your site but as usual being related to photography and creativity, we all long for new ways to improve or create something new with our Instagram photos. In this section we will explore some basic tips and tricks to help boost your Instagram photo and video embeds.

  • You can control your Instagram photos and videos embed sizes and frames from the embed code itself. The three parameters include "width" , "height" and "frame border".You can control your photos using these three parameters. You can see these highlighted parameters in the photo below.

How to Configure your Instagram photo and video Embeds
How to Configure your Instagram photo and video Embeds
  • Just use these three parameters and you can unleash many creative things. For example you can display the same image in various sizes and create something creative. For example: The figure below shows how different sized embeddings can create amazing stuffs including having a frame border. Just change the values and experiment just like the way you play Instagram's retro effects.

Various configured Instagram photo embed codes
Various configured Instagram photo embed codes
  • Method-III is exclusively for Instagram videos so don't paste your photo URL's instead of video URL's. [ :D Happens sometimes! :) ]. Also the html 5 and flash powered videos are not supported by certain sites and browsers so beware of its limitations.
  • Avoid using Instagram feeds and plugins as they can severely affect your site's load speed, especially WordPress powered sites.
  • Method-IV that is using embed.ly for apps requires one to install the embedly plugin first in order to use the generated api key. (Ignore if you are not using it via an api key)

Wow a Poll !!

Which method did you like the most ?

See results

Since Instagram has released its latest feature of "Instagram web embeds" one can expect the embed codes to get smarter and beautiful soon but as of now we have to make use of these tricks mentioned above. The article will be automatically updated if any new app comes into picture. Till then use these tricks.

Hopefully this article has helped you! For any doubts, new tricks, new apps or recommendations please comment in the comment box below. If you liked the article then do share with your friends so that they too learn how to embed Instagram photos and videos to their site and blog. ~ Your Fellow Instagramer

Comments

    0 of 8192 characters used
    Post Comment

    • profile image

      md manik 4 weeks ago

      Nice

    • profile image

      Kelvin 6 months ago

      COOL! It is working!

    • profile image

      Angela 2 years ago

      OMG I love you, I never use embedding because it makes the pic obnoxiously large and I couldn't center it, you've saved me! Thanks!

    • profile image

      hunt4hardy 2 years ago

      Another cool way: http://embedmyphotos.com

      No need to register and it works perfectly on smartphones