Show Instagram Feed in List View

How to Embed Your Instagram Feed On Your Website

If you use social media platforms such as Instagram, Facebook, Twitter, and Pinterest, you may already know they go a long way in helping you connect with your customers in a direct and personal way.

But clients and customers might not be well acquainted with your social presence. Therefore, the smart way to build a massive online following is to embed Instagram feeds and other social media profiles to your website. In this article, we will explore how you can embed your Instagram feeds directly into your website.

If you want to add your Instagram feed in a sidebar, your home page, your footer, or a blog post (like this), then keep on reading!

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin sign up today.

What types of Instagram feeds can you embed?

Instagram offers a lot of different types of posts. It's important to take a step back and think about what you want to aggregate. Do you just want to embed your Instagram feed? Or do you want to embed photos and videos that other users post about your business?

You can embed all of these types of content:

• Hashtag Posts - Embed feed posts from a specific hashtag, such as your wedding's hashtag or the hashtag you use for user-generated content.
• Hashtag Reels - Embed Reels that are tagged with a specific hashtag. This is great for brand challenges, especially dance ones.
• Personal Account Posts - Embed all of your Instagram feed posts from a personal account.
• Business Account Posts - Embed all of your Instagram feed posts from a business account.
• Business Account Reels - Embed all of your Instagram Reels from a business account.
• Business Account Stories - Embed all of your Instagram Stories from a business account.
• Mentioned Business - Embed feed posts from whenever your business account is mentioned in a caption.
• Tagged Business / Collab Posts - Embed feed posts from whenever your business account is tagged. This is a popular option for featuring content from your paid influencer campaigns on your website.

Embedded feed examples

Here's an example of an embedded feed using Curator's free plan. You'll see the "Powered by Curator" link at the bottom. Compared to our competitors, we have the least noticeable branding on the free plan, and that link can be removed on any paid plan.

And here's another example—this time using a paid plan to remove the "Powered By" link. This is a great example of embedding an Instagram feed in order to display user generated content and encourage more customers to post their photos.

How to embed your Instagram feed for free

Embedding your Instagram feed is different than embedding an individual post. You need to connect your Instagram account to an aggregator, choose your feed layout, and then copy and paste the HTML code where you want the feed to appear in your website.

A social media aggregator is an easy-to-use app that pulls in your social media content and gives you the tools you need to organize and stylize that content. Then, you simply paste the HTML code in the footer of your website, your home page, or wherever you want your Instagram feed to appear.

Here's how to embed your Instagram feed for free:

1. Sign up for a social media aggregator with a free plan
2. Create a new feed and choose whether or not posts should be automatically approved
3. Connect your Instagram account and choose the type of posts
4. Curate your feed (approve and remove posts)
5. Design your feed
6. Copy the HTML code into your site
7. Check out how the feed looks in your website and make any adjustments
8. Continue to moderate the Instagram content on your website

Let's review these steps in more detail.

Step 1: Sign up for a social media aggregator with a free plan

The first step is to sign up for a social media aggregator that offers a free plan.

This is important because...

• If your website budget is low, you can stay on the free plan and keep the "Powered By" link beneath your Instagram feed.
• If you can afford $25 or more, you can remove the "Powered By" link beneath your Instagram feed, but still have a chance to try the platform's features before you sign up for a paid plan.

Step 2. Create a new feed and choose whether or not posts should be automatically approved

Now it's time to create a feed and give it a name.

You can give it a simple name like "Instagram Feed" or "My Instagram Posts" or "Instagram Posts from Branded Hashtag."

You also need to choose the default post status.

Do you want everything to be automatically approved to show up on your site? Or do you want to have to greenlight each image?

In the settings of your feed, you have two options:

1. Approved - All Instagram posts from the source you chose in Step 2 will be added to your site unless you delete them.
2. Needs approval - No Instagram posts from the source you chose in Step 2 will show up unless you approve them.

Step 3: Connect your Instagram account and choose the type of posts

When you add an Instagram feed to your website, you have a lot of options for the type of content you want to aggregate.

This is because Instagram has the highest amount of post types of any social media platform.

With Curator, you can aggregate all of these different types of content:

• Hashtag Posts
• Hashtag Reels
• Personal Account Posts
• Business Account Posts
• Business Account Reels
• Business Account Stories
• Mentioned Business
• Tagged Business / Collab Posts

