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=”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&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.

9 replies on “How To Add (Embed) Google Calendar To Your Facebook Fan Page”

i removed comments

Where do I paste this code? Do I have to make a static page on my own website to embed this ical code which I merged into your script?

Thanks so much. Got me 90% of the way!

Hi – yes, you’ll have to create your own HTML page within which you embed the G-Cal script – the code I provided in the article can be used in Notepad, just change out the Google Calendar embed code with your own – you’ll also need to create your own FB apps if you want to use the “Likes” and “commenting” system (just replace the ID)

@ Gem

I’m trying to add a tab for our google calendar on the facebook page. I’m really happy with how it turned out, except for one major thing! I’m missing the “Link to this Tab” option when I go to Edit Profile.

What did I do wrong! :)

Hi,

First of all, thanks for this great tutorial! However, I couldn’t make it work properly. I had to change the .html file to .php due to server issues, and it actually works, but not inside the tab I created. So, for my app to work, I first see an image of the FB logo and, only after clicking, I can see my calendar. What have I done wrong?

9 replies on “How To Add (Embed) Google Calendar To Your Facebook Fan Page”

Leave a Reply Cancel reply