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.

  • Pingback: 10 Ways to increase holiday sales on your Facebook Page()

  • Pingback: How to display Twitter on your Facebook Page with Shortstack()

  • poinsettiaslw

    I selected “quick publish,” and am not sure what to do from there. The screen says “Click install to add app to chosen facebook page.” It seems like there should be a list of the different group pages for which I am an admin for and that I should select the one I want to add this app to. However, none appear and the only option to click install is at the top of the page and is the same orange “Install app” box I hit two pages earlier. It just loops back around to the previous screen and does not install my app. How do I get the group page to be listed so I can install my tab/app? (Yes, I am already signed into Facebook on ShortStack).

    • http://www.christiankonline.com Christian Karasiewicz

      @poinsettiaslw:disqus on the quick publish screen in Shortstack, it should give you a list of pages to choose from.

      There, you would select the install button next to the page you want to install the landing page tab to.

      One thing I would try is to logout of Facebook. Then go into Shortstack and try to install your app using the quick publish option again. It will ask you to login to Facebook.

      I just tested it and it worked just fine.


      Christian

      • poinsettiaslw

        Hi Christian,
        I am still having issues with not having any pages appear in the list of pages where I can install my app. I did as you suggested and did not log into Facebook until I was prompted to do so when I tried to publish it. There are no pages/groups to choose from. Any suggestions?

        • poinsettiaslw

          I think part of the problem is that I would like to add this calendar tab to a Facebook group, not a Facebook page. Is there a way to add a calendar to a Facebook group?

          • http://www.christiankonline.com Christian Karasiewicz

            @poinsettiaslw:disqus that’s definitely the issue. You cannot add Facebook landing pages to Facebook Groups.

            The only way to add a calendar to a group is to make a post in the group and pin the update to the top.

          • poinsettiaslw

            Thank you for clarifying! I had previously pinned a post with a link to the calendar within the group, but I had hoped for a more elegant way to display the calendar. I’ll keep my fingers crossed Facebook changes it’s settings in such a way that will allow this in the future!

          • http://www.christiankonline.com Christian Karasiewicz

            @poinsettiaslw:disqus unfortunately, it’s not something they plan to add to Facebook Groups at the moment. That’s kind of the purpose of Facebook Pages.

          • http://www.sendaletternow.com Chantal DeYoe

            I’ve been poking around and can someone please tell me if these features are available on the free or trial or whatever version or the paid version only? I’m not seeing the “create tab” link. Thank you.

          • http://www.christiankonline.com Christian Karasiewicz

            @sendaletternow:disqus, they have redesigned the interface. You would use the create blank campaign button instead in Shortstack.

            As far as the plan, I would try setting up a free account and then try building it. This way you can see what options you have available.

            I believe the widgets you need are under the advanced section – those require a paid plan.

  • Pingback: How to display Pinterest on your Facebook Page with Shortstack()

  • http://www.SpiritsMessengerDebb.weebly.com Rev.Debb Brown

    Why when I paste the code does it and save it does it not show the calendar it says”Tab not found”

    • http://www.christiankonline.com Christian Karasiewicz

      @debbbrown:disqus it sounds like you didn’t publish the tab.

      Can you send me a screenshot of your Shortstack installation settings? Which option did you choose by the way?

      http://www.christiankonline.com/contact/

    • Annie Schiffmann

      I’m having the same issue.

      • http://www.christiankonline.com Christian Karasiewicz

        @annieschiffmann:disqus it looks like Google Calendar is having issues.

        One other work-around is to add the code widget and then paste the iFrame code in.

        Using this method, you may need to modify the width of your calendar.

        • Danielle Christensen

          How do you find the code widget? I am so new at all this stuff, I need baby steps. 🙂

          • http://www.christiankonline.com Christian Karasiewicz

            Hi. You need to start at Step 2. Once you create a blank tab, you will get the option to customize the tab. This is where the code widget is at (Step 3).

            Christian

  • Pingback: How to display YouTube videos on your Facebook Page with Shortstack()

  • Pingback: How to add questions and polls to your Facebook Page with Shortstack()

  • Pingback: How to display Instagram on a Facebook Page with Shortstack - Video()

  • grechen21

    Hi there, I would love to put a Google Calendar on my FB Page. I logged in to ShortStack (signed up for the free plan) but where it says Step 2: Create a blank tab, I don’t have that option. Across the top are Designer, Apps, Media, Templates, Forms & Promos. I chose Apps thinking maybe they just renamed it. Followed all of the other instructions and after pasting the URL, all I get in the box where the calendar should be is: “Tab not found”. Any idea what I am doing wrong? I made sure my ShortStack account is linked to my FB account, and I made sure my Google calendar is public. Thank you for your help.

    • http://www.christiankonline.com Christian Karasiewicz

      @grechen21:disqus, can you try using the code widget for me instead of the iFrame?

      • grechen21

        That worked, thank you!

        • http://www.christiankonline.com Christian Karasiewicz

          Glad to hear you got it working @grechen21:disqus.

          • abbey

            I am getting the same thing as grechen21, but I do not know how to switch to or use the code widget??

          • http://www.christiankonline.com Christian Karasiewicz

            Glad to hear you got it working abbey! There is a lot more you can do with Shortstack. Check out some of the items listed here: http://www.christiankonline.com/?s=shortstack.

            I think you’ll find them useful.

  • Guest

    Wow, what a great tutorial. I am having difficulty though when i paste the Google Embed calendar <iframe code into the shortstack new iframe widget source URL. I get a message saying please enter a valid URL. i can put other URL's in there with https: that seem to work but the google calendar iframe coded just diplays the error. Any ideas?

  • Ross Jorgensen

    Wow, what a great tutorial. I am having difficulty though when i paste
    the Google Embed calendar iframe code into the shortstack new iframe
    widget source URL. I get a message saying please enter a valid URL. i
    can put other URL’s in there with https: that seem to work but the
    google calendar iframe coded just diplays the error. Any ideas?

    • http://www.christiankonline.com Christian Karasiewicz

      @rossjorgensen:disqus, did you copy the exact code Google provided? I always like to select everything in Shortstack and make sure the widget is empty. Then in Google Calendar, select all and copy and paste.

      One other thing to try, try using the code widget. Some users have reported switching to that worked for them – while I had no issues using either the iFrame or code widget with ShortStack.

  • Leah

    does this work for business pages not just personal on FB

    • http://www.christiankonline.com Christian Karasiewicz

      @disqus_WzLixdrEpa:disqus, this is only for Facebook Pages. Not Facebook Profiles.

  • starzkeeper

    Hi Christian, I’ve just discovered you and your blog; I’m positive I’ll be coming back a lot! Since they did redesign, I’m hoping you’ll help me to understand. I created an account in ShortStack, and I created a campaign. When I used the iFrame widget, I got an error saying please use a valid URL – which I did copy correctly. Then after reading all the comments again, I use the Code widget. This time it said ‘Code Widgets can only be added to the Layers Panel’ I just don’t see that! What am I doing wrong?

    • http://www.christiankonline.com Christian Karasiewicz

      starzkeeper, thanks for the kind words. I hope enjoy the content.

      Regarding your issue, try using the code widget instead. I just tested it and it worked. Are you in the new campaign builder or using the classic version?

      Within your campaign in Shortstack, you should be able to click on the iFrame or code widget and it will add it to the left column. Then add your code and hit save.

      If you still have issues, send me a message here: http://www.christiankonline.com/contact

      Christian

  • Loe

    Well…this looks goods… but is absolutely not working… cant find any of the written steps in shortstack, and getting to see a wholo lot of other things there, and in google calender… Too bad!!!

    • http://www.christiankonline.com Christian Karasiewicz

      @disqus_JQ5TxBFmf1:disqus, where are you stuck at? Shortstack updated some of their site, but the functionality should still be the same. You also mentioned “getting to see a whole lot of other things there,” what were you referring to?

  • Andrew Betty Shepard

    I do not see the option to create a blank tab…let alone for FB… What am I missing?

    • http://www.christiankonline.com Christian Karasiewicz

      What plan are you using with Shortstack @andrewbettyshepard:disqus?

  • ecostudio

    I cant find any TAB option in my account 🙁

    • http://www.christiankonline.com Christian Karasiewicz

      Try creating a new campaign. They’ve updated their tools a bit, but that should get you started.

  • KJFarrey

    Can I use this in groups?

    • http://www.christiankonline.com Christian Karasiewicz

      @KJFarrey:disqus no. Facebook Groups don’t have the ability to include landing pages. What you would need to do is create a new post, include a link to something you want to always be there for your group and use the pinned post feature. Here’s more on how that works. http://www.socialchefs.com/lessons/pinned-posts-in-facebook-groups/

  • Gregor

    Hey.
    Thanks for that awesome tutorial but I have a problem. I can’t add calendar in the facebook group that I want. I am an admin in that group. But for test I created new group, and in that group I can add calendar.

    Thanks for any help

    • http://www.christiankonline.com Christian Karasiewicz

      Facebook Groups don’t allow you to add landing pages. You would have to create something offsite and then make a post in your Group, linking to it.

  • Nick Neskovski

    My “Schedule” tab shows very well on a desktop, but it does not show on mobile devices. Thanks.