Embedding Publisher Spud Code in Websites

Click here to view related articles.
Pre-Publisher Cycle
Selecting a Security Framework for Your Publisher Environment
Building a Publisher Functional Security Group
Building a Generic Publisher User Account
Preparing 25Live Data for Publisher
Building Calendars Using Event Categories or Resources
Publisher Cycle
Creating Effective Searches for Publisher Calendar Feeds
Creating a Calendar Feed from Your Search
25Live Publisher: Customizing Your Calendar for Publication
           1. Working with Publish Settings for a Calendar
           2. Selecting and Styling Calendar Views
           3. Selecting and Styling Control Spuds
           4. Selecting and Styling Promotion Spuds
           5. Styling Emails and Feeds
Setting Up and Styling Event Actions
Configuring Custom Fields and Event Templates
Embedding Publisher Spud Code in Websites
Post-Publisher Cycle
Analytics in 25Live Publisher
Monitoring Published Calendars and Making Modifications to Existing Calendars
Additional Publisher Resources
Example Publisher Calendars
Displaying a 25Live Publisher Feed in an Outlook Calendar (Desktop)
Displaying a 25Live Publisher Feed in an Outlook Calendar (Office 365)
Displaying a 25Live Publisher Feed in Google Calendar
Matching Series25 Fields with Publisher Fields
Setting Up Disqus Comments and Facebook Comments on Your Calendar Spuds
Installing the 25Live SharePoint Web Part


Once you have completed the work selecting your calendar views and styling your calendar, you are ready to embed your publisher spud code on a web page. There are a number of considerations to make before you begin.


1. Determine Where the Calendar Will Reside

It is customary for the calendar view to have its own web page on the website where you may incorporate both the calendar spud, some control spuds, and possibly a promotion spud.  Once you have determined where your calendar will reside, you will need to edit the Publish Settings and provide the full URL to the new calendar location in the Calendar Address field.

2. Determine Which Other Calendar's Events Should be Included

To "mix-in" (or include) other calendar events on your published web calendar, check the appropriate boxes.

3. Decide if the Calendar Should be Searchable Through Internet Browsers

Complete the Search group of settings in the Edit Publish Settings dialog box. Recommended settings include:

Searchable: It is recommended that public-facing calendars set this item to Yes

Search keywords: It is recommended to include a (comma-delimited) list of words and phrases that would help people find your events. Keywords that match words that will be in the event title or the event description will raise the relevance of your events in the major search engines making it easier for people to discover them.  

Search Settings

4. Complete the Remaining Settings

Fill out the remaining Display Options and Email Settings fields.

5. Copy the Spud Codes That You Will Use in Combination on the Calendar's Web Page

You will need to copy the Main Calendar Spud code and insert it on the web page.  The Main Calendar Spud will drive your Available Calendar Views, your Event Detail View, your Popup Event Detail Spud, your Mobile Calendar View, and your Mobile Event Detail ViewMain calendar spud settings

In addition to the Main Calendar Spud, it is customary to make use of a couple of control spuds.  Remember that control spuds grant your calendar's visitors some control over the calendar.  The most commonly used control spuds include:

View Chooser Tabbed 

Used to grant the visitor the ability to switch between the different calendar views being served by the Main Calendar Spud.  If your spud provides for multiple different views (as most do), you should position this spud above the Main Calendar Spud.  Most campuses opt for the View Chooser Tabbed control instead of the View Chooser which is a drop-down list of calendar views.

View chooser tabbed spud script

View chooser tabbed spud preview

Month List 

Used to allow the visitor to jump forward or backwards to a specific month's events without having to constantly click the next and back buttons.  This control spud most often is positioned below the View Chooser Tabbed control spud and above the Calendar View spud.

Month list  spud scriptMonth list spud preview

Search 

Used by most campuses to allow the visitor to perform keyword searches for events on the calendar.

Search spud scriptSearch spud preview

Filter

For calendars where you want to guide the searching for events, you might deploy the Filter control spud.  The Filter is capable of filtering on virtually any data passed along via the feed.  You may review the earlier discussion of the Filter control to see its versatility.

Filter spud scriptFilter spud preview

Calendar List

Useful if you are building a top-level/sub-calendar or a mixed-in calendar.  The control will allow your visitors to remove the checkmark next to a calendar feed to remove those events from view.
Calendar list spud script

Calendar list spud preview

Date Finder

Promotional spuds are not customarily used on the same page as the calendar spud with one notable exception.  Many campuses choose to include the Date Finder promotion spud on the same page as their calendar spud; in those instances, you need to make sure that you check the box labeled Spud will appear on the same page as the main calendar spud.  The Date Finder promotion spud makes use of the Day Summary promotion spud so if you use the Date Finder, be sure that you style both spuds.

Date finder spud script


Date finder spud previewDate finder spud preview      

6. Note the Structure of a Calendar Page

A typical structure for most calendar pages presently is to have a left pane containing some of the calendar controls and then a right pane (the body region of the document) containing the Calendar View Tabbed control, the Month List control, and the Calendar View spud. 

The HTML markup would look something like the attached HTML file that you may download here,  A couple of things to note, each spud code is in its own container bounded by an opening (<div>) and closing (</div>) division tag.  Each of those divisions is referencing via the id element the campus web page's cascading style sheet and capturing styles to be applied to that particular division.  In most cases, this is positioning for these types of tags but it can include fonts if you are placing text and header text in between each of the control spuds.  Employ your campus's webmaster to assist you in inserting the spud codes into campus web pages.  In most cases, the campus is using a Content Management System (CMS) that will have procedures for inserting JavaScript code snippets.  Your webmaster will know how to navigate those issues and bring your calendar to the public.

Content Management Systems and JavaScript

Most campuses now use a content management system (CMS) to manage their campus website.  Each CMS handles the insertion of JavaScript differently.  Here are links to some major CMS providers used by campuses and their suggestions for successfully inserting JavaScript:

It is fairly easy to find information for other content management systems by performing a quick search of their support and user documentation pages.