How to Embed Instagram Feed to WordPress

The article explains how to add an Instagram feed to WordPress without coding. We will see ways of embedding your custom feed, explore features and settings that you access with a user-friendly Instagram Feed widget.
Create Instagram Feed Widget
Share:
Share on Facebook
Share on X
Share on LinkedIn
Share on WhatsApp
Copy Link
How to Embed Instagram Feed to WordPress

Instagram feed is a handy and well-built free premium plugin for WordPress that allows you to integrate an interactive feed with content from this online media on your WordPress website. You are welcome to start forming your Instagram plugin right now through the use of our active demo. Simply follow the steps below and you’ll see your Instagram Feed:

  1. Start using our active demo and build your first Instagram plugin.
  2. Save your Instagram feed and copy the code from the popup window.
  3. Embed the code to your WordPress website’s HTML editor.

Try building your live Instagram feed right now through the use of our demo!

Detailed Guide: Embedding WordPress Instagram Feed

Let’s explore how to create an Instagram Feed plugin for your WordPress website, step by step. This guide will walk you through the features and settings available in the plugin, helping you build a perfect Instagram feed. Visual aids are provided to help you replicate each step on your WordPress website.

Select a language
  1. Select your content. Start by finding the ‘Sources’ section in the left panel of the plugin settings. Here, you can easily connect your personal or business Instagram account with just one click. Simply sign in, and your Instagram profile, along with its posts, will appear instead of the default sample content.
    Connect your account
    Alternatively, you can curate a custom feed by adding a set of hashtags and profiles to display their content directly on your WordPress website.
    Adding a set of hashtags
  2. Choose a layout. Continue customizing your Instagram feed by navigating to the ‘Layout’ tab in the left panel. This is where you can choose a layout that best suits your WordPress website’s design. Adjust various parameters to ensure your Instagram posts are displayed optimally for your visitors.
    Choose a layout
  3. Pick elements. In the ‘Post’ tab, you’ll find numerous options to refine your content. You can enable or disable features like likes, comments, text, CTA buttons, and more. Additionally, you can set on-click options and define popup patterns to enhance the user experience with the embedded Instagram feed on your WordPress website.
    Pick elements
  4. Set your colors. Once you’ve defined the elements for your Instagram posts, it’s time to give them a unique touch in the Instagram Feed plugin. Choose from pre-designed color palettes or customize your own colors for each element in the feed to match your WordPress website’s branding.
    Set your colors
  5. Select a language. In the ‘Settings’ tab, you’ll find a list of supported languages for the Instagram Feed plugin. Choose a language, and the widget’s elements will be instantly displayed in your selected language, ensuring a consistent experience for your WordPress website visitors.
    To display the Instagram feed on your WordPress website, simply insert this code into the desired location on your webpage. Detailed guidelines on embedding the Instagram Feed into WordPress are provided in the next section.
    Select a language

How to Add Instagram Feed Widget to Specific Page of Your WordPress Website

#1 via Pages

Explore the tutorials in our video concerning this popular method of embedding an Instagram feed into WordPress pages:

Or read the text manuals if that suits you better:

  1. Go to WordPress website’s backend. Log in to your WordPress website’s backend and click on Pages.
    Click on Pages
    Find the page you need to edit, click on the action button (…) and choose Edit:
    Choose Edit
  2. Add code element to the page. In the editor, find where you’d like to show the widget and click on Add Block.
    Add Block
    Then find and click Custom HTML:
    Click Custom HTML
  3. Paste the installation code. Paste your installation code in the popup window and click Update to save changes:
    Paste your installation code

#2 via Themes

  1. Go to WordPress website’s backend. Log in to your WordPress website’s backend, click on Appearance and choose Themes:
    Choose Themes
    Find the theme you need to edit, click on the action button (…) and choose Edit:
    Choose Edit
  2. Add code element to the page. Go to Pages tab and choose the page you want to add the widget to.
    Go to Pages tab

    Then click on the template on the right side:
    Then click on the template

    In the editor, find where you’d like to show the widget and click on Add Block:
    Click on Add Block

    Then find and click Custom HTML:
    Find and click Custom HTML
  3. Paste the installation code. Paste your installation code in the popup window and click Save to save changes:
    Paste the installation code

