How to add an Instagram feed to Hostinger Website Builder

First, check which Hostinger product your site uses

Hostinger offers both its own drag-and-drop website builder and WordPress hosting, and the steps are completely different:

If you edit your pages in Hostinger’s own editor and drag elements onto the page from a panel on the left, you are in the right place.

Two places for code in Hostinger Website Builder

Hostinger’s help center describes two ways to add custom code, and they put the code in different parts of the page:

The reason is how the widget works. The embed code from Social Feed by grip space is one script tag, and the widget draws the feed right where that tag sits. In the Embed code element, that is exactly where you dropped the element. In the Integrations field, Hostinger moves script tags to the end of the page, so the feed would appear after your footer content, on every page, with no way to move it. The Embed code element gives you control over the position.

Before you start: get your embed code

1. Sign up for Social Feed by grip space with your email address. The Free plan needs no credit card and includes one widget.
2. In the dashboard, click “+ Connect Instagram account” and connect an Instagram professional account (Business or Creator). A personal account can be switched to a professional one for free in the Instagram app; here is how.
3. Open “Settings & preview”. Choose a grid or a slider, set the number of posts and columns while watching the preview, and save.
4. Under “Add the embed code to your website”, click “Copy”. The code looks like this:

<script type="text/javascript" src="https://n246.grip.space/api/v1/instagram/widget/xxxxxxxx"></script>

You only paste this code once. Later design changes (columns, filters, colors, the Follow button) are made in the Social Feed dashboard and show up on your Hostinger site without touching the code again.

Step by step: add the Embed code element

1. Open your website in the Hostinger builder and go to the page where the feed should appear, for example the home page or a new “Gallery” page.
2. Open the Add elements panel on the left side of the builder.
3. Drag the Embed code element to the spot where the feed should go. A section of its own works best, for example a new section between your main content and the footer, with a heading such as “Follow us on Instagram” added as a normal text element above it.
4. Click the element to see its options. Hostinger lists them as enter code, duplicate, change visibility, delete and resize.
5. Click Enter code, paste the embed code, and click Embed code.
6. Make the element large enough for the feed. Drag its resize handles so it spans the width you want and is tall enough for all the rows. (More on sizing in the next section.)
7. Update your website so the change goes live. Hostinger’s help says you need to update the site for custom code changes to be reflected online.
8. Open the live site in a new tab and check the feed.

Sizing the element for the feed

In Hostinger Website Builder you place elements as boxes and size them by hand with resize handles. Hostinger’s help does not explain how the Embed code element handles content that is larger or smaller than the box you draw, so the reliable approach is to size it and then check the live page.

1. Width: stretch the element across the width you want the feed to use. The widget fills the width it gets, up to the maximum width you set in the dashboard (0 to 2,000 pixels).
2. Height: the feed’s height depends on its layout. In a grid, tiles are square, so the feed is roughly as tall as one tile times the number of rows, plus spacing, plus the account header if you show it. A slider is one row high.
3. Check the live page: if the bottom of the feed is cut off or the Follow button is missing, make the element taller. If there is a large empty gap below the feed, make it shorter.

Tip: pick a layout that has a predictable height. A grid with a fixed number of rows is easy to size: for example, 4 columns and 8 posts is always two rows on a wide screen. A slider is even easier, because it stays one row high however many posts it holds. If you want to show many posts, a slider avoids a very tall element, and it needs the same height on desktop and on phones. Read grid or slider for help choosing.

Making it work on mobile

Hostinger’s builder has a separate mobile view, and this is where most layout problems with embedded widgets show up. A few facts from Hostinger’s help center are worth knowing:

1. You switch between the views with the mobile and desktop icons in the upper toolbar.
2. “To resize elements, enter the mobile view and use the resizing handles on the element borders.” So the Embed code element can have a different size on mobile.
3. The mobile version shows elements “in the order they’ve been added to the desktop version,” and reordering on desktop later does not carry over to mobile. Check that the feed sits in a sensible place on mobile, especially if you added it after building the page.
4. Hostinger recommends against moving elements from one section to another in mobile view, because it affects both the mobile and desktop versions.

