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.
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.
2. Select Embed from the list of actions.
3. In the next window, click the blue Copy embed code button to copy this text to your computer's clipboard.
Step 2 - Add the embed code to your page
-
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.
-
Hover over the block to activate the control pane, and then click the Custom HTML icon.
- 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.
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.
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.