You can haz Austin Tech Events Widget without WordPress!

Not too long ago I posted about the Austin Tech Events Plugin for WordPress. Several folks asked me how to install it sans WordPress or in a older version of WordPress that doesn’t support widgets. Well I’ll tell ya’.

Step 1. Download the latest version of the Austin Tech Events widget and upload it to a subdirectory on your site.

Step 2. Go get yourself a Google GDATA API key here.

Step 3. Add the following code to the head section of your site. Note the sections in red. You need to add your Google API Key and be sure to change the paths below to reflect where you uploaded the Austin Tech Events widget folder.

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOU GOOGLE API KEY GOES HERE"></script>
<script type="text/javascript">
	var calendarURL = 'http://www.google.com/calendar/feeds/i8m14fqigtkhpj744qml1vht920bq5j0%40import.calendar.google.com/public/full';
	var pageMaxResults = 15;
	var parseWiki = true;
	var showNav = true;
	var weeks = null;
	var widgetListSize = null;
</script>
<link type="text/css" rel="stylesheet" href="http://example.com/wp-content/plugins/austin-tech-events-calendar/css/thickbox.css" />
<link type="text/css" rel="stylesheet" href="http://example.com/wp-content/plugins/austin-tech-events-calendar/css/style.css" />
<script type="text/javascript">
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
			if (oldonload) {
				oldonload();
			}
				func();
			}
		}
	}
</script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/austin-tech-events-calendar/js/date.js?ver=alpha-1"></script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/austin-tech-events-calendar/js/jquery.js?ver=6124"></script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/austin-tech-events-calendar/js/thickbox.js?ver=3.1"></script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/austin-tech-events-calendar/js/wiky.js?ver=1.0"></script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/austin-tech-events-calendar/js/functions.js?ver=0.85"></script>

Step 4. Add the following code to body of you page. Place it wherever you want the widget to show up.

<ul>
	<li id="austin-tech-events" class="widget widgetWPNGCalendar">
		<h2 class="widgettitle"><a href="http://door64.com/event">Austin Tech Events</a></h2>
			<div id="wpng-cal-widget-events" style="display:none;"></div>
			<div id="wpng-cal-load-widget" class="wpng-cal-loading">
				<img class="wpng-cal-image" alt="loading..." src="/wp-content/plugins/austin-tech-events-calendar/images/loading_large.gif"/>
			</div>
		<div>
			<script type="text/javascript" defer="defer">
				widgetListSize = 5;
				addLoadEvent(loadCalendarWidget);
			</script>
		</div>
	</li>
</ul>

That’s all there is to it. Check out the example I created of the Austin Tech Events Plugin installed on WordPress 1.5.2. Proof it can be done! 😉 The biggest disadvantage to this approach is that you won’t be notified of code updates like you would on a proper WordPress 2.5 widget install.

Let me know if you have any questions!

4 thoughts on “You can haz Austin Tech Events Widget without WordPress!

  1. That’s an awesome solution Colin! One cool thing about doing it the way you’re suggesting, is it happens server side. Which is great for SEO.

    On the widget you can see the event dates in the form of “Today,” “Tomorrow,” etc. Is that what you’re talking about?

Leave a Reply

Your email address will not be published.