Tuesday, June 9, 2015

How to Add Google Calendar Tab to your Facebook page

For those of you, like me, who were using the very simple Events Calendar app in facebook, as of today, the developer has stated that it no longer works because of facebook changing its API and he is unsure as to how long it will be until the app is repaired. 

Computer Genie, with a million others, used this app within facebook for a basic events calendar; this app being capable of scanning your existing Events and adding them to a calendar that occupied its own tab. Not being able to wait on the developer, I had to find a new solution today. For the last couple of weeks, I have been toying with iframe tabs 


There are two iframe apps I am testing: Static iFrame tab for a MailChimp e-mail signup page, and Static HTML: iFrame tabs for the Google calendar embedding. Static HTML: iFrame tabs seems a little more sophisticated and allows 12 page tabs per page you admin on facebook.


Embed your Google calendar into your facebook page, using Static HTML: iFrame tabs

1. Make a Google calendar. Simple instructions here
2. Find the html code to copy/embed into your facebook app: 

  • Expand the My Calendars column (on the left of Calendar page). 
  • Hover over the calendar and click on the drop-down arrow, showing a full options menu for customizing your calendar. 
  • Choose Calendar Settings. Spend some time here making adjustments to your calendar and when you are ready...

  • Copy the html code that appears in the text box under the heading "Embed This Calendar" OR
  • Click on the link "Customize the color, size and other options" to customize many other aspects of the calendar. This area will also show the code to copy. Be sure to click the "Update HTML" button above the code, so you are sure to have the latest changes. 

  • Keep this page open. If you are like me and need to change the colors 8x, you will return to copy the code over and over again until it is just right.

2. Install Static HTML: iFrame tabs app to your facebook account. 

  • Click the button "Add Static HTML to a Page". 
  • Choose your page from the drop-down menu and choose "Add Page Tab"
  • Go to your page and click on the Welcome tab and Edit Page Tab button.
There are a lot of things you can add here and play with, but we want to simply add the html code we copied above.

  • Notice that you are looking at the "Content" tab. Paste the html code into index.html. There is a paragraph already there giving simple instruction. Delete all the text and PASTE (keyboard shortcut: Ctrl + V). 
  • Next, click on the "Tab name & image" tab. Simply change the name of the tab here OR wait to do this back at facebook.
  • Preview and/or Save & Publish.
It is that simple. Now I am excited!!! 
There is so much you can do with Static HTML: iFrame tabs; I have only just begun! Feel free to share what you have created/made in the Comments below.

Hey, please LIKE my page if this post was able to help you.
Computer Genie: facebook page for clients and fans
Computer Genie - Global IT Pros: facebook group specifically designed for IT professionals only.




Computer Genie can help you with this for a one time fee of $97.00
The Genie will:
  • help set up your Calendar (and/or Gmail account if you do not already have one.)
  • add events to your Calendar to get you started
  • add/embed the Static HTML: iFrame tabs app to your facebook page and embed the calendar.
  • Remote into your computer to show YOU how to add events to your calendar, which automatically shows up on your facebook page.
Contact Computer Genie: 

  • Email Computer Genie here or call the number in the banner below.