Jump to content
Troy

Spuds How To - Teaser Spuds and Calendar Spuds

Recommended Posts

Spud Developers,

 

I'm writing this post in response to the many developer postings on how to properly embed teaser Spuds on their pages. It's very possible and intended to have the Trumba teaser spuds and calendar spuds on separate pages or together. The DateFinder Spud, like the Upcoming and Crawler Spuds are what we call teaser Spuds. These Spuds are meant to be placed on a home page or other part of your site that advertises your latest events. Typically these advertising pages do not host the calendar Spud. The calendar Spud wants to be on a different page we will call the calendar page. Let's use the Museum of Flight as an example in my code below.

 

Each of our teaser spuds works by jumping from their advertising page to this calendar page. You, the developer, need to communicate what page hosts the calendar Spud using the trumba_teaserBase JavaScript variable. This variable must be present and defined before any teaser Spuds on your advertising page. It also needs to be a fully qualified URL pointing to your calendar page. Some people get confused about what URL to use because of our sample code shown in the calendar Publish pipeline. Our example code show the trumba_teaserBase variable set to the hosted Trumba page for the calendar, e.g. http://www.trumba.com/calendars/themuseumofflight. We do this to guarantee that the teaser Spuds will work but it's up to you to change it to your own web site's calendar page. Otherwise you'll end up jumping to Trumba's hosted version of your calendar, not your own web sites. The Museum of Flight hosts their own calendar page at http://www.museumofflight.org/Display.asp?Page=NewsCalendar. We'll use this below.

 

As our example let's create a page full of our teaser Spuds. This should illustrate how to embed the teasers properly in your own site. The HTML code below is a very simple page that properly defines all 3 of our teasers. When any event is clicked on the teasers will jump to the Museum of Flight's calendar page. Check it out by copying and pasting this code into a local HTML file on your computer or web site then opening it in a web browser.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Home Page</title></head>
<body>
<p>Museum of Flight Teaser Page</p>

<script type="text/javascript">
var trumba_teaserBase = "http://www.museumofflight.org/Display.asp?Page=NewsCalendar";
</script>

<div style="width:100%;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=crawler" />
</div>
<div style="float:left;width:200px;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=datefinder" />
</div>
<div style="float:left;margin-left:10px;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=upcoming" />
</div>
</body>
</html>

 

When you select an event the Spuds communicate which event was clicked by passing a trumbaEmbed parameter on the URL. Clicking an event whose ID is 48203094 would cause the following link to be executed:

 

http://www.museumofflight.org/Display.asp?...%26view%3Devent

 

Now that we've defined a teaser advertising page what about the calendar page. Can you embed these same teaser Spuds on the calendar page? Yes, this is completely supported but there's a caveat. You need to make sure you do not have a trumba_teaserBase variable defined on your calendar page. Doing so will cause the teaser Spuds to act as if they were on the advertising page and do a full jump. This greatly reduces the effectiveness of our AJAX loading mechanism and significantly slows down your calendar page.

 

Below is a simple example of a calendar page that hosts the Museum of Flight calendar as well as our 3 teaser Spuds.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Home Page</title></head>
<body>
<p>Museum of Flight Calendar Page</p>

<!-- Crawler across the top -->
<div style="width:100%;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=crawler" />
</div>

<!-- Left column with DateFinder and Upcoming Spuds -->
<div style="float:left;width:200px;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=datefinder" />
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight&widget=upcoming" />
</div>
<!-- Right column with Calendar Spud -->
<div style="float:left;width:500px;margin-left:10px;">
	<script type="text/javascript" src="http://www.trumba.com/k.aspx?calendar=themuseumofflight" />
</div>
</body>
</html>

 

That's it. I hope these examples help people when trying to embed our teaser Spuds on their pages.

 

-Troy

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×