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

To embed specific Instagram posts onto your website, the Instagram account it belongs to must be set to public. To set an account to public, navigate to that Instagram Profile and click More > Settings > Who can see your content. Then switch the toggle to make the account public.

WL - Embedding Instagram posts and feeds - 1.png

Step 1 - Get the embed code of the Instagram image

Navigate to the Instagram post you want to embed onto your website and click it to enlarge the image. 

1. Click the ellipsis icon (...) in the top right corner of the post.

WL - Embedding Instagram posts and feeds - 2.png

2. Select Embed from the list of actions.

WL - Embedding Instagram posts and feeds - 3.png

3. In the next window, click the blue Copy embed code button to copy this text to your computer's clipboard.

WL - Embedding Instagram posts and feeds - 4.png

 Step 2 - Add the embed code to your page

  1. Go to the Sitebuilder and click the Add a block (+) Plus button and in the Blocks library, click the HTML Embed block and choose the <HTML> layout.

    WL - Embedding Instagram posts and feeds - 5.png
  2. Hover over the block to activate the control pane, and then click the Custom HTML icon.

    WL - Embedding Instagram posts and feeds - 6.png
  3. 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.

WL - Embedding Instagram posts and feeds - 7.png Click Submit

The results will not be visible at this stage, you need to publish your site for your code to be executed. If you want to check how the code works before publishing, use the Preview button on the Topbar. 

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.

WL - Embedding Instagram posts and feeds - 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.

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