• Blog
  • Tutorials
  • Embed Instagram Feed on Any Website without Coding!

Embed Instagram Feed on Any Website without Coding!

Share
Learn how to add an Instagram feed to your website by means of an Elfsight widget. It’s free and requires no programming skills.

Use a ready-made solution: Instagram Feed widget

You can embed Instagram Feed without programming and in no time with the help of an Instagram Feed widget. It allows you to create an Instagram gallery in a visual editor by mixing and matching ready-made elements. You can also customize any detail to your liking. One of such widgets is Instagram Feed by Elfsight.

Embed Elfsight Instagram Feed on any website

Quick guide: how to embed Instagram Feed code on a website with a widget

Here’s a quick tutorial for you, just follow the steps and the procedure will take no more than 2 minutes:
  1. Create a free Elfsight account.
  2. Select Instagram widget in catalog.
  3. Generate Instagram embed code.
  4. 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 in features. 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.

Get inspired by real use cases

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 as in in the app, but you can switch them on or off every time you wish.

Vivienne Sabo Elfsight Instagram Feed

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 in the app. They attract attention with this wall template and stay exceptional. Minimalistic and appealing, Instagram Feed helps them beautify the website content.

The Bacon Brothers  Elfsight Instagram Feed

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! This is a great way to attract new followers to your profile and add eye-catching detail to your website design.

Abu Dhabi University Elfsight Instagram Feed

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!

Fatburger Elfsight Instagram Feed

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 simply upload photos and videos from a profile or a hashtag to the site as they are, and have no opportunity to moderate them in any way.

Elfsight Instagram Feed embed for free without coding

The most detailed guide of Instagram Feed customization and embedding

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 content from the app 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.

Add sources to Elfsight Instagram Feed

Filter posts

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 code for embedding

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:

  1. Click on the ‘Add to website’ button, you’ll get to the Elfsight admin panel.
  2. Register or log in there. Inside, you’ll see the feed you’ve just created.
  3. Choose your plan. The good news is that there’s a free version, not limited in functions!
  4. Copy the code for Instagram Feed from the code generator.
Generate installation code of Elfsight Instagram Feed

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.

Elfsight Instagram Feed

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:

  1. Open the HTML file of the required page in your editor.
  2. Paste the installation code of your Instagram Feed to the page area where you need it to appear.
  3. Save the changes.

You should simply decide in what section you want to display the widget. 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, posts in the widget will update automatically, you won’t need to visit the Elfsight admin panel and refresh them manually.

How to embed Instagram Feed on WordPress

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:

  1. Log into WordPress.
  2. Go to ‘Pages’ and select the page of your choice.
  3. Add a custom HTML block to the required section of the page.
  4. Paste the Instagram code you’ve got in the code generator to this block.
  5. Click ‘Update’ to save the changes.
  6. 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 the published widget. There’s no need to update it on your WordPress site.

Create and embed Instagram Feed on WordPress →

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.

  1. Select the required page in a WordPress admin panel.
  2. Click ‘Edit with Elementor’ either through the list of pages or in the WordPress page editor.
  3. Drag and drop the ‘HTML’ element to the needed page area.
  4. Paste the installation code to the ‘HTML Code’ field in the left-hand menu.
  5. 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.

Create and embed Instagram Feed on Elementor →

How to create an Instagram Feed in Wix

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!

  1. First, log into your Wix Admin Panel and choose a website for the widget.
  2. Open the ‘Settings’ section in the Dashboard menu.
  3. Choose the ‘Custom code’ option.
  4. Click the ‘Add Custom Code’ button and paste your code to the HTML field.
  5. After you’ve pasted the Instagram installation code, click ‘Apply’ to save the changes on Wix.


Create and embed Instagram Feed on Wix →

How to add Instagram Feed to Weebly

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.

  1. Log into your Weebly Admin Panel, click on ‘Edit Site’.
  2. Drag and drop the ‘Embed Code’ element to the needed page area.
  3. Click on the block on the Weebly page.
  4. Press ‘Edit Custom HTML’.
  5. Paste the widget’s installation code into this Weebly block.
  6. Publish the changes.
  7. 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.

Create and embed Instagram Feed on Weebly →

How to embed Instagram Feed widget on Squarespace

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.

  1. Log into the Squarespace admin panel, choose a site for the widget. 
  2. Click ‘Edit’ next to the page area where you need to display the widget 
  3. Add a ‘Code block’, it’ll initiate an HTML field on a Squarespace page. 
  4. Paste your Instagram Feed installation code there. 
  5. Save the changes.
  6. 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.