Why the feed often needs more height on phones. The widget measures the width it gets and uses fewer columns when each image would get smaller than about 100 pixels. On a phone, a 4-column grid may drop to 3 columns, which means more rows and a taller feed. After setting up the desktop layout, switch to the mobile view, make the Embed code element taller, update the site, and check the live page on a phone.

Different feeds for desktop and mobile. Hostinger’s suggestion for showing different content on each device is to duplicate an element or section and make one copy visible on desktop and the other on mobile, using the eye icon. You can use this with two widgets: for example, a 4-column grid for desktop and a slider for mobile, each in its own Embed code element. Each widget has its own embed code. The Free plan includes one widget, Light three and Standard an unlimited number; see pricing.

Where to put the feed on a Hostinger site

Every page that shows the feed counts toward your widget’s monthly views, so a feed on your busiest pages uses views faster. For more placement ideas, see where to put an Instagram feed on your website.

Designing the feed to match your site

Everything about the feed’s look is set in the Social Feed dashboard, not in Hostinger:

1. Layout: grid or slider, number of columns and number of posts.
2. Spacing: the gap between images. Match it to the spacing in your Hostinger template, for example a few pixels for a tight gallery look.
3. Maximum width: 0 to 2,000 pixels. On wide sections, a maximum around 1,000 to 1,200 pixels keeps tiles from getting huge.
4. Account header: profile picture, name, post count and a Follow button, with a custom label, color and margin. See adding a Follow button.
5. Font size: sets the size of the header text so it can sit comfortably next to your template’s text.
6. Hover: show an Instagram icon when visitors point at a post, or nothing.

When you change these settings, keep the Embed code element’s size in mind. Adding rows, turning on the header or switching from a slider to a grid changes the feed’s height, so check the live page afterwards and resize the element on desktop and mobile if needed. More design tips are in matching the feed to your site’s design.

Click behavior and filters

When a visitor clicks a post, the widget can open it in a lightbox, open the post on Instagram, or do nothing. The lightbox can show the caption and the like count; videos play in it, starting muted with player controls; for carousel posts you can show only the first image or all of them.

After publishing, click a post on the live site to check the lightbox. It should open over the page. If it instead appears squeezed inside the area of the Embed code element, choose “open Instagram” as the click action, so visitors go straight to the post on Instagram. See lightbox or link for the pros and cons.

Filters decide which posts appear: all posts, no Reels, or Reels only; carousel posts shown or hidden; videos included or not; posts from any time or the last 30, 90 or 365 days; and caption keywords to show only, or exclude, posts containing certain words. A shop could, for example, show only posts whose captions mention a product line. See filtering by keyword.

Does my Hostinger plan support the Embed code element?

Hostinger’s help articles on embedding custom code and on integrations describe the Embed code element and the Custom code field without mentioning any plan restriction. The feature lists on Hostinger’s website builder pricing page do not mention custom code either way. So we cannot confirm from Hostinger’s documentation whether every plan includes it. If you do not see the Embed code element in your Add elements panel, check your plan or ask Hostinger support.

On the Social Feed side, every plan, including Free, gives you the same embed code and works with any site that can run a script tag.

Troubleshooting

