Continuing with my incessant curiousity and experimenting with 3rd party APIs and integrating them into my websites, I’ve made noticable progress lately working different aspects of my various blogs into the actual websites they complement.

The Beginning

Long before I started worrying about writing content, the majority of my web development was writing code. Lots of code. HTML, Javascript, PHP, SQL, XSLT, you name it.  And all was good.

Much of my self learning of the PHP scripting language came from working with a much older version of a community forum system which is now called XMB. The open-source software package also came with a nice user group that was always making enhancements and upgrades to the code, from the people that were using it. I even made my own contributions as well, which was both fun, and yet also a little daunting with the support and feature requests that I couldn’t keep up with.

Anyway, this was all for the Nighthawks Hockey Online, which at the time had a distinct set of code and database tables that was running the site itself and one running a modified version of the community forum. In an effort towards a more unified user experience, I spent close to a  year (in between times when I was actually coaching the team) methodically picking apart the code from the site and the forum and merged all the functionality of the user forums to be shared throughout the site itself. A single login, single user profile, and tons of features both from a message board perspective and everywhere else on the site.  It was pretty fun to do.

The Now

I don’t want to say that user forums aren’t as popular as they were a few years ago, but there is certainly a new kid on the block.  The blog. And so, I found myself again in situation where I haddistinct code and functionality with my standalone websites and the blogs that accompany them. Was I scared? I think not.  Was it hard?  Not at all.

Probably a little overdue, I just recently started getting around to integrating some of the blog features and content into my sites themselves.  All of my blogs currently run on Blogger in FTP Publishing mode.  In this setup, I create a template for how I want my blog to look, usually by reconstructing the main style elements and layout of the site I’m matching. I then use the Blogger interface to author all of my blog posts and when I’m finished, Blogger merges the posts to the template and publishes the files to my web host. This model has its restrictions, as well as causing a few headaches from time to time, but as you can see, it’s worked pretty well for me so far.

My Site/Blog Integrations

By using Blogger, I also have access to my blog and post information using the Blogger Data API. At the moment, I’m only using it for retrieving content and not writing or updating data, which makes it very easy to use. In fact, calling just the retrieving portion an API is somewhat of a generous term, because really I’m just formatting URLs in a way that returns post and comment data in a standard Atom format.  Very easy.

I’ve currently integrated my blog content into my main sites in 4 different ways, as described below.

1. Recent Posts Sidebar using AJAX

The first thing I did with the Blogger Data API was to include the 3 most recent posts in the sidebar navigation on the home page of Ka’anapali Dreamin’. Since this part of the home page changes frequently (with each new post), I wasn’t as concerned as building it into the page in a way that it would be crawled by search engines. This made it a prime candidate for some client-side AJAX to grab the site’s current Atom feed and parse through the last 3 entries to display as links. 

Technically, I’m not using the API here, but I’ve been meaning to update this code to use a filtered API request to retrieve only the last 3 posts and not the entire feed. That would save quite a bit of data needing to be downloaded, thus making it faster. I also will be updating this script to use the Google AJAX Feed API instead of my own custom request handler to fetch the feed. I started using the AJAX Feed API for my blogging calendar, and while I still have a few cache issues to work through, it should be fine for this purpose.

2. Recent Comments per Page Topic

There are many pages at Ka’anapali Dreamin’ that also have a blog post or two associated with them, and I wanted to display the comments from that post on the page on the site. Here’s an example, the beach page for D.T. Fleming Beach, which is associated with the blog post, Sunday Photo: Waves at the Beach. By grabbing the PostID number from Blogger for that post, I’m able to construct a URL to retrieve the comments for just that post in an Atom XML format. By parsing that XML with a little PHP code and, I have blog comments on a regular ol’ site page.

3. Category Pages

Now it gets very interesting, and the benefits of blogging become very clear when having a website, and this type of integration helps to further blur the lines between them.  Here’s an example scenario, also from Ka’anapali Dreamin’.

Separate from the blog altogether, the site already has a News section. This section leverages various RSS feeds from different providers to display recent new stories in one place (with full attribution and links to the original content, of course). Meanwhile, at the blog, I also like to feature individual news articles I find online, adding my own commentary and having discussions with readers about things happening on Maui and elsewhere in Hawaii. 

