Instagram in je website

Try the feed builder below. Every setting is applied to the sample feed immediately.

Customise the feed yourself.

The images below are sample content and do not come from a real Instagram account. All settings work like the options available in the Whgoon feed settings.

A dedicated layout for desktop, tablet and mobile
Changes are visible immediately
Test desktop, tablet and mobile

42 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Today

▣

59 4

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Yesterday

▣

76 5

Ut enim ad minim veniam, quis nostrud exercitation ullamco.

2 days ago

93 6

Duis aute irure dolor in reprehenderit in voluptate velit esse.

3 days ago

110 7

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

4 days ago

▣

127 8

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut.

5 days ago

144 9

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

6 days ago

▶

161 10

Quis autem vel eum iure reprehenderit qui in ea voluptate velit.

1 week ago

Feed settings

Change a setting and see the result immediately in the feed above. This demo does not save anything.

Realtime preview

General feed settings

Name Instagram source Desktop items Tablet items Mobile items Gap in px Feed padding in px Desktop columns Tablet columns Mobile columns Item border radius in px

Only show these hashtags Hashtags Separate hashtags with a comma or space. A post is shown when at least one hashtag matches. In this demo, try #whgoon or #inspiratie.

Layout

Desktop Tablet Mobile

Keep layouts the same

Give the same feed a completely different presentation on each screen. Go big on desktop and use a more compact layout on mobile. With ‘Keep layouts the same’, one change updates all three.

What should appear in the posts

Show captions Show date Show videos Show carousels

Filters and click action

Show Instagram icon Link items to Instagram

Caption must contain Caption must not contain

Appearance

Feed background #ffffff Feed border colour #dfe4e1 Feed border width in px Feed border radius in px Item background #ffffff Item border colour #dfe4e1 Text colour #414744 Date colour #929895 Caption background on image #ffffff Caption background opacity in % Caption margin in px Caption padding in px Caption background border radius in px Weergave afbeelding

For layouts that place text over the photo, Whgoon automatically chooses white or black text with sufficient contrast.

Show a 1 px border around items

Post engagement

Likes and comments are the standard counters. Shares, saved posts, views and reach come from Instagram Insights. Meta does not provide these additional figures for every account and post type, so a missing value is hidden automatically.

Show likes Show comments Show shares Show saves Show views Show reach Background behind counters Center info

Counter position Icon colour #ffffff Counter colour #ffffff Counter background colour #242728

Previous and next buttons in grids

These settings apply to Single step row, Cover flow, Stack and the double step carousels.

Button background #aa3976 Icon colour #ffffff Hover achtergrond #aa3976 Hover pijlkleur #ffffff Hovereffect Button size 40 px Position No background / transparent

Previous and next buttons in items

Deze knoppen en navigatiedots staan in Instagram-items die uit meerdere afbeeldingen bestaan.

Gelijk aan Previous and next buttons in gridsAchtergrond, hoverkleuren, hovereffect, transparantie, icoonkleur, icoonset en formaat blijven gelijk. De dots stel je hieronder altijd apart in.

Button background #aa3976 Icon colour #ffffff Hover achtergrond #aa3976 Hover pijlkleur #ffffff Hovereffect Button size 40 px No background / transparent

Navigatiedots

Deze instellingen blijven onafhankelijk of de gridknoppen.

Initiële kleur #454747 Hoverkleur #d9d9d9 Actieve kleur #ffffff Kleur borderrand #ffffff Dikte borderrand in px Formaat dots 16 px

Advanced

Allowed domains Leave empty to allow the feed on every domain. The real feed checks this setting when it is published.

Custom CSS The CSS only applies within the preview in this demo.

Use these selectors in your custom CSS. Paired names work in both the demo and the published feed.

.wg, .demo-galleryThe complete feed.

.gridThe grid containing all posts.

.item, .demo-postOne post in the feed.

.image, .post-imageThe image container.

.image img, .post-image imgThe image itself.

.copy, .post-copyThe text block below or on top of the image.

.caption, .post-copy pThe post caption.

.date, .post-copy timeThe publication date.

.metrics, .post-metricsLikes and comments.

.metric, .post-metricOne likes or comments counter.

.wg-carousel-arrowPrevious and next button inside a post.

.wg-carousel-dotNavigation dot below a carousel.

.wg-layout-controlPrevious and next button for the layout.

.brandThe branding below the feed.

.emptyThe message shown when there are no posts.

.layout-[naam]The active layout, for example .layout-grid.

Small example

.demo-post {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.post-copy {
  font-size: 16px;
}

Create your own feed

Your visual style

Choose columns, gaps, colours, borders and rounded corners that match your website.

Always up to date

Whgoon retrieves new Instagram posts and automatically adds them to your published feed.

Quick to install

Copy the embed code or iframe code and paste it where you want to display the feed.

Make your Instagram content part of your website.

View the plans