Embedding Calendars

Facebook Calendars

Facebook will allow you to create custom tabs on Facebook Pages that hosts your unique content. Like Keep&Share, this custom tab is based around an iFrame. If you want to embed your calendar onto a Facebook page, you will need to copy the source of your calendar on Keep&Share and then paste it into your custom Facebook tab.

You will need to create a Facebook page in order to add a custom tab to your Facebook account. To learn how to do this, please visit this Facebook Support page. After you have created your Facebook page, proceed with the steps below to add your calendar to Facebook.

Creating a Facebook Custom Tab

Before you can create a custom tab, you will first need to register as a Facebook Developer on the Facebook Developers Page, which you can find at this address: https://developers.facebook.com/apps.

After you have registered as a Facebook developer, you can follow the steps below to create your custom tab that will host your Keep&Share Calendar.

After you have created the app ID for your Facebook page, you will need to find the calendar source for your embedded calendar. This is the link you will need to paste into the pop-up dialog following the creation of your app ID. Since you are putting your Calendar into Facebook’s iFrame, you will need to copy the same calendar link that you use for embedding your calendar. Learn how to find your embedding code for a full calendar, a responsive calendar, and a day scroll calendar.

When you have copied your embedding code for your calendar, it will look like the code below:

HTML Example:

However, you only need the source code for the calendar which is highlighted in yellow in the example above. This is the link that your Facebook tab will link to. When you copy the source for your calendar, be sure to change the “http” to “https” or else the link will not work in Facebook. Your link will then look like the example below:

HTML Example:

https://www.keepandshare.com/calendar99/embed_calendar.php?i=533&style=r&fmt=std&startdate=&n=7&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&mntc=&mnbc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=n&lang=&ifr=y&frw=&frh=&frs=no

You will need to paste the calendar link you copied into the pop-up Facebook dialog that you see after you click on the “Create App ID” button. After you do that follow the steps in the image below to create your Facebook tab:

Be sure to choose the “wide” (810px) setting for your Facebook page for the best display of your embedded calendar.

Adding your Keep&Share Calendar to Facebook

Now that you have added your Keep&Share calendar code to your Facebook tab, you will need to add your custom tab to your Facebook page. To do this, you will need to visit a custom URL with two custom URL parameters — app ID and Site URL. In the "Settings” tab for your Facebook app, you will see your app ID listed at the top and your website URL will be your Keep&Share calendar source code.

In the example below you will see what the custom URL looks like when you add your information to it.

What the URL will look like:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_CALENDAR_URL

What the URL will look like with your parameters added:

http://www.facebook.com/dialog/pagetab?app_id=341430752723179&next=https://www.keepandshare.com/calendar99/embed_calendar.php?i=533&style=r&fmt=std&startdate=&n=7&h=&w=&dbc=&hc=&htc=&tbc=&tbtc=&ltc=&ntc=&mntc=&mnbc=&navicon=caret&fsz=11&nav=y&ac=y&sparse=n&lang=&ifr=y&frw=&frh=&frs=no

You will need to enter this URL with your custom URL parameters into your web browser and go to that page. You will then see a pop-up where you can choose what Facebook page to add your custom tab with your Keep&Share calendar to.