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.


noname said...

Thanks a lot! Did it! Really useful!

Nada Techie said...

Hi - I did what you said, and it all seemed to work great. Only problem is that the dates I've added to the associated Google calendar aren't appearing on the the FB version. Any ideas? TIA

jessica said...

Helpful as always. Every post you write produce a massive value to your readers that is the only reason it is so popular and has great authority.
school signs uk

Natalie Allen said...

I hope this isn't too good to be true! I just shared Google Calendar to my church's Facebook page and if it doesn't work - I am going to feel like the biggest fool EVER!! LOL! How do I undo this if I change my mind????

Jona French said...

Does this work with a FB group???? I'm not seeing the option to add the Static HTML to a GROUP page....

Today Tech Tips said...

Nice post.Google Calendar is a great app. I can access it from any computer. Today tech tips is most popular online tech tips and track information in world. if you need
How to Share a Google Calendar follow this website.