Embedding your OrgSync Calendar/Events List to a Facebook Page

One of the most frustrating things for anyone who helps manage student groups is finding a way to centralize your calendars. Often, your campus website will have one calendar but scheduling and your student website may have another. While it may not be possible to eliminate having to put your events into one exclusive calendar, you can make it so you have less to update.

If you’re reading this post, your probably already using OrgSync on your campus for your student organizations. If you (or any organization) are using the Events module in OrgSync you can have this calendar feed to multiple locations, so that as you update details, times and locations within OrgSync it will auto-update the calendar in other locations.

Placing your Calendar as a Tab on your Organizations Facebook Page

In new browser window or tab, open Facebook and search for “Static HTML: iframe tabs” at the top
(or simply click here)
Click the big blue button that says “Add Static HTML to a Page
Select your organization’s page from the drop down menu and then click the “Add Page to Tab” button
After you add the app to your page, you will be redirected to your personal timeline. Navigate to your organization’s Facebook page on the left side menu. Your page should look something like the one above.
Hover over the “More” menu option and click “Manage Tabs”
The “Welcome” app should be at the bottom of your list. Simply click and drag it to the top of your list underneath the “about” tab. Then click the “Add or Remove Tabs” link at the bottom.
This page will show you any apps installed on your page. If you have the “events” app added to your page, I would recommend that you click the “x” and remove it from your page. This will keep your page from being confusing with two different apps for events. Click the “Edit Settings” link on the Static HTML: iframe tabs app.
The custom Tab Name should be blank. Enter what you would like the tab to be called. I recommend “Upcoming Events”. Click the blue “Save” button and then the blue “OK” button. Navigate back to your organization’s page by clicking “Page” in the upper left corner.
Huzzah! The new events app is now correctly placed and titled on your page. Now you just need to add the embedded OrgSync calendar!
Click on “Upcoming Events” and then the green “Edit tab” button. Keep this window/tab open for the moment.
In a new browser window/tab, navigate to your organization’s calendar module. Click the “Subscribe” button on the left hand side.
In the window that pops up, copy the embed code from the bottom box. Navigate back to the Facebook window/tab you left open in the previous step.
Paste the embed code you copied from OrgSync in the large “index.html” box and click the blue “Save & Publish” link and then the “Done editing” button on the upper left-hand corner.

(note, if you want your calendar to default to the events list view rather than the calendar view, add ?view=upcoming at the  end of the URL in the embed code. For example https://orgsync.com … /calendar/iframe?view=upcoming)

Guess what?
You’re done! Congrats! Now your OrgSync calendars are embedded on your Facebook page! If you kept it as the calendar view, your tab should look something like the first image below. If you added the code snippet to make it show the events list view, it should look like the second image below.


One important thing to remember is that for any events to show up, you must set their visibility to “Public + Website” when you create them within OrgSync.

If you have questions or comments, please leave them below! There will be more helpful ways to integrate OrgSync into existing campus systems soon, so be sure to follow!


Advertisements

6 Comments

Add yours →

  1. Thanks Brandon, this is awesome! Just implemented it with our Dixie Serves pages and will be using it with some of our other pages we can sync to OrgSync calendars.

    Like

  2. Hey Brandon! Saw your presentation at OrgSync. This guide has been really helpful. Have you found a way to just pull events from a specific category? I’ve chosen my category and copied the source code, but can’t figure out how to incorporate ?view=upcoming with the category code. I’ve tried multiple ways and can either see the events for a category or the upcoming events list, but not both. Any advice?

    Like

  3. Thanks so much for this tutorial it was extremely helpful for our office!

    Like

  4. Is there a way to do this in a Facebook group?

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: