Site Meets Blog

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.

About Kris

Programming since age 14, professional software engineer Kris Nelson practices his life motto of "Never stop learning" by developing websites and Apps around his passions, while staying current with trends in technology and social media.