How to Add Your Instagram Feed to All Pages of WordPress website

#1 via Theme Editor

  1. Go to WordPress website’s backend. Log in to your WordPress website’s backend. Go to the Appearance tab in the left-hand menu and click Theme Editor:
    Click Theme Editor
  2. Add the installation code. Choose the footer.php file in the right-hand menu of Theme Files, insert the code before the closing Body tag and press the Update File button:
    Insert the code before the closing Body tag

#2 via Widgets

  1. Go to WordPress website’s backend. Log in to your WordPress website’s backend. Go to the Appearance tab in the left-hand menu and click Widgets:
    Click Widgets
  2. Choose the placement for the code. Open Custom HTML (1) in the Available Widgets list, choose one of the Footers in the drop-down menu, for example, Footer One (2) and click the Add Widget button (3):
    Click the Add Widget button
  3. Paste the installation code. Paste your installation code in the Content field and click Save to apply the changes:
    Paste the installation code

#3 via Customize

Paste the installation code
  1. Go to WordPress website’s backend. Log in to your WordPress website’s backend. Go to the Appearance tab in the left-hand menu and click Customize:
    click Customize
  2. Add Custom HTML element. Choose Widgets in the left-hand menu:
    Choose Widgets in the menu

    Click Add a Widget at the bottom of menu and select Custom HTML in the menu appeared:
    Select Custom HTML
  3. Paste the installation code. Paste your installation code to the Content field, click Done and press the Publish button to apply changes:
    Paste the installation code

Useful Features of Instagram Feed Widget

Filters to display relevant galleries

Customize your gallery to display only the posts that align with a specific page or product. With the Elfsight widget, you can apply multiple filters to curate the ideal content grid. For example, you can showcase posts exclusively from your offline events or highlight content on trending topics.

Filters to display relevant galleries

Call-to-actions for more engagement

Add CTA buttons to your posts to drive specific actions and boost engagement. Whether it’s linking directly to a product page under a promotional post or encouraging users to attend an event, these buttons can be tailored to fit your strategy and business objectives. Each post can feature its own distinct call-to-action.

Call-to-actions for more engagement

Unlimited branding opportunities

Elfsight offers extensive customization options to ensure your Instagram embed for WordPress reflects your brand’s identity. Whether you’re working with established brand colors or selecting a palette that suits your style and activities, our pre-designed color schemes and flexible settings allow you to create a gallery that’s uniquely yours.

Unlimited branding opportunities

Templates for Elfsight Instagram Feed Widget

The Elfsight Instagram Feed widget brings a range of fantastic features to your WordPress website. Here’s how you can customize your feed to stand out.

Discover a selection of beautiful, ready-made Instagram templates in the free demo. These templates can greatly enhance your website’s look. They are fully customizable and flexible, giving you the freedom to completely change the style of your Instagram gallery.

Instagram Carousel

The Carousel template from Elfsight provides an interactive and engaging way to embed your Instagram posts. Featuring a dynamic, circular format, this template transforms your Instagram feed into a lively carousel plugin, bringing a fun and engaging element to your WordPress website. By enabling users to scroll through the carousel, you encourage them to explore your Instagram content more thoroughly, which can lead to increased time spent on your WordPress pages and potentially higher conversion rates.

Instagram Carousel

Single Instagram Post Widget

The Single Instagram Post Widget offers a targeted and effective way to showcase a specific Instagram post on your WordPress website. It’s ideal for highlighting content that conveys an important message or theme of your website or for promoting special offers and announcements. The widget is designed in a way to help you seamlessly embed the Instagram feed on your WordPress, ensuring a smooth and cohesive user experience.

Single Instagram Post Widget