Out of the box using Blogger, I can just tag each article with a given label, such as I have done with the label “News”.  Blogger then automatically creates a category page for each label, and features all the posts for that tag.  You can see here all the posts that are labeled News. As you can see, in a standard blog view, it’s not very easy to navigate. Since I’m using the FTP Publishing mentioned earlier, I don’t have the option to offer paging or things like other blogs have.  All my blog pages are static HTML.

Luckily, I was able to use the Blogger Data API to request a list of posts with a given label, and retrieve them in, you guessed it, a standard Atom XML format. Cutting to the chase, you can see that I added a News Articles page to the previously mentioned News section to show abstracts of the 3 most recent blog posts labeled News, and using a list at the bottom for older posts. By doing so, this blog content is featured within my existing site hierarchy, and I just have to link back to the posts on the blog for the full version. Nice!

I’ve also followed this model for adding a Travel Traditions page on our site, that features posts from a blog series that shares the same name. Now, new visitors browsing through our site can find these pages, never even needing to know there is a blog power the content.

4. Recent Posts on the Home Page

The last integration example I have is from the home page of Kris Nelson Photography. It features similar recent post information as the sidebar example above, as well as the abstract view from the previous model. Since I don’t post on Kris Nelson Photography as often as the other blogs, I wanted to keep this content as part of the web page itself (rather than using AJAX) so it would welcome readers as the page loads and it would be picked up by search engines.

I’ve been toying with similar plans to do the same for Ka’anapali Dreamin’ during the next redesign of the site.

What’s Next

The next big use of this integration is going to be in the site redesign on Kris and Cindy, whenever I get around to it.  The site itself has been in need of an overhaul for some time now, while the blog itself is more active than ever.  Initially, I would like to work in the recent blog posts into the site’s home page, and then from there, probably break out into more of the different category pages and organize things that way.  It will likely take a good deal of effort, but it should all be worth it.

The Conclusion

Hopefully these examples offer some good ideas on the purpose and benefits of integrating blog content into an existing website. I think as that line between blog and traditional website continues to blur, and with micro-blogging sites like Twitter openning up their APIs to further integration on the web, the concept of just a standalone website will be even more rare than ever. Very exciting stuff.

Next week is going to be the second year in a row that I get the entire week of Xmas off, which is giong to be very nice. Since I haven’t been skating as much I as want to, that leaves me with more time for working on different site updates and projects during that week.  Now, the only issue is deciding what to work on!

I’m looking for a few iGoogle users that are interested in helping me with beta testing my new, Maui Photo Calendar Gadget. This is the first Google Gadget that I’m looking to publish for public use, so I want to try and do as much due diligence in testing as I can. And alas, I can’t do it alone.

The good news is that it is a really simple gadget. All it really does is just determine the current date (one small gotcha in a minute), retrieves a daily photo and details from my Flickr account, and put it all together in a layout as you see here. Maybe it’s too simple and I’m only being paranoid about pushing that final “publish” button, but better safe than sorry I guess.

There is one custom setting, though, that might not seem necessary, but I wanted to point it out. There is a Timezone Offset setting that will trigger the gadget to know when “midnight” is and flip to the next day. I know I could use a little JavaScript to detect and retain the timezone information with a cookie, but I wanted to limit the moving parts involved, at least to start.

What To Do
If you would like to help, the first step is to accept my thanks. I appreciate it.

Next, you just need to add the gadget anywhere on your iGoogle homepage. Just copy this url to your clipboard and click on the Add Stuff link on the iGoogle tab you want to use. When you click Add Stuff, the following page will have an option in the bottom left of the page that says “Add feed or gadget”. That’s where the url from above goes, and you’re all set. You’ll get a message saying that the gadget wasn’t created by Google (obviously).

What Else
Just kick the tires and let me know what happens. Once you add it to your iGoogle homepage, it will show up anywhere you login. I have been trying it with a few different machines, displays, and browsers, so that’s really all you can do as well. I know you can use these gadgets in other locations, and while I haven’t gotten to trying that, feel free to do so if you’d like. It’s not required, though.

