How to Embed Instagram Photos on Website

What is Embed on Instagram?

You can embed an Instagram feed on any section of your website. Many businesses opt to feature it on their homepage, but it can also be placed on product pages, the About Us section, or even on a page specifically dedicated to social media content.

How Does Instagram Embedding Work?

Embedding an Instagram photo on your website is a great way to share visual content with your audience. The process is quick and easy. Here’s a step-by-step guide to help you do it:

1. Select the Instagram Photo. Find the photo on Instagram that you want to showcase on your website.
2. Access the Embed Option. Click on the three dots (…) in the top right corner of the photo post. From the dropdown menu, choose “Embed”.
3. Copy the Embed Code. A box will pop up with an embed code. Click “Copy Embed Code” to save it to your clipboard.
4. Paste the Code on Your Website. Go to the HTML section of your website where you want the photo to appear. Paste the embed code directly into the HTML.
5. Save and Preview: Save your changes and preview your webpage to ensure the Instagram photo appears correctly.

By following these simple steps, the Instagram photo will be displayed on your website, engaging your visitors with fresh and relevant content.

Methods to Embed Instagram Photos on Your Website

There are two primary methods to achieve this: using Instagram’s native Embed function or through the use of a widget. 

1. Using a widget. This method employs third-party widgets or plugins to embed Instagram content on your website. Widgets can enable the display of multiple posts and offer various customization options for how the content appears.
   
2. Using Instagram’s Native Embed Function. This method utilizes Instagram’s built-in feature to generate HTML code for embedding specific Instagram posts directly into your website. It allows for a straightforward integration of individual posts.

Each method has its own advantages and considerations. Below, we’ll compare these two methods and provide you with a structured approach to embedding Instagram photos on your website.

Comparison of methods to embed Instagram photos on any website

How to Create an Instagram Feed Widget

Here’s a guide to setting up your Instagram Feed widget. Follow these steps to make the process simple and efficient.

1. Select your content. In the left panel, locate the ‘Sources’ section and connect your public or business account with just one click. Once you log in, your profile and its posts will automatically replace the sample content we provide. Alternatively, you can add a set of hashtags and profiles to display their content in your custom feed!
2. Choose a layout. Continue working in the tabs on the left panel. The next one is called ‘Layout’. This is where you can start customizing. Select a layout that fits your needs and adjust how your content is displayed to website visitors. You can set any parameters for the optimal appearance of your posts.
3. Pick elements. In the ‘Post’ tab, you will find many options to influence the content. You can enable or disable likes, comments, texts, CTA buttons, and more. Additionally, you can configure on-click actions and popup styles.
4. Set your colors. After defining the elements of your posts in the Instagram Feed widget, it’s time to give them a unique touch. You can choose from our pre-designed color palettes or set custom colors for each element of the feed.
5. Select a language. In the ‘Settings’ tab, you will find a list of supported languages for the widget. Choose one to have the widget’s elements instantly displayed in that language.

Finished? Press ‘Add to website’ to generate the embed code for your site. This code contains all the details about your custom widget. Simply insert the code into the desired location on your webpage.

And you are free to create your first Instagram Feed in the widget editor!

In case you’re looking for a guide on how to embed Instagram Photos to any specific platform, you can find them in our guide.

How to Embed Instagram Photos

Before you start adding Instagram photos to your website, it’s important to get everything ready. Proper preparation will help ensure that your Instagram feed blends smoothly with your website’s design and functions as intended.

Steps to embed instagram photos:

1. Create or Update Your Instagram Account. Your Instagram account is where the photos you’ll embed will come from. Make sure your account is set to public because private accounts cannot generate embed codes.
2. Organize Your Instagram Feed. The photos you plan to embed should match the style and branding of your website. Think ahead about the posts you’ll share and try to keep a consistent look and feel.
3. Prepare Your Website. Decide where on your website you want to place the Instagram photos. Ensure these spots fit well with the overall design and provide a good experience for your visitors.
4. Familiarize Yourself with Instagram’s Policies. Instagram has rules about using its embed feature. Make sure to review these guidelines so you stay in compliance and avoid any issues.
5. Select Your Photo. Go to the Instagram photo you want to feature on your website. Ensure the photo complements your website’s theme and style.
6. Get the Embed Code. Click on the three dots in the top right corner of the Instagram post and choose ‘Embed’. This will create a code that you can use to display the photo on your website.
7. Copy the Embed Code. A box with the embed code will appear. Make sure to copy the entire code.
8. Insert the Code into Your Website. Go to the section of your website where you edit the HTML. Paste the embed code into the spot where you want the photo to appear. Save your changes and refresh your site to view the embedded photo.

