Articles on: Integration

How to Embed Instagram Widget on Weebly

You can easily add an Instagram widget to your Weebly website with a custom HTML code. This will help you engage your audience and display your latest Instagram posts.

In this article, we will guide you through the steps of embedding an Instagram widget on Weebly using a custom HTML code and how to adjust your feed to fit your brand.

Before you start, make sure you have an Idukki collection and its HTML code ready. You also need a Weebly website where you want to add the widget.

Create & Customize Your Widget

With Idukki, you can easily create and customize a widget that displays feeds from various sources, such as Instagram, YouTube, X (formerly Twitter), Threads, and more.

First, create a collection of feeds from different sources. In this example, we’ll focus on Instagram feeds. You can learn how to do that here.

Add different sources to create a diverse widget.

Add Collection

Next, edit your collection to pin posts, show or hide posts, use a profanity filter, and tag products. You can learn how to do that here.

Edit Collection

Click Publish at the top-right and choose Curate my Feed from the pop-up. Then, curate your collection and fine-tune every detail to match your brand. You can learn how to do that here.

Use a consistent design throughout your widget.

Finally, click “Publish” and then “Copy Code” to view and copy the HTML code. You’ll need this code later to add your widget to your website.

Curate and Publish

Embed into Weebly

Log in to your Weebly account and open the site editor.

Navigate to the page where you want to add the widget.

Click +Add > Section and choose the Embed code section.

In the editing panel, click Embed code and paste your code in the text box.

Preview the changes and then click Publish to make them live.

Add Embed Code Section

Customizing the embed code section

You can also customize the embed code section using the site editor in Weebly. To do this, follow these steps:

Click on the section in the editing panel.

In the Embed code section settings section, you can customize the following options:

Customize the layout and color.
Set alignment and pick a color style
Add a background
Add section title and description

Customize Section

Click Done to save your changes.

I hope this helps.

Updated on: 15/08/2023

Was this article helpful?

Share your feedback


Thank you!