Create and embed Instagram Feed on Squarespace →

How to embed Instagram Feed on Jimdo

When adding your Instagram code to Jimdo, as on any other you have to do the following:

  1. Log into the Jimdo admin panel.
  2. Mind that you can add HTML code to any text field.
  3. Click the button </> (Edit HTML) in the text section where you wish to present the widget.
  4. Paste your installation code there.
  5. Save the changes!
  6. 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.

Create and embed Instagram Feed on Jimdo →

Embed Instagram Feed on Shopify

In most Shopify templates it is possible to place custom HTML code to the homepage. Here’s how you can do it:

  1. Log into the Shopify Admin Panel.
  2. Go to the ‘Online Store’ section.
  3. Press ‘Customize’. 
  4. Click ‘Add Section’ in the left-hand menu.
  5. Click ‘Add’ in ‘Custom Content’. 
  6. Remove the pre-installed Shopify sections. 
  7. Click ‘Add Content’ and select ‘Custom HTML’. 
  8. Paste the Instagram gallery installation code to the ‘HTML’ field. 
  9.  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:)

  1. Go to the Shopify Admin panel.
  2. Move on to the ‘Online Store’ section and select ‘Actions’. 
  3. Select ‘Edit Code’ in the Shopify drop-down menu. 
  4. Go to the ‘theme.liquid’ file.
  5. Paste the Instagram Feed installation code after the Shopify ‘Body’ tag. 
  6. 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.

Create and embed Instagram Feed on Shopify →

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!

PricingFreePaid
  No matter what plan you choose – you won’t have any limits in functions. You can:
Add content from different sources.
Filter posts.
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
Professional support
Free installation help
No Elfsight logo
LimitsNo Elfsight logo removal
200 views
Just one website for embedding
5,000 – 5,000,000 views
Best forThose who want to test Instagram Feed
Small startups
Websites with low number of visits
Beginner web developers
High-traffic websites
Agencies
Developing startups
Freelancers and businesses creating websites for clients


Elfsight Instagram Feed CTA

Advanced customization of widget

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.

  • Slider template. You can present posts from the app in several scrollable lines. It will look neat and classy, and will complement the overall website design.
  • Carousel template. Showcase posts with the help of a roundabout. This interactive element will boost engagement on your site and increase the time spent on it.
  • Post widget. You can display a single post on a website, to illustrate a quote or a section of an article.
  • Instagram sidebar template. If you need to display Instagram in the side menu, you can easily do it. Feel free to locate the widget anywhere you wish, not only in the content part.
  • Grid template. A classy square variant of presenting Instagram posts. Photos and videos will take a limited space, looking neat and delicate.

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.

  • Personalize layout

    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.

    Personalize layout of Elfsight Instagram Feed

  • Adjust colors

    You can select one of more than 10 ready-made color schemes for your gallery. 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. 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 Instagram is the 7th most visited website in the world, with 2.9 billion total visits per month, as claimed by Hootsuite, the audience there is rather limited. By placing your account on a website, you’ll be able to attract new subscribers and readers to it with a CTA.
  • Placing your feed on a website increases engagement, as stated in Business News Daily. It makes people spend more time on the website, clicking on photos from their favorite app.
  • According to Forbes, the best way to use website and social platforms is to unite them, and use websites as the hub of online business and reputation. Then businesses should
    use social media company pages as spokes, exploiting each platform for its unique benefits and audience.
    To reach this goal, companies should add social media content to their websites.
  • 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, and you’ll keep up the brand consistency.
  • The widget on a website will boost social proof and make customers sure you’re a trustworthy business. In accordance with a BrightLocal study, 91% of people read customer reviews before making a purchase decision. 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. Take into account the following statement by BigCommerce:
    You need to have a big enough customer base (who are satisfied with your services) to generate positive content based on their customer experiences.
    At the end, you won’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.

Elfsight Instagram Feed

Instead of conclusion

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.

You have the following choices if you have read the instructions but still have questions:

Support. You may always get in touch with our support staff or read articles in the Help Center if you’ve read the instructions but still have any queries.
Forum. Connect with the Elfsight peers, voice your opinion, and take part in the community’s life!
Instagram API by Facebook. If you wish to attempt making your own widget, you can find documentation there.
Instagram about their platform. Learn what Google’s own advise about using user generated content for achieving business goals.

We tenderly invite you to leave comments below if you liked the post or couldn’t find the information you were looking for. Let’s talk about whatever you find interesting!