How to Embed an Instagram Feed on Your Website

An Instagram feed is a great way to keep your website fresh while showcasing your latest posts, products, or behind-the-scenes content. Whether you’re building your brand, highlighting customer experiences, or promoting new updates, displaying your Instagram feed helps visitors stay connected with your social media presence without leaving your website.

With Jotform’s Instagram Feed Widget, you can bring your Instagram content directly to your website in just a few steps. Customize the layout to match your site’s design, then embed the widget to keep visitors engaged with your latest posts.

Creating Your Instagram Feed Widget Embed Code

Before you can embed the widget on your website, you’ll first need to connect your Instagram account and customize how your feed will appear. Here’s a quick walkthrough:

1. On your Workspace page, click on Create on the top-left side of the screen.

2. In the window that opens up, click on Website Widget.

3. Next, in the Search bar at the top of the Choose Website Widget page, search for the Instagram.
4. Then, in the search results, click on Use Widget.

5. Now, in Website Widgets, under the General tab in the Widget Properties panel on the right side of the page, configure the following options:
   • Connected Sources
     • Source Type — Choose the type of Instagram content to display, such as posts from a specific account or another supported source.
     • Source — Enter or select the Instagram account or source you want the widget to display.
     • Add Source Button — Click this after setting up the Instagram sources to display content
   • Header — Toggle this to show or hide the widget’s header.
   • Widget Title — Add a title to appear at the top of the widget.

6. Then, scroll down to the bottom and continue to set up these options:
   • Widget Description  — Add a short description below the title to provide context for your Instagram feed.
   • Source Tabs — Show tabs that let visitors switch between multiple connected Instagram sources.
   • Author Name — Show or hide the name of the Instagram account that published each post.
   • Author Picture — Show or hide the profile picture of the Instagram account.
   • Publication Date — Show or hide the date each Instagram post was published.
   • Post Text — Show or hide the caption or text associated with each Instagram post.
   • Source Label — Display a label indicating which connected Instagram source each post belongs to.

7. Once you’re done, switch to the Styles tab and manage the following options:
   • Color Scheme — Choose a predefined color scheme or customize the widget’s colors to match your website.
   • Title Alignment — Choose how the widget’s title is aligned, such as left, center, or right, to match your website’s layout.
   • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
   • Post Style — Select the overall appearance of each Instagram post card.
   • Action on Post Click — Choose what happens when a visitor clicks a post, such as opening it in a popup or redirecting to Instagram.
   • Popup Style — Customize the appearance of the popup displayed when visitors open a post.

8. Then, scroll down and set up these other options:
   • Image Ratio — Adjust how images are cropped or displayed within each post.
   • Actions Bar — Show or hide the action bar containing engagement or sharing options.
   • Source Style — Customize how the connected Instagram source information is displayed.
   • External Links — Show or hide links that direct visitors to Instagram.
   • Card Accent Colors — Choose how accent colors are applied to your Instagram feed cards. You can use Instagram’s default platform colors, apply a single custom accent color across all cards, or turn off card accents altogether.
   • Background Color — Set the overall background color of the widget.
   • Feed Surface Color — Set the background color of the feed area where your Instagram posts are displayed.

9. Moving on, scroll down and manage these things:
   • Post Background — Choose the background color of each post card.
   • Post Text Color — Set the color of the text displayed in each post.
   • Post Link Color — Choose the color used for links displayed within posts.
   • Popup Background — Set the background color of the post popup.
   • Popup Backdrop Color — Enter a CSS color of the overlay displayed behind the popup.
   • Popup Text Color — Set the text color used inside the popup.

10. After that, scroll down to the bottom and continue to customize these things:
    • Text Size — Adjust the size of the text displayed throughout the widget for better readability or to match your website’s design.
    • Corner Radius — Control how rounded the corners of the feed cards appear, giving the widget either a modern, rounded look or a sharper appearance.
    • Card Shadow — Enable or adjust the shadow effect around each post card to add depth.

11. Following that, switch to the Layout tab and configure the following options:
    • Layout — Choose how your Instagram posts are arranged, such as in a grid, masonry, carousel, or another supported layout.
    • Width — Adjust the overall width of the widget to fit your website’s layout.
    • Columns — Choose how many columns of Instagram posts are displayed at once. More columns allow more posts to appear side by side.
    • Rows — Set the number of rows displayed in the widget, controlling how many posts are visible vertically.

12. Then scroll down to the bottom and continue to set up these things:
    • Item Spacing — Adjust the amount of space between individual posts to create a more compact or spacious layout.
    • RTL — Enable Right-to-Left (RTL) layout for languages that are read from right to left.
    • Open Links in New Tab — Choose whether Instagram links open in a new browser tab.

That’s it. Your Instagram Feed Widget is now set up and ready. Next, you’ll copy its embed code so you can add it to your website.

Getting Your Instagram Feed Widget Embed Code

Once you’ve finished customizing your Instagram Feed Widget, you’re ready to get its embed code. Here’s a quick how-to:

1. In Website Widget, in the pink navigation bar at the top of the page, click on Publish.

2. Then, click on Copy Code.
3. Or, if your website is built on a supported platform, click on Platforms in the menu on the left. 

4. Next, in the Search bar at the top of the Platforms page, search for the specific platform.

5. For this example, we’ll use the Tumblr platform. Click on its icon.

6. Finally, click on Copy Code, and you’re done.

That’s it. Simply paste the embed code into your website, and the widget will automatically display your latest Instagram posts for visitors to explore. Take a look at the screenshot below to see how it appears on a sample website.