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.

  • http://SocialMediaSEO.net Robert Holland

    i removed comments

  • http://www.explorethebruce.com Gem

    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?

  • http://www.explorethebruce.com Gem

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

  • http://businessaustralia.net Paul – BusinessAustralia.net

    Can you explain the purpose of the 2 following bits of HTML code?

    1.
    [div] [!- float container -]
    [div style=”clear:both;”][/div]
    [/div]

    2.
    [div id=”fb-root”][/div]

  • http://SocialMediaSEO.net Robert Holland

    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

  • http://SocialMediaSEO.net Robert Holland

    I’m simply using

    tags to clean up my page and keep things nice and straight

    Paul – BusinessAustralia.net :

    Can you explain the purpose of the 2 following bits of HTML code?

    1.
    [div] [!- float container -]
    [div style=”clear:both;”][/div]
    [/div]

    2.
    [div id=”fb-root”][/div]

  • http://premiercoedsports.com/ Eliza

    http://www.facebook.com/apps/application.php?id=176956639016938

    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. Here is my business page… http://www.facebook.com/PremierCoedSports.

    What did I do wrong! :)

    Many Thanks!
    Eliza Carll
    Co-Owner, Premier Co-ed Sports
    eliza@premiercoedsports.com
    (919) 605-7163

    • http://socialmediaseo.net SMSEO

      what tab exactly are you trying to add your calendar to?

      • http://premiercoedsports.com/ Eliza

        Our facebook page, listed with the other tabs. Info, Photos, Events, etc

        • http://premiercoedsports.com/ Eliza

          If it would be easier, send me a message (email address in the above post) and I’ll send you back print screens of how I set it up.

  • http://premiercoedsports.com/ Eliza

    http://www.facebook.com/apps/application.php?id=176956639016938

    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. Here is my business page… http://www.facebook.com/PremierCoedSports.

    What did I do wrong! :)

    Many Thanks!
    Eliza Carll
    Co-Owner, Premier Co-ed Sports
    eliza@premiercoedsports.com
    (919) 605-7163

  • http://premiercoedsports.com/ Eliza

    http://www.facebook.com/apps/application.php?id=176956639016938

    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. Here is my business page… http://www.facebook.com/PremierCoedSports.

    What did I do wrong! :)

    Many Thanks!
    Eliza Carll
    Co-Owner, Premier Co-ed Sports
    eliza@premiercoedsports.com
    (919) 605-7163

  • http://premiercoedsports.com/ Eliza

    http://www.facebook.com/apps/application.php?id=176956639016938

    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. Here is my business page… http://www.facebook.com/PremierCoedSports.

    What did I do wrong! :)

    Many Thanks!
    Eliza Carll
    Co-Owner, Premier Co-ed Sports
    eliza@premiercoedsports.com
    (919) 605-7163

  • Pingback: Facebook page(s) similar to AT&T - DesignersTalk()

  • Iqshots

    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?