And that’s it! The Instagram photo is now seamlessly integrated into your website.

Strategies to Maximize Your Instagram Widget Engagement

Using an Instagram widget on your website can be a game-changer for enhancing engagement, increasing credibility, and driving more traffic. Here are some effective strategies to leverage your Instagram widget to its fullest potential, supported by data and real-world examples.

Showcase User-Generated Content (UGC)

User-generated content (UGC) is one of the most trusted forms of content among consumers. Displaying UGC from your Instagram feed on your website can significantly boost your brand’s credibility and foster deeper engagement with your audience. According to a study, 79% of people say UGC highly impacts their purchasing decisions. Brands like Airbnb effectively use UGC on their website to create a sense of community and trust.

Highlight Your Products or Services

If your Instagram features your products or services, embedding these photos on your website can serve as an interactive product gallery. This not only showcases your offerings dynamically but also helps potential customers visualize the product in real-life scenarios. According to research, visual content increases people’s willingness to read a piece of content by 80%. An example is the fashion brand ASOS, which uses Instagram photos on its product pages to inspire shoppers.

Encourage More Instagram Followers

Embedding Instagram photos on your website acts as a teaser for the content you regularly share on your social media. This can entice website visitors to follow you on Instagram for more engaging content. Statistics show that 80% of Instagram users follow at least one business account. Many businesses, like Glossier, use this strategy to grow their follower base by integrating their Instagram feed with their website.

Promote Special Offers

Promoting discounts, special offers, or upcoming events through your Instagram and displaying these posts on your website can greatly increase visibility. It’s been found that 71% of consumers prefer personalized offers and are more likely to respond to marketing when they feel valued. Brands like Starbucks have effectively used this strategy to drive more traffic to their website and increase sales during promotional campaigns.

5. Integrate with Blog Posts:

If your blog posts relate to your Instagram content, embedding relevant Instagram photos can enhance your articles, making them more visually appealing and engaging. This not only improves the aesthetic of your blog but also strengthens the connection between your social media and website content. According to studies, articles with images get 94% more views than those without. Companies like GoPro frequently use Instagram images to enrich their blog content and keep readers engaged.

Examples of Embedded Instagram Feeds

Instagram Grid Template

This Instagram Feed widget is an exceptional example of a grid template in use, perfectly arranged to display a diverse collection of vibrant and engaging content. The grid format is ideal for showcasing events, artistic portfolios, or promotional material, as it allows for a visually appealing and organized presentation of multiple posts at once.

This layout is particularly beneficial for tattoo conventions or art exhibitions, where the richness of visual content can be highlighted in an easily navigable and immersive manner. Integrating this widget enhances user engagement by providing an at-a-glance overview of Instagram activity, encouraging visitors to explore more.

Instagram Carousel Template

This Instagram Feed widget is a prime example of the carousel template, effectively used to showcase a sequence of posts in a dynamic and engaging manner. The carousel format allows users to scroll through multiple images or posts seamlessly, making it an excellent choice for businesses like record stores or news outlets that regularly update their content.

This layout is particularly useful for highlighting recent updates, special promotions, or new arrivals, as it draws attention to the latest posts while keeping the content organized. By incorporating this widget, websites can enhance their visual appeal and encourage visitors to stay updated with the latest news and offers, directly integrating their Instagram activity into their site.

Instagram Slider Template

This Instagram Feed widget beautifully exemplifies the slider template, offering a clean and modern way to display selected posts in a horizontal scroll. The slider format is particularly effective for beauty brands or product-focused businesses, as it allows for a focused, detailed view of each image or video.

This setup is perfect for highlighting specific products, tutorials, or campaigns, giving each piece of content the spotlight it deserves while maintaining an elegant flow across the screen. By integrating this widget, brands can seamlessly showcase their Instagram content on their website, enhancing the user experience and driving more interaction with their social media presence.

FAQ