(You can even add social media content from other platforms, but we'll save that for another post!)

You can choose to curate an Instagram feed made up of your Instagram business account, or a few different hashtags.

For this tutorial, we'll go with an Instagram business account. You just sync in via Facebook and select the associated Instagram business account you want to use.

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin sign up today.

Step 4: Curate your feed (approve and remove posts)

Next up, it's time to curate your feed. You can remove the images that you don't want showing up in the feed you'll embed on your website. You can also update the settings for automatic curation if you want to change them.

If you choose automatic approval, then you need to delete the posts that you don't want to show up. If you choose that approval is required, then you need to approve the posts you do want to show up. If you're set to "Needs approval" and you don't give some posts a green checkmark, then no posts will be able to be added to your website.

Step 5: Design your feed

The next step is to update the design of your feed.

You can choose from our pre-set designs that include different ways of portraying the captions. Some designs let you hover over the image to see the captions, while others put the caption below or next to the image.

If you want, you can even upload your own custom posts to your feed. Yup, these are images that you didn't upload on Instagram. You might want to do this if you're promoting a product or a freebie offer.

Step 6: Copy the HTML code into your site

Finally, it's time to embed the HTML code into your website. Just hit "Get code" and then "Copy to clipboard."

Then you can paste it wherever you want: a section of your home page, a blog post, a landing page, or even the sidebar of your blog post.

Let's go ahead and add it to the sidebar.

To do embed the Instagram feed HTML code into Wordpress (for free!), we just need to drag and drop a Custom HTML widget over.

Next we paste the HTML code from Curator.io over to the Custom HTML content box. There's no need to add a title, unless you want to. You could write something like, "The latest Instagram posts" or anything creative you can think of.

Step 7. Check out how the feed looks in your website and make any adjustments

And it's done! Here's what the feed looks like in the sidebar of a blog.

This style puts the caption right below the image and it moves through the posts in an automated slider. It's a very engaging and eye-catching addition to your blog!

But of course, if you prefer a simpler look, you can create a grid style where the captions don't show unless you hover over them, like this example feed:

Step 8. Continue to moderate the Instagram content on your website

You'll want to continue checking your website to make sure that only the best content is showing up.

Moderate your website based on the approval setting you choose

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin sign up today.

The 3 main options for embedding Instagram content in your site

While the above is the simplest and easiest way to embed Instagram feeds on your website, there are other ways to do this too.

Maybe you want to embed individual posts, or try other methods for feed embeds, or write your own custom code to create a feed.

Method 1: Adding individual posts

Pros:

Cons:

You may want to embed individual posts to your website. While this is easy to do, it can be cumbersome in the long run, because you have to keep on embedding to particular posts. In other words, if you would like this embed to display the most recent post, then you'd need to move back and edit your embed whenever you create a new Instagram post. For most people, who post on a daily basis, this would be a lot of trouble for not much value.

Embedding an individual post is easy. Simply navigate underneath the post, and you will notice a […] button. Proceed to click this button, and you will see several options, including embed. Tap embed.

Copy the code that will appear. Next, paste it in your WordPress blog post, and it will automatically convert into an embed. You are done! The process is that simple. You may also add extra parameters such as specifying the width of the post, hiding the captions of the post and display just the image with Instagram's frame trappings.

Method 2: Social media aggregators

Instagram does not offer a single box plugin to help you display content from your account. Therefore, to embed your Instagram feeds or entire Instagram profile, you will need to use third-party plugins.

Instagram feed plugins work by allowing you to enter your Instagram account ID and then displaying a gallery of your recent posts. This includes your latest photos, a page, and the sidebar area of your website.

Example: Curator.io

Curator.io is one of the most popular Instagram feed embed tools. Most people like it because it covers several social networks all at once. Curator.io works with Twitter, Facebook, Instagram, YouTube, Hashtag feeds, and more.

You don't have to do numerous feeds either. Curator.io will let you aggregate all of the different sources into a single embedded feed. In other words, you do not need to have your RSS feeds, Twitter, Facebook, Instagram feeds, and others in different locations and format. You use a single central feed instead.

Using a single feed is more convenient for you and your site visitors. Otherwise, you're looking at a cluttered site that's not pleasant for anyone.

Curator.io offers free versions as well as paid versions. Using the free version, you can still access content from various social media platforms all at once and even filter by hashtag. However, the advantage of the paid version is that get more customization options, refined filtering and many other features you will find useful.

You can start with the free version and once you see the benefits, you'll likely want to upgrade for even more engagement with your Instagram feed and other social feeds.

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin sign up today.

Example: SnapWidget

SnipWidget isn't just a single widget, but a variety of widgets you may consider to embed posts in several ways. Some of its unique features include:

1. A simple grid widget that helps display image thumbnails, which as users hover over them, you will see likes as well as replies to the particular post in question. This is fun and interactive.
2. The second feature that may interest you is the scrolling widget. This feature helps showcase a few selected posts in a line. The posts scroll at your specified rate and only stop if a user hovers over a post, so that they can tap to visit the source. Think of it as a slider on your site's homepage, but with social media posts.
3. The map widget displays geotagged posts on a Google map. And this can come in handy if you travel a lot, and you would want to showcase several posts from the bucket list trips you have been to all at once. Just like Curator.io, it offers a free version, but you can go for a premium version to access custom CSS, more marketing options and built-in analytics.

As you can see, there are several options and features to choose from.

Example: EmbedSocial

EmbedSocial is also a series of plugins. Perhaps you may have come across some of them, such as EmbedStories, EmbedFeed, EmbedAlbum and EmbedReviews. With the free version, you can access, aggregate and create up to ten Instagram albums or Facebook albums. However, if you are looking to increase the number of data sources or turn your gallery into a shop, then you may consider a premium version.

Example: Tagembed

With Tagembed, you can add content from Instagram, Twitter, Facebook, Slack, and other channels. You can also embed not only content from profiles but also from hashtags. This is great if you have a branded hashtag for user generated content or if you have a wedding hashtag. With Curator, you can also embed content from hashtags, not just profiles.

Method 3: Custom code

If you are tech savvy and you can code, you may also consider writing a plugin code yourself. You will need to apply for a token for authentication allowing you to access the Insta API (and this where things get tricky for most programmers). You can always add your embed code to your website even if it was built with a website builder. For non-tech savvy users, it should still be easy to know how to build your own website using the platform.

To begin with, following several privacy breaches, Instagram is in the process of changing their API. There is an accelerated plan to drop their API in favor of Facebook Graph API. The potential outcome you should expect from this move is getting rid of ID which enabled you to aggregate photos from other users.

One issue with creating your own plugin is you'll also be required to update it yourself as Instagram makes changes. With every change, your Instagram feed will become unavailable until you're able to update the code. Doing this and applying again could take days or weeks, which leaves site visitors thinking your site is incomplete.

If you don't want to do it yourself, you can hire someone to create an Instagram embed plugin for you. This works well for custom websites or when you need a highly customized look and feel for your embedded Instagram feed. If you choose custom software development, it will help meet your concerns and key needs.

How to embed your Instagram feed on a WordPress website

Curator is an excellent WordPress Instagram widget.

When embedding your Instagram content in your WordPress site, the steps are mostly the same as outlined above. The only main difference is that when it comes to actually installing the feed you have two options: 1) copy the HTML code or 2) use Curator's WordPress plugin so that you can copy and paste short code instead.

