How to Embed Instagram Feed on a Website

Step 1. Create an Instagram Feed Widget

Numerous expert ready-to-use layouts are one of the Elfsight IG widget's key advantages. The feed may be included as a slider, a grid, or a compact tiny widget. Additionally, you have the option of using a premade dark theme for the widget.

Add sources to the widget

You may add handles and hashtags from Instagram to your website with the Elfsight widget. Additionally, you may get the Instagram Feed from two distinct sources. This entails that you may display posts from your brand profile as well as those in which customers have tagged your business.

• Embed Instagram profile
  To add posts from your profile, you only need to put your handle into the source section. Not even an account creation is necessary. 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 posts by hashtags
  In addition to your personal profile, you may post images and videos with hashtags, which will surely help you establish more trust for your company.

Filter sources

There are several options for you to filter the posts in an Instagram Feed widget and get only the most beautiful and popular ones.

• Display Only From
  You may use this filter to reduce the number of photographs in your feed. You might, for instance, add a hashtag to the Display only From filter after adding a username to the source.
• Exclude By Source
  Specific hashtags or users are not permitted by this filter, therefore they won't show up in your feed. When your source hashtag is too general or you need to keep competition posts out of your feed, it works great.
• Number of posts to display
  You can also set a limit on the amount of photographs you wish to display on the Filters tab. For instance, if you set the widget's image limit to 7, it will show the source's 7 most recent postings.

Step 2. Customize the Instagram widget

You don't need to know how to code or conduct web design to work with the IG widget. In a visual editor, you can easily customize articles by changing the layout, CTA, columns, and rows. You have the chance to make an Instagram gallery that will precisely match the design of your website.

Select a layout to your needs

Choose whether to show posts in a grid or a slider when customizing the layout. You may also alter the post template. For the publications, you may select a traditional or a tile template. 

Last but not least, you have the option to modify the columns, rows, spaces between them, posts, and popup components. All the elements of a typical Instagram post, including the user name, the posting date, the amount of likes, and the comments, may be turned on and off.

Change colors

For your gallery, you may choose from more than 10 premade color schemes. If you don't want to worry about selecting color schemes, that will assist. However, you may individually alter the colors of each piece.

For instance, both posts and popups have the option to customize background, text, and link colors. In the end, you may customize the "Load more" button to make your feed a crucial component of your website. Without writing a single line of code, too!

Step 3. Generate an embed code

You'll certainly wish to integrate your ideal, one-of-a-kind Instagram feed on a website after you've finished building it. Making a feed in a visual editor will be as simple as that. At this point, you must go receive your unique installation code from an Elfsight code generator. Here's how:

1. When you click the "Add to website" button, the Elfsight admin panel will appear.
2. Log in or register there. You may view the feed you just made inside.
3. Select your strategy. There is a free version with full functionality, which is wonderful news!
4. From the code generator, copy the code for Instagram Feed.

Step 4. Paste the code to your website

You must always include the two lines of installation code in the HTML of your website. Typically, the embedding procedure will just call for the following three steps:

1. Open your editor and the necessary page's HTML file.
2. Add the Instagram Feed installation code to the page place where you want it to display.
3. Save the modifications.

Simply choose the section where you want the widget to appear. You may add it as a photo gallery to the homepage or as a single article to the sidebar. Don't set limits; there are lots of alternative options!

The whole Instagram Feed you built in the Elfsight editor will show up on your website once you've pasted the installation HTML code there.

How to insert an Instagram feed into a WordPress page

It's simple to integrate Instagram with a WordPress site. However, some users like Elementor over the built-in WordPress editor. For your convenience, we've explained both installation options.

Option 1: Using the WordPress editor

It's time to include your feed into your WordPress website after you've built and configured it in the Elfsight admin panel. Nothing else is as simple as this, either! Usually, you should include installation code in an HTML Code section you make. This is how:

1. Enter the WordPress admin panel.
2. Choose the page on which you want to publish an Instagram Feed by going to "Pages."
3. You should add a custom HTML block to the necessary area of the page.
4. Paste the IG code that was generated by the code generator there.
5. Click "Update".

That’s it! Now, you can check the widget live on a WordPress website. The widget you made in the Elfsight admin panel is what it is.

This is how to properly incorporate an Instagram feed into a website. Changes you make in your Elfsight panel are instantly reflected in the public widget. It doesn't require updating on your WordPress website.

Create an Instagram feed on WordPress and embed it

Option 2. Using Elementor

Since there is no need to worry about HTML with a visual editor, many WordPress users prefer using it over the default editor. Elementor improves WordPress and streamlines website owners' ability to make changes to their pages.

1. In the WordPress admin panel, choose the necessary page.
2. Either in the WordPress page editor or the list of pages, select 'Edit with Elementor'.
3. Move the "HTML" element by dragging it to the required page area.
4. In the 'HTML Code' area on the left-hand menu, paste the installation code for your Instagram gallery.
5. To save the changes in Elementor and WordPress, click "Update."

By following these instructions, you may add the Instagram Feed HTML code to any Elementor-created WordPress pages. Repeat the procedure for each and every required page.

Create an Instagram feed with Elementor and embed it