Embedding Instagram posts and feeds

A social media feed with authentic content created by your company and your fans increases the time spent on-site and improves conversion rates on your website. Here's how to embed Instagram content into your website.

To embed individual Instagram posts, you can use Instagram’s native features. This article will walk you through the process.

Before you begin

In order to embed specific Instagram posts onto a blog or website, the Instagram account it belongs to cannot be set to private. To set an account to public, navigate to that Instagram Profile and click Edit Profile > Privacy and Security.

Screen_Shot_2020-09-09_at_17.46.35.png

 

On this page, uncheck the Private Account option.

 

Step 1 - Get the embed code of the Instagram image

Navigate to the Instagram post you want to embed onto your website and click on it to enlarge the image. For this example, we'll embed an image from the @everpestrepellers account, as shown in the screenshots below.

1. Click the ellipsis "..." icon in the top-right corner of the post.

embed-instagram_2.png

2. Select Embed:

embed-instagram_3.png

 

3. Copy the embed code:

embed-instagram_4.png 

Click the blue Copy Embed Code button at the bottom to copy this text to your computer's clipboard.

 

Step 2 - Add the embed code to your page

  1. Go back to the Sitebuilder and navigate to the area on the page where you want to embed the code.
  2. Click on the +Add a block button and in the Block Library, click on the HTML Embed block.
    Screenshot_2021-06-02_at_21.14.43.png
    It will be added to the page.
  3. Click on the block to activate the control pane and then click the Custom HTML icon:

Screenshot_2021-06-02_at_21.16.34.png

Paste the code you have copied from Instagram into the Custom HTML field.

 

Step 3 - Add <center> tags

Once you have pasted this code into the Custom HTML field, you'll want to center-align the Instagram post so it doesn't automatically appear pushed up against the left or right side of your webpage. 

Wrap the code with <center> and </center> tags so the image displays in the center of your page:

embed-instagram_6.png

embed-instagram_7.png

Click Submit.

 

Step 4 - Publish the page

Once done, click Publish in the upper right corner of the Sitebuilder to make the changes live.

 Here’s what your page will look like:

embed-instagram_8.png

 

Embedding Instagram feed 

To display the entire Instagram feed, you will need to use a third-party application such as EmbedSocial or Flocker. Once the platform of your choice provides an embed code, you can add it to your page using the HTML block.

Other helpful pages

Adding social media icons

Sharing your website in social media

Sharing your products on social media

Creating a user review page

Was this article helpful?
0 out of 0 found this helpful