Below, we'll review these steps in more detail.

Step 1. Choose a social media aggregator tool

The first step is to choose a social media aggregator. Depending on your needs, the platform should be free or affordable. You need a social media aggregator so that you can embed your entire feed instead of copying and pasting code for every post.

Step 2. Create a new feed and set the approval style

Next, create your first feed, give it a name and choose your approval style. We recommend choosing "Approved" if it's your content and "Needs approval" if you're aggregating content from event attendees, customers, or influencers. This way, you can approve everything and there won't be any surprises showing up on your website.

Step 3. Select the type of Instagram content you want to aggregate

Next, choose Instagram as your feed source and choose the type of Instagram posts. For most WordPress websites, people choose their Instagram Business Account and aggregate all of the content from their profile.

Step 4. Approve or remove posts

The next step will be to approve or deny posts, based on your approval setting. If you're manually approving, make sure to approve what you want showing up. If you're allowing your content to be automatically approved, then simply delete anything you want to remove from your WordPress website.

Step 5. Customize the look of your Instagram feed

Now it's time to stylize your Instagram WordPress feed.

Choose the theme you'd like.

There are several different themes that work great with WordPress websites:

• Waterfall
• Grid
• Grid Carousel
• Carousel
• Panel
• List
• Mosaic
• Tetric
• Select
• Stack
• Cover Flow
• Stagger
• Layers

Most people like to keep their Instagram feeds clean and simple and let the posts shine all on their own. However, you can add borders and backgrounds, and change the font color of the text and icons.

For professional WordPress developers, a custom CSS section is available so you can add your own code.

Step 6. Embed the feed in your WordPress website

