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!

This entry was posted in Random Thoughts & Going Ons and tagged , , , , . Bookmark the permalink.

4 Responses to You can haz Austin Tech Events Widget without WordPress!

  1. Thanks! Good tutorial. Can you make it display event dates?

    I just use the RSS feed. Just take the feed from the calendar page:
    http://door64.com/event/2008/04/29/feed/all/all/
    Take out the date:
    http://door64.com/event/feed/all/all/
    And add it to your blogger/whatever as a feed.

  2. Dusty says:

    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?

  3. Pingback: Austin Tech Events Calendar WordPress Plugin - Dusty Reagan

  4. monsur says:

    Hi Dusty. Nice post! I just wanted to let you know that the url to get a GData API key was going to be changing soon. You might want to update this post with the new url:

    http://code.google.com/apis/gdata/signup.html

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>