How to add a Google Calendar to your Wordpress blog by embedding HTML
Posted by: admin in Tech Tips, tags: Google Calendar, Tech Tips, wordpressSince I spent hours trying to get this to work, I’ll tell you how I did it. Ignore the Google plug-in which gave me an ulcer. Ignore the RSS feed info widget, which gave me gray hairs. I did it in a way which winds up being so easy, I’m surprised I haven’t found a post on it yet to help out those of us who are not web programmers. In fact, I found many sites that say it can’t be done.
(Note: this website is not hosted on wordpress.com, it just uses their software, which may have made the difference in why this worked.)
Google Calendar
Go to your Google Calendar, and click on the little down arrow next to the calendar name under “My Calendars”, then select “Share this Calendar”. Enable the checkbox next to Make this calendar public.
Click on “Calendar Details”.
Near the bottom where it says Embed This Calendar, click on the Customize the color, size and other options. The Google Embeddable Calendar Helper comes up and that’s what we will use to generate the HTML you’ll use in your Wordpress blog.
You can make the changes on the left so your calendar looks like you want it to, and preview the changes on the right. To make it work with a two-column layout, I had to change the width to 650 pixels. This involved some trial and error, but you can make the changes easily.
Copy all the text from the Copy and paste the HTML below to include this calendar on your webpage box.
Wordpress
Now, in Wordpress, create a new page, and give it a title. Then where you would type in text make sure you switch from ‘visual’ to ‘html’. Type in <code>. Then, paste in the HTML you created for your calendar. Finally, add </code> at the end. What this seems to do is tell Wordpress that this is not a text entry, rather treat the information as a code it has to run.
That’s it. Publish your page and check it out. You might have to fiddle with the width to make it fit, or add more calendars to share, but you’re effectively done. This could have saved me much grief.
Note: occasionally when it comes up it doesn’t look right at all, but when I hit reload it comes up looking fine. If I ever figure out why I’ll let you know.
Editing after the fact
If you go back into the calendar post and change it, but you have your settings on “Visual” and not “HTML”, be warned that it erases what’s there and gives you an error. It appears that your browser tries to run the code within the edit window and dies. To get around this, start a new post, change to HTML, cancel it, then edit the calendar and it will default to HTML allowing you to make your edits.
Happy posting!



Entries (RSS)