If you experience any issues, such as error messages, timeouts, size, cropping, alignment issues, etc., you can post them here as comments, use the contact form, or send me a note on Twitter. Also, if you like it, have suggestions, or anything else, all feedback is welcome.

Timeframe
I’m not looking for anything long term from a testing period, probably a week at most. I’m also using Google Analytics to track the usage of this gadget, so that will help me gauge how much traffic its seeing and where I want to go from there.

So, thanks again for reading and if you decide to give it a whirl (now or when it’s published), a big Mahalo.

What an afternoon of random ideas.  During a rather slow drive home from work, I started thinking about new site designs for Ka’anapali Dreamin’ and came up with a few goodies.  After some quick browsing for inspiration and a handful of pencil sketches, I arrived at something woth throwing together in Photoshop.

Getting ready to fire up the laptop, I soon became distracted by yet another idea while looking at one corner in my office at home.  You see, I have been a fan of the Islands Gallery Day Calendar for a few years now, and whenever I come across a day that features Hawaii, I put it on my wall.

As you can imagine, one would gather quite a few of these over the course of 3 years (I’m counting 39 so far, with a few of them practically duplicates).  And in all of that time, I had yet to think of using my own photos to create an online version.  But for whatever reason, today I did.

I’ll probably have a working prototype up by the end of the night, and then I’ll see if I’m still as excited tomorrow about having to go through all those photos.

I haven’t made a lot of changes to Ka’anapali Dreamin’ recently, with all the work I’ve been doing on Kris Nelson Photography and kris.nelson taking most of my spare development time.

I did make some minor tweeks this morning, however, by rearranging and updating the home page just a little. I added a preview of the daily Is It Maui? game in the upper right hand corner to add a little bit more “above the fold” and also added an update to the top story on the page. The next step there is to add a quick goal setting in Google Analytics to see how effective that change will be in getting more visits to that page on the site.

Nothing terribly large as you can tell. I am toying with a few more drastic changes with the site that I’m sure I’ll stop putting off someday and jump on. The first has to do with the homepage again, and consolidating the “Site Sections” content area into a rotating and/or tabbed display to show one at a time and add a little animation to jazz it up a little. I’d also like to work on getting more of the recent blog updates on the home page, too, besides just the list of posts on the sidebar.

The other change I’m considering, and will make eventually, is updating the site template. Whether it’s a full redesign or just an expansion, I don’t know yet. What I do know is that the current site design is using a fixed width layout assuming an 800px screen resolution. With monitors being much larger than they used to, and with less than 5% of my visitors having a resolution of 800×600 (thanks to Google Analytics again for that number), it’s time to add a little bit more breathing room and expand it to a layout that is based on a 1024px screen resolution (35% of the site’s visitors, in case you were curious).

I currently use Dreamweaver CS3 and their support for templates, so that should help with updating the 100+ pages on the site, which doesn’t included the blog posts. Unfortunately, I do have 10 different page templates to accommodate different page layouts, so there’s some work there and maybe the chance to consolidate a little bit. Then, its a matter of retesting all those pages and making sure I don’t have float issues or things like that (plus, I never really did a regression test once Chrome came out to see how my site works there).

After I update the layout, then I get to play with those extra 200px!!! I have plans to expand the Maui Island Guide map section, which seems a little cramped at 800px right now, and then work on building out a map and details section just for the Road to Hana (with all my geotagged photos and stuff). I really need to go back and clean up the Photo Gallery as well, adding a better layout and using more of the Flickr API integration and probably more user interaction like I did with kris.nelson using script.aculo.us. Also, maybe some Google Map integration like I did on the Ka’anapali Beachwalk Photo Tour. And then, there’s the videos, but I won’t go there right now.

So as you can see, I have my sights set pretty high on the next set of enhancements for Ka’anapali Dreamin’, and it’s really just a matter of finding time to get it all done. It’s going to be a lot of work, and I’m sure I’ll need a nice, relaxing vacation afterwards. Hmm, I wonder where I’d go…

In any case, that’s where I’m at with this site. If you have any thoughts or comments, please share. I’m always interested in what others have to say and try to accommodate what my sites’ visitors are looking for. After all, that’s the point, right?