How To Add (Embed) Google Calendar To Your Facebook Fan Page

Prior to a couple weeks ago, in order to get a Google Calendar embedded into your Facebook Fan Page required a custom Facebook application.

Of which, very few existed. And those that did exist, wouldn’t allow you to display the calendar directly on your Facebook Page – you’d have to click a link that then took you off the Facebook page to view the calendar.

With the new iFrame tabs for Facebook pages, embedding a Google calendar into your page is possible.

You can see a Google calendar I embedded into our churches’ Facebook Fan Paeg here.

You’ll also see above that I added the Facebook “Like” button above the Google Calendar as well, to give this page a little bit more social interactivity.

How to embed Google Calendar into your Facebook Fan Page:

1)  Create an iFrame tab app for your Facebook Fan Page.

To do this, I’m going to refer you to one of my previous articles on creating iFrame tabs for Facebook Fan Pages.

2) Get your Google Calendar code

The way you get your Google Calendar code is by going to your Google Calendar > click “Calendar settings” > click the “Calendar” tab > click the appropriate calendar you want to embed > scroll down and you’ll now see the embed code for that specific calendar.

3)  Embed the Google Calendar code into your Facebook iFrame tab application

For the Google Calendar Facebook tab I created, I used Notepad to generate the “Tab URL” for my app.

Below is the complete code to my iFrame GCal tab app that is generating our Google Calendar tab.

All you’ll need to do is replace the Google Calendar embed code with your own.

Everything else should work, to include removing any scroll bar issues.

You’ll also notice that I added a cool little calendar web icon to our Facebook Fan Page – this adds a nice final touch, and let’s your visitors know exactly where your calendar is located.

Again, here’s the full embed code – again, just replace the Google Calendar embed code with your own:

<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml”><head><script type=”text/javascript”>

window.fbAsyncInit = function() {  FB.Canvas.setSize({ width: 520, height: 1400 }); // Live in the past}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {  FB.Canvas.setSize({ width: 520, height: 1400 }); // Live in the past}
</script></head>
<div> <!– float container –>
<div style=”clear:both;”></div>
</div>
<script src=”http://connect.facebook.net/en_US/all.js#xfbml=1″></script><fb:like href=”http://www.facebook.com/CornerstoneAthens” show_faces=”false” width=”500″ action=”recommend”></fb:like>

<div style=”float: left; padding:20px 0px 0px 0px;”><iframe src=”http://www.google.com/calendar/hosted/cornerstoneathens.cc/embed?src=cornerstoneathens.cc_g9fdam05k7mops1dd119likefc%40group.calendar.google.com&ctz=America/New_York” style=”border: 0″ width=”520″ height=”500″ frameborder=”0″ scrolling=”no”></iframe></div>

<div style=”clear:both;”></div>

<div style=”float: left; padding:20px 0px 0px 0px;”><div id=”fb-root”></div><script src=”http://connect.facebook.net/en_US/all.js#appId=191773364177093&amp;xfbml=1″></script><fb:comments numposts=”10″ width=”520″ publish_feed=”true”></fb:comments></div>
</body></html>

I highlighted the Google Calendar code in blue – hopefully this helps you with your code.

Let me know how it works out for you.

If you have any questions, post them in the comments below.