Now, you need to add the feed to your WordPress website.

No plugin option:

Just click "Publish Feed" and copy the HTML code into the clipboard. Paste it where you want the feed to go, such as in your footer or sidebar. With WordPress, all you have to do is add a custom HTML widget to your website and then copy the code into the box.

With plugin option:

Download the Curator plugin and upload it to your website. Or go to the plugins section of your WordPress website, search Curator, and hit Install. Make sure to activate the plugin.

Then, you can copy short code and paste it where you want it to go instead of having to copy the long HTML code.

Step 7. Review how the feed looks in your WordPress website

After you embed the feed in your WordPress website, go ahead and check how it looks. If needed, go back to the Style section of Curator and make changes to your feed. If you're not using the WordPress plugin, you'll need to copy and paste the HTML code again. If you are using the plugin, you won't need to do that step again.

Step 8. Occassionally approve or remove new Instagram posts

Make sure to login to Curator occasionally to either delete or approve new posts. Depending on how often you post on Instagram, you might want to do this weekly or monthly

How to embed your Instagram feed on a SquareSpace website

To embed an Instagram feed on a SquareSpace website, the only step that is different than what described above is Step 6.

You'll need to add a block to your SquareSpace website for custom HTML code. Then simply paste the feed embed code into that block.

Here's a tutorial on how to add the custom HTML block:

How to embed your Instagram feed on a Wix website

Follow the WordPress instructions above.

Then, for Step 6, follow these instructions:

• Go to the Settings area of your Wix website.
• Go to the Advanced section.
• Click +Custom Code in the top right.
• Paste your Instagram feed code from Curator into the text box.
• Give this code a name, for example, "My Instagram Feed."
• Now select, Add Code to Pages. Click All Pages or choose specific pages.
• Choose where you want the feed to appear: Head; Body - start; Body - end.
• Click Apply.

How to embed your Instagram feed on a Shopify website

Follow all of the instructions for the WordPress website feed above. The only step that is different is Step 6.

For Step 6, follow these instructions:

Shopify is an ecommerce platform, and ecommerce companies typically like to add their Instagram feeds to the footer of their websites.

To add your feed to the footer, use these steps:

• Navigate to Online store > Themes > Actions > Edit Code > Sections > Footer.liquid.
• Add the HTML code into the footer

If you want to create a different feed for each of your products, then simply add each feed's HTML code to the correct product page. This way, customers can see UGC images of that exact product when deciding to purchase it.

How to Add Instagram Posts from a Hashtag to Your Website

Most website owners and developers want to add their own Instagram feed to their website. But what if you want to add posts from other Instagram users?

Maybe you want to add posts from your customers to your website.

To do this, simply choose Instagram Hashtags when selecting the type of content. This will pull in all posts tagged with that hashtag.

Make sure to use manual approval and approve everything individually so you don't get the wrong types of images showing up on your website!

Benefits of Adding Instagram Feeds

The options for embedding Instagram feeds above do vary in difficulty. However, choosing the right one or even the right combination is beneficial for your brand and can strengthen your brand identity. Becoming an authority in your niche is crucial for gaining more organic traffic.

Embedded Instagram feeds showcase your expertise on your website. For people who may not be on Instagram, this offers additional exposure to your expertise. Think of it as additional site content. Giving your visitors more is always a great idea.

Plus, you're increasing the visibility of your Instagram posts. While Instagram's daily active user base is substantial, it's still not as huge as its parent company, Facebook, which has over a billion daily active users.

Some of the biggest benefits of embedded Instagram feeds include:

• Creating a seamless experience between Instagram and your website.
• Bring user-generated content from Instagram straight to your site.
• Providing social-proof.
• Displaying your social media presence.
• Encourage more conversation.
• Get involved in trends.
• Give your website a beautiful update.

Embedded Instagram feeds are only effective, though, if you stay active on the platform. Don't forget, you can also embed more than just your own personal feed. Use hashtags to also embed feeds mentioning your brand. Just make sure you monitor posts to avoid irrelevant posts. Display social proof is a proven way to increase sales and leads driven by your website. This can come in the form of reviews, user-generated content such as Instagram Feeds or product/ service awards.

Ready to start bringing your Instagram and website followers together?

Curator.io is an easy-to-customize aggregator that lets you pull from over a dozen sources. If you'd like to give Curator.io's free forever plan a spin sign up today.

kennedybobjection.blogspot.com

Source: https://curator.io/blog/how-to-embed-your-instagram-feed-on-your-website

Share this post