Way 1. Use Instagram Feed Widget
You can embed Instagram Feed without programming and in practically no time with the help of an Instagram Feed widget. It allows you to create an Instagram gallery in a visual editor by simply mixing and matching ready-made elements. You can also customize any detail to your liking. One of such widgets is Instagram Feed by Elfsight. In general, to embed Instagram posts on your website by means of a widget, you should follow these steps:
This is as easy as one-two-three! To learn more about embedding Instagram Feed on any particular platform, you can read instructions below.
Quick guide: how to embed Instagram Feed on a website
Here’s a quick tutorial for you, just follow the steps and the procedure will take no more than 2 minutes:
Create a free Elfsight account.
Select Instagram widget in catalog.
Generate Instagram embed code.
Add code to your website pages or template.
Or create your own feed in the Instagram Widget Builder right away:
In addition to simple embed process, we would recommend using a widget because of the following features included:
Ready-to-use templates. Various premade layouts and posts look extremely professional as they are.
All posts filtering. By hashtag, source, and number of posts.
Customization. You have complete freedom to personalize every single detail in a visual editor.
Zero programming. You can design the widget yourself like a pro, without any web design skills.
Free version without limits. The great news is that you don’t need to pay to test all the features and embed process.
Embedding takes seconds. Add the feed by pasting two lines of installation code to the required place in website’s backend.
A few real use cases of adding Instagram feed to sites
Get references from our amazing clients. Explore these use cases and get inspired by music, educational, and beauty websites. Take ideas and create your own gallery to increase user engagement, create social proof, improve the look and feel of your website, and most importantly, achieve your business goals. Here we go!
Carousel Template by Vivienne Sabo
Vivienne Sabo prefers using a carousel template, which helps them arrange photos without any extra details. Posts are aligned in a string, and photos can be scrolled. Post in a popup has all the elements it has on Instagram, but you can switch them on or off every time you wish.
Collage Template by The Bacon Brothers
The Bacon Brothers organize photos and videos exactly with a collage template. Now, posts look the way they look on Instagram. They attract attention with this wall template and stay exceptional. Minimalistic and appealing, Instagram Feed helps them beautify the website content.
Instagram Gallery by Abu Dhabi University
We are glad to warmly welcome educational, university, and school websites among our customers. Instagram galleries added to such sites can help newcomers to get acquainted with the educational institution and learn more about perspectives there. The Abu Dhabi University set their own grid parameters, adjusted the space between posts – and the grid template now looks stunning! It’s a great way to attract new Instagram followers and add an appealing detail to the website design.
Instagram Photos by Fatburger
Juicy delicious burgers look even more attractive when appearing in Instagram Feed photos. Don’t refuse yourself the pleasure to add appealing photos of your food to the website in just seconds!
Way 2. Use the Official Instagram API for custom scripts
You can also add Instagram posts to the HTML code of a website with the help of Instagram API. For this, you’ll need a strong programming knowledge. In addition, it doesn’t allow you to customize the feed as you want. You’ll simply fetch photos and videos from Instagram to the website as they are, and won’t be able to moderate them in any way.
The most detailed guide of Instagram Feed customization and embedding
Step 1. Create Instagram Feed Widget
Step 2. Generate installation code
Step 3. Embed Instagram Feed in platform website code
Instagram Feed embed pricing
Advanced customization of Instagram Feed
Step 1. Create Instagram Feed Widget
One of the most important perks of the Elfsight Instagram widget is a number of professional ready-to-use templates. You can add the feed in the form of a slider, a grid, and a space-saving small widget. In addition to it, you can choose a ready-made dark theme for the widget and work with it.
Add sources to the widget
Elfsight widget allows you to add different types of Instagram sources to the website: handles and hashtags. What is more, you can fetch two different sources to the Instagram Feed. This means, you can show posts from your brand profile, as well as posts where your customers tag the company.
Embed Instagram profile
To add posts from your profile, you simply need to paste your handle to the source field. You don’t even need to register in your account. It’s great for those who want to fetch public Instagram content to their website without having access to the account.
Add Instagram Hashtag
Having an Instagram campaign you wish to share with the world? Or desiring to proudly present positive testimonials from your grateful customers? In addition to your own profile, you can add photos and videos by hashtag, and it will surely help you to increase trust in your brand.
There are several ways of filtering posts in your widget. For example, if you add content by hashtag, you can display posts by particular authors, include posts by specific hashtag, or you can simply add a URL of the needed publication. Moreover, you can exclude posts by specific authors, hashtags, and URLs. Finally, there’s an opportunity to display a certain number of posts.
Step 2. Generate installation code
After creating your perfect unique Instagram Feed, you’ll be eager to embed it on a website. It is going to be as easy as making a feed in a visual editor. At this stage, you’ll need to go get your personal installation code in an Elfsight code generator, and here’s how you will do it:
Click on the ‘Add to website’ button, you’ll get to the Elfsight admin panel.
Register or log in there. Inside, you’ll see the feed you’ve just created.
Choose your plan. The good news is that there’s a free version, not limited in functions!
Copy the code for Instagram Feed from the code generator.
That’s it! And installation will be even easier. Let’s move on to the last step of embedding Instagram posts on a website.
Step 3. Embed Instagram Feed in platform website code
Typically, to embed an Instagram Feed widget, you’ll need to paste your generated installation code to the HTML field. Go to the admin panel of your website and find an opportunity to edit the HTML code of a needed page.
In different website builders you can do it in diverse ways. In some cases you’ll have to do it in a website template, in others you’ll be required to create an HTML field in your visual editor. There’s sometimes a possibility to see the HTML code of the whole web page with the help of a corresponding function.
Below, you’ll find instructions for embedding the installation code of Instagram Feed to HTML of the most popular platforms. Choose yours and start the embed process right away! We strongly recommend you to start with a guide for HTML, for it basically describes what you’ll need to do on any other platform.
How to embed Instagram Feed into HTML code of a website
In all cases, you need to add the two lines of installation code to your website HTML. In general, the embedding process will require only three actions:
Open the HTML file of the required page in your editor.
Paste the installation code of your Instagram Feed to the page area where you need it to appear.
Save the changes.
You should simply decide in what section you want to display your Instagram Feed. You can add it to the homepage as a photo gallery, or a single post to the sidebar. There are many other variants, don’t limit yourself!
After you paste the installation HTML code there, the whole Instagram Feed you’ve created in Elfsight editor will appear on your website. In addition, Instagram content will update automatically, you don’t need to visit the Elfsight admin panel and refresh it manually.
Adding Instagram to a WordPress website is easy. But there are some users who prefer Elementor to the default WordPress editor. We’ve described both variants of installation for your convenience.
Variant 1. With WordPress editor
After you’ve created and customized your feed in the Elfsight admin panel, it’s time to add it to your WordPress website. And there’s nothing as easy as this! Commonly, you should create an HTML Code section and add installation code there. Here’s how:
Log into WordPress.Go to ‘Pages’ and select the page of your choice.Add a custom HTML block to the required section of the page.Paste the Instagram code you’ve got in the code generator to this block.Click ‘Update’ to save the changes.Check the Instagram Feed on your WordPress website. It’s the widget you’ve created in the Elfsight admin panel.
You can endlessly make changes in your Elfsight panel, and they’ll automatically show up in your published Instagram Feed. There’s no need to update it on your WordPress site.
Variant 2. With Elementor
A lot of WordPress users prefer working with a visual editor instead of the default editor, as there’s no need to bother with HTML in it. Elementor enhances WordPress and makes it easier for website owners to make adjustments in their site.
Select the required page in a WordPress admin panel.Click ‘Edit with Elementor’ either through the list of pages or in the WordPress page editor.Drag and drop the ‘HTML’ element to the needed page area.Paste the installation code to the ‘HTML Code’ field in the left-hand menu.Press ‘Update’ to save the changes in both Elementor and WordPress.
Following this instruction, you can embed the HTML code of Instagram Feed on any WordPress pages created with Elementor. Simply repeat the process for all the needed pages.
In Wix, you should add an Instagram Feed to the website via your admin panel. There, you’ll need to find an option to add custom HTML code to Wix. Don’t worry, it’s easy!
First, log into your Wix Admin Panel and choose a website for the widget.Open the ‘Settings’ section in the Dashboard menu.Choose the ‘Custom code’ option.Click the ‘Add Custom Code’ button and paste your code to the HTML field.After you’ve pasted the Instagram installation code, click ‘Apply’ to save the changes on Wix.
Weebly is a great platform for business and personal landing pages. Publishing Instagram Feed on it is a great way to enhance the website’s performance and upgrade its look.
Log into your Weebly Admin Panel, click on ‘Edit Site’.Drag and drop the ‘Embed Code’ element to the needed page area.Click on the block on the Weebly page.Press ‘Edit Custom HTML’.Paste the widget’s installation code into this Weebly block.Publish the changes.Check your Weebly site. There, you’ll see the feed you’ve created on Elfsight.
After these few steps your Instagram Feed section will be embedded on a Weebly site. You can turn back to it in the Elfsight admin panel, make any changes you want, and they’ll go live right after you click ‘Publish’. There’s no need to turn back to Weebly and do anything manually in the Instagram section.
Embedding Instagram on Squarespace is intuitive and easy. It’s a great platform which allows you to create websites with zero coding by just placing blocks of content in it. All Squarespace requires you to do is create an HTML Code block in the page area where you need the Instagram Feed.
Log into the Squarespace admin panel, choose a site for the widget. Click ‘Edit’ next to the page area where you need to display the widget Add a ‘Code block’, it’ll initiate an HTML field on a Squarespace page. Paste your Instagram Feed installation code there. Save the changes.Check your Squarespace website. You’ll see the widget from Elfsight, and it will fetch content automatically. There’s no need to turn back to the Squarespace admin panel anymore.
When adding your Instagram code to Jimdo, as on any other you have to do the following:
Log into the Jimdo admin panel.Mind that you can add HTML code to any text field.Click the button </> (Edit HTML) in the text section where you wish to present the widget.Paste your installation code there.Save the changes!Check the Instagram gallery on a Jimdo page.
It will make your Instagram Feed appear on a website. Any time you wish to change something in its settings or design, you can do it.
In most Shopify templates it is possible to place custom HTML code to the homepage. Here’s how you can do it:
Log into the Shopify Admin Panel.Go to the ‘Online Store’ section.Press ‘Customize’. Click ‘Add Section’ in the left-hand menu.Click ‘Add’ in ‘Custom Content’. Remove the pre-installed Shopify sections. Click ‘Add Content’ and select ‘Custom HTML’. Paste the Instagram gallery installation code to the ‘HTML’ field. Save the changes.
Bingo! Repeat the process for all Shopify pages where you need the feed to appear, and you’ll be good.
You can also add Instagram Feed to all pages through HTML of a Shopify website backend. Here’s the easiest way to accomplish it. Don’t be afraid when you see some pieces of HTML code, you won’t break anything:)
Go to the Shopify Admin panel.Move on to the ‘Online Store’ section and select ‘Actions’. Select ‘Edit Code’ in the Shopify drop-down menu. Go to the ‘theme.liquid’ file.Paste the Instagram Feed installation code after the Shopify ‘Body’ tag. Save the changes in an HTML template.
That’s it! Your feed will be up and running on all Shopify pages after these few simple steps.
Instagram Feed embed pricing
You can attach an Instagram Feed to an HTML code of a website in different ways. For example, there’s an option to add it through the official Instagram API, or by means of widgets. In the tables below, you can find a comparison of various solutions for embedding the feed on a website. Elfsight provides you with an opportunity to add Instagram posts with the help of the Instagram Feed widget.
Elfsight Instagram Feed Widget
The process of embedding Instagram Feed in HTML by means of the Elfsight widget is easy, fast, and requires no programming skills. What is more, you’ll have total control over the look and the feel of the feed’s section, so your Instagram gallery looks perfect on a website.
Finally, there are several pricing plans for different cases and business sizes. Choose the one that suits you best!
No matter what plan you choose – you won’t have any limits in functions. You can:
Add content from different sources.
Use ready templates.
Customize colors, rows, columns, and other elements.FeaturesOpportunity to embed a widget in HTML of a website and see how it works.Unlimited number of websites for HTML embed
Free installation help
No Elfsight logoLimitsNo Elfsight logo removal
Just one website for embedding5,000 – 5,000,000 viewsBest forThose who want to test Instagram Feed
Websites with low number of visits
Beginner web developersHigh-traffic websites
Freelancers and businesses creating websites for clients
Advanced customization of Instagram Feed
In addition to all the amazing perks described above, by using the Elfsight widget you’ll get many fantastic opportunities. User-generated content will look professional and neat, as you’ll be able to personalize the feed the way you wish. What is best, you won’t need to know anything about HTML and CSS customization – you’ll do everything in a visual editor. Here are the main settings you can change to your liking.
Choose a template
There’s a huge number of amazing ready-to-use Instagram templates available in a free demo. Looking neat and professional, they’ll be the most amazing addition to the website. They are all customizable and adaptable, and you can totally change the gallery look if you wish.
Customize the widget
Dealing with the widget doesn’t require any web design or programming skills. You can simply personalize posts in a visual editor: change layout, CTA, columns, and rows. You have an opportunity to create an Instagram gallery which will perfectly suit your website look.
First, you can choose whether to present posts in a grid or a slider. Also, you can change the post template. There’s an opportunity to choose a classic or a tile template for the publications. Finally, you have a chance to adjust columns and rows, spaces between them, posts and popup elements. You can switch on and off all the parts of a common Instagram post: user name, date of the publication, number of likes and comments, share button, and text under the post.
You can select one of more than 10 ready-made color schemes for your Instagram feed. It will help if you don’t want to bother about choosing color combinations. However, you can further customize colors of all elements separately.
For example, there’s an opportunity to personalize background, text, and link colors in both posts and popups. In the end, to make your feed an integral part of your website, you can tailor the ‘Load more’ button. And do everything without a single line of code!
Why you should embed Instagram Feed on a website
Everyone knows about placing a link to a website in an Instagram bio. But what is the reason for adding Instagram posts to a website? This popular app is a place for posting appealing pictures and videos. But, in addition to it, the gallery can be a great opportunity to boost marketing results. Here are the main ideas of how you can do it.
Although there are millions of users in this app, the audience there is rather limited. By placing your Instagram account on a website, you’ll be able to attract new subscribers and readers to it with a CTA.
With the help of Instagram Feed for a website, you can adjust the size of posts in a grid, background color, heading, style on hover, and fonts. So, it will complement the overall website design.Instagram Feed increases engagement and makes people spend more time on the website, clicking on photos from their favorite app.The widget on a website will boost social proof and make customers sure you’re a trustworthy business. You should simply show your best works and positive testimonials on Instagram, and then, publish them on your site. A reviews slider on a website will help you boost the reviews management strategy.By embedding Instagram Feed in the HTML code of a website, you’ll save your time and effort on producing new content. Especially, if you fetch UGC with a hashtag. In addition, you don’t need to do anything to refresh content in the HTML of a website – Instagram Feed will do it for you.
It’s free! You can create your own Instagram Feed and start using it right away. It’s great to test its performance and see how it matches your site without paying for it.You can create a gallery with the look and feel of your website in a visual editor with zero coding. This means, you don’t need to study the Instagram API.
If you embed Instagram Feed on a website, it will help you build trust around your e-commerce brand and drive customers’ purchasing decisions.
You can embed Instagram Feed in many different ways. However, the most efficient and money-saving one is to add posts with the help of a widget. You’ll be able to test the feed performance for free, create it in no time, and will be able to grow the number of subscribers with ease. What is more, even if you are a zero-coder, you’ll be able to add Instagram Feed to the website with ease and in no time.
Read More Tutorials