Google agenda is een super handige agenda om afspraken en evenementen in weer te geven.
Daarnaast is Google agenda ook prima te bereiken op alle mobiele apparaten, zodat je altijd bij je agenda kunt komen om iets te wijzigen.
Wanneer je een website hebt wil je misschien een evenementenagenda plaatsen of wellicht wil je dat mensen je afspraken of beschikbaarheid kunnen bekijken.
In dit artikel laat ik je daarom zien hoe je een Google agenda kunt toevoegen aan je WordPress website.
Het doel is dus simpel gezegd om een agenda zoals je hieronder ziet op je website te krijgen.
Hoe je een Google agenda in WordPress kunt plaatsen
Google agenda heeft standaard al de mogelijkheid om een agenda in te sluiten op een website door middel van een iframe.
Het is dus helemaal niet zo moeilijk om een Google agenda op je website te krijgen. Het is simpel gezegd een kwestie van de code opzoeken en deze in een bericht of pagina te plaatsen.
Insluitcode ophalen van je Google agenda
Om dit hele proces te beginnen moet je als eerste naar je Google agenda gaan.
Eenmaal op de website van Google agenda zie je aan de linkerkant alle agenda’s staan die je hebt aangemaakt. Klik op het pijltje naar beneden in de agenda die je graag wilt insluiten op je website en klik vervolgens op “Agenda-instellingen”.
Je komt nu uit op de pagina “Agendagegevens”. Je hebt op deze pagina een kopje “Deze agenda insluiten” staan, met daarnaast een insluitcode die je op je website kunt plakken met de standaard instellingen.
Kopieer deze code als je gebruik wilt maken van de standaard instellingen of klik als je nog dingen wilt wijzigen op “Pas de kleur, de grootte en andere opties aan”.
Zoals je ziet hierboven heb je de mogelijkheid om dingen aan te passen zoals de naam van de agenda, de kleur, de breedte en hoogte, welke agenda’s worden weergegeven, en nog een aantal andere dingen.
Wanneer je instellingen aanpast zal de agenda aan de rechterkant zich direct aanpassen aan de hand van wat je hebt ingesteld. Het is dus een preview van wat je op de website ook te zien krijgt.
Eenmaal alles naar wens ingesteld kun je de insluitcode kopiëren en vervolgens naar je website gaan.
Insluitcode Google agenda op je WordPress site plaatsen
Ga op je website naar een bericht of pagina waar je de Google agenda aan toe wilt voegen. In de WordPress editor moet je erop letten dat je in de teksteditor zit en niet in de visuele editor.
Wanneer je in de visuele editor zit zal de code namelijk gewoon als platte tekst worden weergegeven op je website en het is natuurlijk de bedoeling dat de code zijn werk doet en er een Google agenda wordt weergegeven.
Wanneer je er zeker van bent dat je in de teksteditor zit kun je de insluitcode plakken en het werk zit erop.
Werk je pagina bij, klik op publiceren of bekijk een voorbeeld van de pagina om de Google agenda op je website te zien staan.
Meer werk als dit is het niet om een Google agenda toe te voegen aan je WordPress website.
Maak jij gebruik van een Google agenda op je website? Om welke redenen heb je dit gedaan of waarom wil je dit doen? Laat het gerust weten in de reacties.
19 reacties
Hoi Maikel,
wanneer ik een google agenda met iframe wil toevoegen met Elementor krijg ik de agenda mooi te zien in mijn werkomgeving. Wanneer ik echter op bijwerken klik krijg ik de foutmelding: Serverfout 403 (forbidden). Wat loopt er mis?
Dit kan ik je vanaf hier helaas niet vertellen en kan echt van alles zijn. Dit zal je moeten debuggen. De foutmelding geeft in ieder geval aan dat je geen toegang hebt tot de pagina. Dit kan door een fout in htaccess, verkeerde server configuratie, beveiligingsplugin, of nog zoveel andere dingen komen.
Hoi Maikel,
Ik vraag me af is het ook mogelijk om de agenda die ik in Wordpress heb gebouwd op mijn website, om deze afspraken terug te laten komen in mijn google agenda?
Vr gr Carla
Durf ik niet 1,2,3 te zeggen. Dit zou je even moeten opzoeken of aan de maker van de plugin vragen.
Hoi Maikel, ik heb de agenda op mijn website staan en wil getoonde afspraken weergeven in 2 kleuren, rood en groen. In mijn agenda gaat dat goed, in het getoonde iframe toont ie ze alleen in de standaard ingestelde kleur. Weet jij of het mogelijk is dat ie de voor de afspraak ingestelde kleur overneemt in het iframe? bedankt alvast! Groeten, Hette
Wanneer je andere “standaard” kleuren gebruikt, wordt dit volgens mij weergegeven in het iframe. Gebruik je custom kleuren, dan wordt het helaas niet getoond.
Hoi Maikel,
Weet jij of deze plugin ook geschikt is om het mooi vorm te geven. dus per dag. Ik heb een prinstscreen maar die kan ik niet toevoegen. Het is voor een klant.
Voor de vormgeving wordt gewoon de Google agenda vormgeving gebruikt. Heel veel is hier niet aan aan te passen.
Het enige dat jammer is, is dat als ik uitlog uit Google, de agenda ook van mijn wegsite verdwijnt.
Dan staat het waarschijnlijk niet ingesteld als een agenda die voor iedereen (publiekelijk) toegankelijk is.
Hoi Maikel,
De agenda wordt bij mij weergegeven op mn laptop, maar niet op mijn ipad of iphone. Weet jij wat ik fout heb gedaan? Dank! Nienke
Hmm goede vraag, ik heb het even getest of het toevallig niet altijd zo is momenteel, maar dit is niet het geval. Waarschijnlijk zal het een instelling zijn ergens, ik weet helaas niet 1, 2, 3 welke. Ik krijg op de website verder ook een melding te zien dat niet alle afspraken getoond kunnen worden, omdat ik de rechten daarvoor niet heb.
Hoi Maikel, dank voor je reactie. Ik heb het nog niet op kunnen lossen. Misschien toch een andere agenda proberen. Dank je wel! Ik ben super blij met de hulp via je website. Groet, Nienke
Bedankt voor duidelijk handleiding.
Het werkt prima op iPad en iPhone maar helaas is agenda niet zichtbaar op monitor van desktop.
Andere browsers geprobeerd maar helaas.
Ik zie enkel een rechthoekig vlak zonder dagen, weken, enz.
Nog geen enkel idee wat daarvan de oorzaak kan zijn.
Heb jij enig idee?
Wanneer ik de agenda op je website bekijk is het gewoon zichtbaar. Ik weet niet of je het al hebt opgelost of dat je computer wellicht om een bepaalde reden het niet goed weergeeft?
Hoi Maikel, ik heb het nog niet gedaan, maar het lijkt eenvoudig. Ik heb een praktijk en zou mijn zakelijke agenda op mijn website willen zetten. Kunnen klanten dan zelf een afspraak invullen? En kan ik dat dan op al mijn aparaten zien in mijn google agenda? En kan ik er een soort van e-mail systeem aanhangen dat ze een bevestiging krijgen van hun afspraak? Ik hoor het graag. M.v.g. Merel Slotboom http://www.movimento.nl
Dat andere mensen afspraken kunnen maken is alleen mogelijk met een werk of school Google account. Zie: https://support.google.com/calendar/answer/190998?hl=nl
Google stuurt verder zelf al mails over afspraken, ik weet niet of dit al voldoende is? Je kunt het verder volgens mij niet koppelen met een ander systeem.
Onwijs fijn artikel Maikel, precies wat ik zocht. Ik zoek voor mijn site al geruime tijd een manier om mijn volgers op de hoogte te brengen van evenementen, zonder dat ik er elke keer een artikel over hoef te schrijven. Daarnaast is het ook handig dat ik i.v.m. de reisjes die ik maak niet teveel tijd kwijt ben, dus dit is ideaal! Groetjes, Nina
Goed om te horen dat dit je leven wat makkelijker maakt. 🙂