How to Add an Instagram Feed to 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.

It’s 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.

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 the top-left side of your Workspace page, click on Create.

2. Then, in the menu that opens up, select Website Widget.

3. Next, in the Search bar in the upper-left corner of the Choose Website Widget menu, enter Medium Feed.
4. Then, at the bottom of the search results, click on Use Widget.

5. Now, in the Widget Properties menu that opens on the right side of Website Widgets, under the General tab, set up these properties:
   • Connected Sources — Add the Instagram account or source you want the widget to display.
   • Header — Toggle this to show or hide the widget’s header.
   • Title — Enter a title to appear at the top of the widget.
   • Description  — Add a short description below the title to provide context for your Instagram feed.

6. Then, scroll down and continue with these settings:
   • Post Limit — Set the maximum number of Instagram posts you want to display in the feed.
   • 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. Next, under the Styles tab, customize these properties:
   • Theme — Choose the overall visual theme for the Instagram feed to match the look and feel of your website.
   • Corner Radius — Adjust how rounded the corners of the post cards appear. A higher value creates more rounded corners.
   • 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.
   • External Links — Show or hide links that direct visitors to Instagram.

8. Then, continue scrolling and adjust these options:
   • Popup Style — Customize the appearance of the popup displayed when visitors open a post.
   • Image Ratio — Adjust how images are cropped or displayed within each post.
   • Post Meta Data — Choose which additional information about each Instagram post, such as the post date or other details, you want to display.
   • Text Size — Adjust the size of the text displayed in the Instagram feed to make it easier to read and match your website’s design.
   • Card Shadow — Add or adjust the shadow around each post card to give the feed more depth.
   • Source Style — Customize how the connected Instagram source information is displayed.

9. Next, scroll down and adjust these settings:
   • Jotform Branding — Show or hide Jotform branding on the widget, depending on your plan and preferences.
   • Font — Choose the font used for the text displayed in the Instagram feed.
   • Custom CSS — Add your own CSS code to further customize the appearance of the Instagram feed beyond the available settings.

10. Then, under the Layout tab, configure these properties:
    • 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.

11. Next, scroll down and adjust these settings:
    • Space Between Items — Adjust the amount of space between the posts in your Instagram feed.
    • Header Alignment — Choose how the Instagram feed’s header is aligned within the widget.
12. Once you’ve finished configuring the widget, in the pink navigation bar at the top of the page, click on Publish.

13. Then, in the Embed section, click on Copy Code, and, if you already know how, paste that into the Embed section on your platform, and you’re good to go.
14. To view embedding instructions for your widget, click on Platforms in the menu on the left side of the page.

15. Next, in the Platforms section on the right, select the platform you want to view embedding instructions for. Or, use the Search bar at the top of the section to find it easily.

16. Then, follow the steps in the How to Embed Your Widget section to add it to your website.

That’s it! Your Instagram Feed widget will appear on your website with the design and settings you selected for it. See the screenshot below for an example of how it looks on a website.