Embedding Google Calendar in to your InstantPro Website.
As you are most likely aware, Google offer many more services that just a simple Search Engine.
Some of the services which are offered by Google, such as Maps and Calendars, allow you as the user to add this content on your own website by embedding some pre-prepared HTML code.
Adding HTML code in to your InstantPro Website has been covered in a previous tutorial. So that you are aware of the topics this guide will cover we suggest you read the
Adding HTML Tutorial before reading any further.
If you use the Google Calendar service for your business to manage appointments, or even share your arrangements with friends it would be useful to be able to add an interactive, up to date calendar to your web site.
This guide explains how to integrate Google Calendar in to your Instant Pro site.
In order to follow this tutorial you will need to
Log in to your MyFreeola account
and open the InstantPro Website Builder from within your account.
Adding Google Calendar
1.
Much in the same way as adding
Google Maps
, or a
You Tube video
to your site, you will need to add some HTML code in to your web pages using the html editor in InstantPro.
In order to obtain the HTML code you will need, you will first need to log in to your Google Account. Once you have logged in you will need to go to your Calendar page.
Click image to view full-size
2.
Once your calendar has opened you will see to the left of the page a list of your calendars and a settings button just below.
Click image to view full-size
Click the settings link and this will allow you to manage settings for the Calendar.
3.
On the settings page you will need to select the
Edit Settings link under
Sharing.
Click image to view full-size
Important
In order to display an automatically updating calendar on your InstantPro Website, you will have to enable the Share Calendar function.
4.
In the Shared Settings you will have to select the
Calendar Details tab which is shown at the top of the page.
On the Calendar Details page, you will see an option to Embed This Calendar.
Click image to view full-size
As you can see from the image above, the HTML code which you require is shown under this section. You will also notice that you are able to customise the appearance of the calendar too.
For the tutorial the calendar has not been customised.
5.
Paste the code from Google Calendar in to the HTML of your InstantPro Website.
For the example the calendar will be placed on a contact page which invites people to use the calendar to request an appointment.
The type of page used is the Contact page, and to add the calendar we are using the Edit introduction text feature which will allow us to paste in the HTML code provided by Google.
Click image to view full-size
The image above shows the page on which the calendar will be added. To add the HTML code you will need to click the HTML icon shown as highlighted in the image.
If you are new to HTML code, or you will be adding a calendar to a page with a large amount of content already contained on it, I would first suggest reading the
InstantPro HTML tutorial
so that you can better understand the layout of HTML code, and do not adversely affect other content on your pages when pasting the code in.
You may also wish to read the
Understanding HTML guide if you wish to further explore HTML code.
6.
The HTML source code of the example page appears as shown below.
Click image to view full-size
You will notice that the image has been noted as to where the Google Calendar code will be added. The calendar code will be added in after the last </p> tag, which is used to end a paragraph.
Adding the code at this point in the page will ensure that the calendar appears just below the content I have added already.
With the code added the HTML editor appears as shown below.
Click image to view full-size
The
red
highlighted area shows the code which has been added for the Google Calendar, and the
pink highlighted values represent the height and width of the calendar. Currently the calendar will appear on our page with a width of 800 pixels and a height of 600 pixels.
These height and width values will mean the calendar takes up a large amount of your page, if you wish to adjust the size of the calendar, simply change the number contained within the speechmarks and click the update button
to apply the changes.
The example calendar has a width of 600 and height set to 500 pixels.
Click the Update button to add your code to the page.
7.
As you can see, the InstantPro tutorial site now has a fully functioning Google Calendar contained on it.
Click image to view full-size
8.
Below you can also see how the calendar appears on the live page.
Click image to view full-size
You can also view the page created in this tutorial at the
InstantPro example Web Site.
Finished
You will now have a functioning calendar on your InstantPro Website. Changes you make to your calendar within your Google account will be reflected on the calendar shown on your InstantPro Website once you refresh the page.
