Instagram in je website

Probeer hieronder zelf de feedbouwer. Iedere instelling wordt direct verwerkt in de voorbeeldfeed.

Stel de feed zelf af.

De afbeeldingen hieronder zijn voorbeeldinhoud en niet afkomstig van een echt Instagram-account. Alle instellingen werken wel zoals de mogelijkheden binnen de Whgoon-feeds-instellingen aangeboden wordt.

Een eigen layout voor desktop, tablet en mobiel
Wijzigingen direct zichtbaar
Desktop, tablet en mobiel testen

42 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vandaag

▣

59 4

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

Gisteren

Afbeelding 1 van 3 in het carrouselbericht

Afbeelding 2 van 3 in het carrouselbericht

Afbeelding 3 van 3 in het carrouselbericht

▣

76 5

Ut enim ad minim veniam, quis nostrud exercitation ullamco.

2 dagen geleden

93 6

Duis aute irure dolor in reprehenderit in voluptate velit esse.

3 dagen geleden

110 7

Excepteur sint occaecat cupidatat non proident, sunt in culpa.

4 dagen geleden

▣

127 8

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut.

5 dagen geleden

144 9

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

6 dagen geleden

▶

161 10

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

1 week geleden

Feedinstellingen

Pas iets aan en bekijk het resultaat meteen in de feed hierboven. Deze demo slaat niets op.

Realtime preview

Algemene feedinstellingen

Naam Instagram-bron Aantal items desktop Aantal items tablet Aantal items mobiel Tussenruimte in px Padding feed in px Kolommen desktop Kolommen tablet Kolommen mobiel Border radius items in px

Alleen deze hashtags tonen Hashtags Scheid hashtags met een komma of spatie. Een bericht wordt getoond zodra minimaal één hashtag overeenkomt. Gebruik in deze demo bijvoorbeeld #whgoon of #inspiratie.

Layout

Desktop Tablet Mobiel

Houd layout gelijk

Kies per scherm een compleet andere presentatie van dezelfde feed. Zo kun je op desktop groots uitpakken en op mobiel een compactere layout gebruiken. Met ‘Houd layout gelijk’ pas je alle drie tegelijk aan.

Wat wil je in de posts laten zien

Captions tonen Datum tonen Video’s tonen Carrousels tonen

Filters en klikactie

Instagram-icoon tonen Items linken naar Instagram

Caption moet bevatten Caption mag niet bevatten

Vormgeving

Achtergrond feed #ffffff Randkleur feed #dfe4e1 Dikte rand feed in px Afronding feed in px Achtergrond items #ffffff Randkleur items #dfe4e1 Tekstkleur #414744 Datumkleur #929895 Achtergrond caption op afbeelding #ffffff Dekking captionachtergrond in % Marge caption in px Padding caption in px Border radius captionachtergrond in px Weergave afbeelding

Voor layouts die tekst over de foto tonen, kiest Whgoon automatisch witte of zwarte tekst met voldoende contrast.

Rand van 1 px rond items tonen

Interactie bij berichten

Likes en reacties zijn de vaste tellers. Shares, opgeslagen berichten, weergaven en bereik komen uit Instagram Insights. Meta levert die aanvullende cijfers niet voor ieder account en ieder berichttype; een ontbrekende waarde wordt daarom automatisch verborgen.

Likes tonen Reacties tonen Shares tonen Opgeslagen tonen Weergaven tonen Bereik tonen Achtergrond achter tellers Centreer info

Positie tellers Kleur iconen #ffffff Kleur aantallen #ffffff Achtergrondkleur tellers #242728

Vorige- en volgende-knoppen in grids

Deze instellingen gelden voor Enkele steprij, Bladeren, Stapelen en de dubbele stepcarrousels.

Achtergrond knoppen #aa3976 Kleur iconen #ffffff Hover achtergrond #aa3976 Hover pijlkleur #ffffff Hovereffect Formaat knoppen 40 px Positie Geen achtergrond / transparant

Vorige- en volgende-knoppen in items

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

Gelijk aan Vorige- en volgende-knoppen in gridsAchtergrond, hoverkleuren, hovereffect, transparantie, icoonkleur, icoonset en formaat blijven gelijk. De dots stel je hieronder altijd apart in.

Achtergrond knoppen #aa3976 Kleur iconen #ffffff Hover achtergrond #aa3976 Hover pijlkleur #ffffff Hovereffect Formaat knoppen 40 px Geen achtergrond / transparant

Navigatiedots

Deze instellingen blijven onafhankelijk van de gridknoppen.

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

Geavanceerd

Toegestane domeinen Leeg betekent: feed op alle domeinen toestaan. Deze instelling wordt in de echte feed bij het publiceren gecontroleerd.

Eigen CSS De CSS geldt in deze demo alleen binnen de preview.

Gebruik deze selectors in je eigen CSS. De dubbele namen werken in de demo én in de gepubliceerde feed.

.wg, .demo-galleryDe volledige feed.

.gridHet raster met alle berichten.

.item, .demo-postEén bericht in de feed.

.image, .post-imageDe afbeeldingscontainer.

.image img, .post-image imgDe afbeelding zelf.

.copy, .post-copyHet tekstblok onder of over de afbeelding.

.caption, .post-copy pDe caption van een bericht.

.date, .post-copy timeDe publicatiedatum.

.metrics, .post-metricsLikes en reacties.

.metric, .post-metricEén teller voor likes of reacties.

.wg-carousel-arrowVorige- en volgende-knop in een bericht.

.wg-carousel-dotNavigatiedot onder een carrousel.

.wg-layout-controlVorige- en volgende-knop van de layout.

.brandDe branding onder de feed.

.emptyDe melding wanneer er geen berichten zijn.

.layout-[naam]De actieve layout, bijvoorbeeld .layout-grid.

Klein voorbeeld

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

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

Maak je eigen feed

Jouw uitstraling

Kies kolommen, tussenruimte, kleuren, randen en afrondingen die aansluiten op je website.

Altijd actueel

Whgoon haalt nieuwe Instagram-berichten op en verwerkt ze automatisch in je gepubliceerde feed.

Snel geplaatst

Kopieer de embedcode of iframe-code en plak hem op de plek waar je de feed wilt tonen.

Maak van je Instagram-content een onderdeel van je website.

Bekijk de pakketten