Embed a Google calendar on Facebook using Shortstack

How to embed Google Calendar on your Facebook Page with Shortstack

Last week we talked about 10 reasons to use Shortstack. Today we’re going to show you how you can use Shortstack to add a Google Calendar to your Facebook Page. Here is an example of the Facebook landing page tab we will build using Shortstack.

Example of a Google Calendar embedded on a Facebook Page

Google Calendar on a Facebook Page
Example of a Google Calendar added to a Facebook landing page tab using Shortstack.

To embed a Google Calendar in your Facebook Page, follow the instructions listed below.

How to embed a Google Calendar in your Facebook Page

Step 1: Login to Shortstack

Step 2: Create a blank tab

Blank Shortstack tab
Create a blank Facebook landing page tab in Shortstack.

Step 3: On your Shortstack tab, add an iFrame widget from the Advanced section.

Note: Some users have had issues using the iFrame widget. If you get an error, add the code widget instead.

Shortstack designer
View of the Shortstack designer.
Shortstack advanced widgets
Display a Google calendar using an iFrame widget in Shortstack.

Step 4: Head over to Google Calendar to get your embed code

To get your embed code, click the dropdown next to a Google Calendar you want to embed. Select “Calendar settings.”

Google Calendar settings
Get your embed code within Google calendar settings.

Under your Google calendar settings, look for the “embed this calendar” section. Copy the embed code.

Embed a Google Calendar
Google calendar embed code.

Note: Customize what shows up on your Google Calendar by selecting “customize the color, size, and other options” link above the embed code.

Step 5: Head over to Shortstack and select edit in the iFrame widget.

Paste the code you copied from Google Calendar into the “iFrame Source URL” and hit save.

Shortstack iFrame widget
Edit the iFrame widget in Shortstack.
Add a Google Calendar to a Facebook Page
Add your Google Calendar embed code in Shortstack.

After you save your code, this is what you should see in Shortstack.

Google Calendar in Shortstack
Example of a Google Calendar in Shortstack.

Step 6: Publish your Faceboook landing page application to your Facebook Page.

Install a Facebook landing page tab
Click install tab to install a Facebook landing page tab.

When you’re ready to publish your new Facebook landing page tab for your Google Calendar, click on “Install Tab” and choose how you want to publish your tab.

Publish a landing page
Publish a tab from Shortstack on a Facebook landing page tab

Click here to see a working example of a Google Calendar embedded on a Facebook landing page tab.

Using a Google Calendar on your Facebook Page

The great thing about embedding a Google Calendar on a Facebook landing page is that you can edit your Google Calendar and it will automatically update your Facebook landing page app you created with Shortstack.

For those of you not sure how you would apply this to your own business, here are a few examples.

  • Create an events calendar
  • Display upcoming product promotions
  • If you sell services, display your available times
  • And more

Your turn

What else would you like to know about Shortstack? Leave a comment below and let me know what type of Facebook landing page app you want to build next.