1. The feed shows in the editor’s place as a blank box. That is normal. Custom code runs on the live site and in preview mode, not in the editor.
2. Nothing appears on the live site. First make sure you clicked Update after adding the code. Hostinger’s help suggests clearing your browser cache next. Then check that the widget is set to Published in the Social Feed dashboard; an unpublished widget shows nothing.
3. Is the code really on the page? Hostinger suggests inspecting the live page in your browser and searching for a word from your snippet. Search for instagram/widget. If it is not found, the code was not saved; open the element, click Enter code, and paste it again.
4. The feed is cut off at the bottom. The Embed code element is too short. Make it taller, on desktop and in the mobile view separately, then update the site.
5. Large empty space below the feed. The element is taller than the feed. Make it shorter, or add rows to the feed.
6. The feed looks fine on desktop but is cut off on phones. On narrow screens the grid uses fewer columns and gets taller. Resize the element in the mobile view, or use a slider for mobile (see “Different feeds for desktop and mobile”).
7. The feed appears at the very bottom of every page. The code was pasted into Integrations → Custom code. Remove it there and use the Embed code element instead.
8. The feed appears twice. The code is in both the Integrations field and an Embed code element, or in two elements visible on the same device. Remove one, or hide one with the eye icon.
9. Hostinger shows “Error: embed code is too large.” Hostinger says this usually happens when an image is pasted into the code as data:image text. Our embed code is a single short line, so you should not see this; if you do, check that only the script tag was pasted.
10. New Instagram posts are missing. On the Free plan, new posts appear on your site once a day; on paid plans, right away. Also check whether a filter is hiding them. More in why your feed isn’t updating.
11. The feed stopped showing after a busy period. If your views go over your plan’s monthly limit two months in a row, the feed pauses from the following month. The dashboard and our emails tell you when this is about to happen.

For a general checklist, see Instagram feed not showing on your website.

Plans at a glance

If you plan separate desktop and mobile feeds, remember that each is its own widget. Our guide to the free plan covers what you get before paying anything.

Frequently asked questions

Does Hostinger Website Builder have a built-in Instagram feed?
Hostinger’s help articles we checked describe the Embed code element as the way to add third-party widgets, and that is what this guide uses. Whatever social options your template includes, the Embed code element lets you show your actual Instagram posts in the layout you choose.

Do I need to update the code when I change the feed’s design?
No. Layout, columns, filters and colors are saved with the widget. Change them in the dashboard and your site shows the new design the next time a page loads. Only the element’s size may need adjusting in Hostinger.

Can I hide the feed for a while?
Yes. Switch the widget to Unpublished in the Social Feed dashboard. The code stays in your Embed code element but shows nothing until you switch it back. The element still takes up its space on the page, so for a longer break you can also hide the element or its section with Hostinger’s eye icon. See hiding a feed temporarily.

Does the widget set cookies?
The widget itself does not set cookies or use local storage. Images and videos load directly from Instagram’s servers.

Will it slow down my site?
The widget is one small script. In a grid, images below the first row load only when visitors scroll near them; a slider loads its images right away, so keep sliders reasonably short. More in does an Instagram feed slow down your website?

Can I show a hashtag or several accounts in one feed?
No. Social Feed by grip space shows the posts of one connected Instagram account per widget. For tools that list hashtag feeds, see our comparison of Instagram feed widgets.

Using another builder too? See our posts for GoDaddy, Weebly and Square Online, Duda and Carrd, and our guides for Wix, Squarespace, Webflow, Shopify and HTML. New to the service? Read what Social Feed by grip space is.

Sources

1. Hostinger Help, “How to embed custom code”: https://www.hostinger.com/support/6463152-website-builder-how-to-embed-a-custom-code
2. Hostinger Help, “How to add custom code and third-party integrations”: https://www.hostinger.com/support/7987118-hostinger-website-builder-how-to-achieve-more-advanced-solutions/
3. Hostinger Help, “How to integrate custom code”: https://www.hostinger.com/support/6445594-hostinger-website-builder-how-to-integrate-custom-code/
4. Hostinger Help, “How to add and customize website elements”: https://www.hostinger.com/support/6435894-website-builder-how-to-add-and-customize-website-elements
5. Hostinger Help, “How to edit the mobile version of a website”: https://www.hostinger.com/support/6475658-hostinger-website-builder-how-to-edit-the-mobile-version-of-a-website/
6. Hostinger Help, “How to hide elements and sections”: https://www.hostinger.com/support/6721428-hostinger-website-builder-how-to-hide-elements-and-sections/
7. Hostinger Website Builder plans: https://www.hostinger.com/website-builder