Add a Google Calendar to a Facebook Page

 

Adding a public Google Calendar is a great way to present activities in an easily shared fashion.

To add a Google Calendar to your Facebook Page, you will first need a Facebook Page (not a personal profile page) and a Google (Gmail) account.

Create the Google Calendar

Make a public calendar. This can be an existing calendar or one created for this purpose.

Make the Calendar Public

After the calendar has been created, click on the drop-down arrow beside the calendar name and choose Calendar Settings. The Calendar Details page will open.

Click the Share this Calendar link.

The checkbox turning on Public Access
Making a Google Calendar Public

 

Enable the Make this calendar public checkbox.

Click the Save button.

The calendar view will be displayed.

Customize the Calendar HTML Code

Return to the calendar’s details page.

Click on the drop-down arrow beside the calendar name and choose Calendar Settings. The Calendar Details page will open:

finding the HTML to display the Google Calendar
Locate the Embed this Calendar section

Scroll down the page and find the Embed This Calendar section.

Click on the Customize the color, size, and other options link.
A new window or tab will open, the Google Embeddable Calendar Helper:

Google Embeddable Calendar Helper
Google Embeddable Calendar Helper

 A preview of your calendar is visible. You can change the title, default view and other elements of the calendar. The view will update to show you what your calendar will look like when the changes are applied. If you do make changes, be sure to press the UPDATE HTML button to ensure those changes are reflected in the HTML.

Be prepared to copy and paste the HTML code. However, do not do so yet.

Add the iFrames Tab app to your Facebook Page

From your Facebook page go to https://www.facebook.com/StaticHtmlThunderpenny/

Click the Use App link on the left hand side of the page.

The Static HTML: iframe tabs page will appear:

view of Thunderpenny app installation page
Static HTML: iframe tabs, Add Static HTML to a Page

Click the Add Static HTML to a Page button.

The Add Page Tab window will open:

Add Page Tab dialog box
Choose your Facebook Page to add the Page Tab too.

Click on the drop-down Facebook Pages Button and select your Facebook Page.

Click the Add Page Tab button.

You will be routed to the Set Up Tab view. Click the Set Up Tab button.

Follow the instructions in the index.html area

Copy the HTML code that you customized previously for your Google calendar into the index.html area.
Replace the instructions with your code (or the instructions will appear along with your calendar).

The Static HTML customization window.
The Static HTML window. Paste your calendar code here.

Click the Save & Publish button.

Name the Tab

From your Facebook Page, select Settings.

Finding the App Settings after installation
Return to Settings to Name the Tab

Click on the Apps category on the left.

Apps that have been added will be listed on the right.

From the Static HTML: iframe tabs app section, click on the Edit Settings link.

The Edit Static HTML: iframe tabs Settings dialog box will appear:

The Edit Static HTML: iframe tabs Settings dialog box
The Edit Static HTML: iframe tabs Settings dialog box

Enter the name of your calendar in the Custom Tab Name: text box.

Click the Save button.

Click the OK button.

You can also add an image that will appear beside the link on the right hand side of your page.

Additional Ideas

Now the App code has been connected to your Facebook page, additional tabs can be added. Any piece of embeddable HTML code can be used. For example; on-line catalog search code. To add additional tabs, return to the page Settings and select Apps.

Click the Go to App link for the Static HTML: iframe tabs app.

The app will walk you through creating an additional tab.

Woobox has an app called Tweet Feed for Pages, which will embed your Twitter feed into a tab on your page. The concept is similar to embedding a Google Calendar. Woobox’s app will walk you through the process of adding the tab.

Leave a Reply

Your email address will not be published. Required fields are marked *