Instagram Grid

Elfsight’s Grid template provides a clean and organized way to showcase your Instagram posts. The elegant square format is ideal for arranging photos and videos in a tidy grid. This layout is both visually attractive and practical, featuring a ‘Load More’ button that encourages visitors to explore more of your content. The grid template automatically updates with new Instagram posts, ensuring your WordPress website always displays your most recent content.

Instagram Grid

Hashtag Feed

An Instagram Feed offers a live showcase of user-generated content that highlights your brand’s activity. This genuine content acts as social proof, encouraging potential customers to trust your brand and take action, whether it’s making a purchase or reaching out for more information. With its advanced customization options, the Elfsight Instagram Feed widget provides endless opportunities to enhance your WordPress website, making your Instagram content a standout and engaging feature.

Hashtag Feed

Discover these and many other ready-made designs in our outstanding Catalog of templates ⬇

Template Catalog

Explore 70+ Instagram Feed Templates

Check out more ready-made templates for any use case or build your own one!
Instagram Grid
Embed a customizable grid of the Instagram feed on your website to enhance your website's visual appeal and raise brand awareness.
Instagram Profile
Embed an Instagram feed with profile details to highlight the legitimacy of your brand.
Instagram Slider
Embed a sleek and fully functional slider to display your trendy Instagram feed.
Instagram Hashtag
Embed Instagram content feed sorted by a hashtag on your website to drive sales.
Instagram Post
Embed your favorite Instagram posts on your website for better brand engagement.
Embedding a wall of Instagram posts on your websites creates a dynamic social media hub for better engagement.
Instagram Carousel
Embed an eye-catching carousel format to enhance the visual display of your Instagram images and videos.
Small Instagram
Embed a small and minimalist Instagram feed on your website to keep it sleek and simple all at once.
No Suitable Template?
You can easily assemble the widget you need using our simple-to-use configurator.

Final Thoughts

Embedding an Instagram feed into your WordPress website is a strategic way to boost engagement and increase brand visibility. We’ve explored several methods to seamlessly incorporate this feature, emphasizing the simplicity and effectiveness of using the Elfsight Instagram Feed widget. This tool lets you effortlessly display dynamic, real-time content, making your website more engaging and interactive.

By following the best practices and tips we’ve discussed, you can ensure the Instagram Feed enhances the user experience, drives conversions with authentic content, and strengthens your social media integration. Whether your goal is to increase time spent on your website, boost conversions, or expand your follower base, the Elfsight Instagram Feed widget is a powerful WordPress solution to help you achieve these objectives.

FAQ


How to embed an Instagram feed to WordPress with Gutenberg?

  1. Launch the Gutenberg Editor for Instagram feed integration. Click on the Add button located in the upper-right corner to access the capabilities of the Gutenberg editor, setting the stage for customizing your page with the Instagram feed.
  2. Insert the Shortcode block. Start typing “short” in the search bar and choose the Shortcode block from the suggested options. This block will allow you to embed your Instagram feed.
  3. Embed the shortcode. Right-click in the Shortcode block and select the Paste option to insert your Instagram feed’s shortcode.
  4. Publish your changes. Click the Publish button in the upper-right corner, then click Publish once more to confirm your changes.
  5. View your page. Select the View Page option to see how your Instagram feed plugin appears on your website. Your Instagram feed is now successfully embedded and displayed on your WordPress website.


How to embed an Instagram feed to WordPress with Elementor?

  1. Launch the Elementor Editor for Instagram feed integration. Click on the Edit with Elementor button to access the capabilities of the Elementor editor, setting the stage for customizing your page with the Instagram feed.
  2. Insert the Instagram Feed widget. Utilize Elementor’s drag-and-drop feature to place the Instagram widget in your desired location within the page layout.
  3. Embed the code. Simply paste the Instagram feed’s installation code into the HTML Code box of the Elementor editor. After this step, click the Update button to save your changes and activate the Instagram feed on your page.