Selecteer een pagina

Veel blogs en websites in het algemeen hebben tegenwoordig helemaal onderaan hun website hun laatste Instagram foto’s. Ziet er leuk uit én trekt misschien nog wat mensen naar je Instagram. Maar hoe doe je dat op je WordPress website?

Footer met WP Instagram Widget

Zoiets is wat je wil onderaan je website in de footer.

Verschillende plugins

Er zijn heel veel plugins om Instagram op je WordPress website te krijgen. Sommige thema’s hebben zelfs automatisch al een Instagram widget klaar staan.

Maar veel van die plugins hebben nadelen. Zo hebben ze bijvoorbeeld veel functies die je helemaal niet nodig hebt. Verder moet je vaak Instagram authenticeren voor de plugin, wat betekent dat je via de plugin moet inloggen. Als het je eigen Instagram is, is dat vaak geen probleem. Maar als je bijvoorbeeld een website voor een klant maakt, is dat een beetje onhandig. Verder kun je dan ook niet een Instagram feed van iemand anders embedden of bijvoorbeeld foto’s die met een bepaalde hashtag zijn gepost.

WP Instagram Widget

Die problemen zijn eigenlijk opgelost met de plugin WP Instagram Widget. Deze plugin is meer bedoeld voor developers. Het is mogelijk om de Instagram foto’s van een account te laten zien zonder in te loggen of te authenticeren. Maar veel opties qua opmaak zijn er niet. Je kunt een titel geven, aangeven welk account of welke hashtag je wil weergeven, aangeven hoeveel foto’s je wil weergeven, hoe groot deze foto’s zijn, of je de foto’s in een nieuw venster wil laten openen en of je een tekst erbij wil (bijvoorbeeld ‘volg mij op Instagram!’). En dat is het eigenlijk, instellingen voor de opmaak zijn er niet.

Als je de plugin hebt geïnstalleerd en geactiveerd, staat er bij je widgets een nieuwe widget genaamd ‘Instagram’. Als je die plugin sleept naar je footer en de instellingen invult, zul je zoiets zien:

Footer met WP Instagram Widget

Instellingen voor de WP Instagram Widget.

Footer met WP Instagram Widget

Hoe de Instagram foto’s er dan uitzien op in je footer: alle foto’s staan onder elkaar.

Zoals je ziet komen de foto’s niet mooi horizontaal onder elkaar te staan. Daarvoor zijn dus geen aparte opties in de plugin, maar gelukkig kun je het gemakkelijk zelf oplossen met maar een paar regels CSS.

Custom CSS

Vul de onderstaande code toe aan de custom CSS in jouw thema.

Voor 10 foto’s


/* style WP Instagram Widget */
.instagram-pics li {
float: left;
width: 10%;
}
.null-instagram-feed p.clear {
clear: both;
}

Welk getal je achter width hebt staan ligt eraan hoeveel foto’s je wil. Ik heb nu ingesteld dat ik 10 foto’s wil en 100/10=10, dus de width wordt 10%. Als je in plaats daarvan bijvoorbeeld 8 foto’s wil, wordt het 100/8=12,5, dus de width wordt 12.5%. Vergeet niet het aantal foto’s nog aan te passen in de widget zelf!

Voor 8 foto’s


/* style WP Instagram Widget */
.instagram-pics li {
float: left;
width: 12.5%;
}
.null-instagram-feed p.clear {
clear: both;
}

WP Instagram Widget met 8 foto’s in de footer.

Dat viel best mee toch? Zo zie je dat je met heel weinig CSS toch een mooie weergave hebt van je Instagram foto’s.




Iets aan gehad?

Become a Patron!