How to Embed Instagram Feed on WordPress
Do you want to display your Instagram photos and videos on your WordPress site? Instagram is a great way to connect with your audience, showcase your products, and grow your brand. By embedding your Instagram feed on your website, you can attract more followers, boost user engagement, and enhance your site’s design. In this article, we will guide you through the steps of embedding an Instagram feed to WordPress using a simple code.
You can track real-time impressions and clicks data in the Idukki dashboard.
1. A collection in Idukki to publish
2. A WordPress website
Leverage Idukki's easy-to-setup collection of feed from different sources and curate the widget to match your website.
Create a collection by adding feed from different sources, such as Instagram, YouTube, X (formerly Twitter), Threads, and more. Here, we will focus on Instagram feed. Click here to learn how.
After adding the posts, you can edit your collection, i.e., pin posts, show/hide posts, use profanity filter, tag products. Click here to learn how.
After your widget is ready, you can click Publish and select Curate my feed from the prompt window to curate your collection and fine-tune every small detail to match your brand. Click here to learn.
You can add custom CSS to design your widget based on your plan.
Click Publish and in the dialog click the Copy Code icon to copy the HTML code. You will need it later.
Once you have a collection ready in Idukki, you can embed it on your WordPress website with a simple code.
Log into your WordPress admin panel.
Create a new post or page from the left sidebar. Or if you have already created one, open it for editing.
In the WordPress Visual Editor, click the plus icon and select Custom HTML under Formatting. This will create a block where you can paste the HTML code you copied in Idukki.
Alternatively, you can switch to the Code Editor mode by clicking the three dots menu on the top right side corner, then selecting Code Editor. This will allow you to view and edit the underlying HTML code of your entire post or page.
Paste your HTML code in the Custom HTML block or the Code Editor, depending on which method you chose. You can preview how your code will look like by clicking the Preview button on the top right corner.
If you are satisfied with your code, click Publish or Update to save your changes and make your post or page live.
I hope this helps.
You can track real-time impressions and clicks data in the Idukki dashboard.
Prerequisites
1. A collection in Idukki to publish
2. A WordPress website
Adding & Curating Feed
Leverage Idukki's easy-to-setup collection of feed from different sources and curate the widget to match your website.
Create a collection by adding feed from different sources, such as Instagram, YouTube, X (formerly Twitter), Threads, and more. Here, we will focus on Instagram feed. Click here to learn how.
After adding the posts, you can edit your collection, i.e., pin posts, show/hide posts, use profanity filter, tag products. Click here to learn how.
After your widget is ready, you can click Publish and select Curate my feed from the prompt window to curate your collection and fine-tune every small detail to match your brand. Click here to learn.
You can add custom CSS to design your widget based on your plan.
Click Publish and in the dialog click the Copy Code icon to copy the HTML code. You will need it later.
Launching the WordPress Admin Panel
Once you have a collection ready in Idukki, you can embed it on your WordPress website with a simple code.
Log into your WordPress admin panel.
Create a new post or page from the left sidebar. Or if you have already created one, open it for editing.
In the WordPress Visual Editor, click the plus icon and select Custom HTML under Formatting. This will create a block where you can paste the HTML code you copied in Idukki.
Alternatively, you can switch to the Code Editor mode by clicking the three dots menu on the top right side corner, then selecting Code Editor. This will allow you to view and edit the underlying HTML code of your entire post or page.
Paste your HTML code in the Custom HTML block or the Code Editor, depending on which method you chose. You can preview how your code will look like by clicking the Preview button on the top right corner.
If you are satisfied with your code, click Publish or Update to save your changes and make your post or page live.
I hope this helps.
Updated on: 15/08/2023
Thank you!