Embedding Events in Your Own Sites
The Ottawa Events site is doing pretty well; it’s fun watching a new website start up as users discover it and start using it. Seeing the first search hits from Google, MSN, Yahoo.
One thing I want to do with this site (and the instances of this site that exist for other communities like Brantford and Woodstock) is make it more of a community resource than just a standalone site. One way I want to do this is by helping promote the events that people post.
To do this, I’ve created a way for a site to embed event listings in their own site. If you look at the front page of my blog, you’ll see down on the bottom right side that there’s a quick summary of the next 4 upcoming events in Ottawa.
The way I did this is by embedding a small piece of JavaScript in my page template:
<h3>Ottawa Events</h3>
<br />
<script
language="JavaScript"
src="http://www.ottawaevents.org/EventBar.aspx"
type="text/javascript">
</script>The important bit here is the <script> tag. Including this in your own page will embed a call to this URL. Click on that link and you’ll see that what I’m sending back is actually JavaScript code that has a number of calls to output the event text.
Doing it this way makes the events text part of your own page – meaning that your style sheet applies. This lets the event text appear to be a part of your own site, rather than something sitting in an island by itself like something in an iframe would be.
The styles I send back are “events”, “event”, “eventlink”, “eventbody”, and “eventdate”. I’m not much of a web designer, so it will be interesting to see what folks do with this.
If you want to include more or less than the 4 entries that are there by default, then add a NumEvents parameter to the URL. If you want more or less than the 200 characters maximum summary length per event, then include that by sending a MaxBodyLen parameter. If MaxBodyLen is 0, then you get just the event names and dates.
Since I want this to be a community resource, events are designated as commercial or not. The only events that show up by default are events that are noncommercial; if you want to include all events (even things like big stadium concerts and the like) then set the AllEvents parameter to 1.
If you do add this to your site, or have any questions or suggestions, please let me know.