Gold Plated Blog Posts

Whatev.

• Topics:
• Picasa
• India
• Bumper Stickers
• Travel

Google is my CMS

I recently had a friend who needed a website for the high school football team he coaches. To help him out, I came up with a pretty inventive solution that suited everyone's needs. Maybe the solution is right for you too.

The site didn't need to be very complicated- no need for user logins or dynamic content- but it needed to be updated frequently. Neither of us wanted to get into a situation where he would come up with an update but have to send it to me to put it on the site. This would create unnecessary lag time and more ongoing work for myself than I wanted. Giving him access to a server where he would have to update HTML pages wouldn't work because Coach doesn't know HTML. So based on my experience with Blogger, I decided to create a Blogger account for the football team, which allows Coach to update the site whenever he wants. Using the API, though, I piped the content of the blog to different pages on the team's website so that you would never know it was a blog. The end result is ClevelandWarriorsFootball.com (thanks to Chris Fenison for the site design).

A typical blog would just display the most recent posts or list them by label. As you can see, this one is much different. Each page on the site grabs a single article by label and displays it inside a div. The home page grabs the most recent article labeled "home", the Contact page grabs the most recent article labeled "contacts", and so on. Things like Posted Date and Author aren't displayed, just the title and content. Take a look at the site's actual Blogger page (which I may take down at some point to maintain the "magic") to see that it's really just a normal blog. And it was doable in just a few lines of code thanks to Google's API.

Other Google services were also useful. The Offseason Schedule is just a Google Calendar inside an iframe, and the Pictures section is (or will be soon) content from the football team's Picasa account (using the Lightweight PHP Picasa API of course). We tried the rosters and other schedules as Calendar and Spreadsheet entries respectively but ultimately decided that using Blogger gave a cleaner look and more control over the data.

Google, and Blogger in particular, makes a great alternative to a very simple CMS or database solution. It offers a great user interface for creating new content- including formatted text, images, and video- along with a very flexible API for integration. It's a perfect solution for giving non-technical users power over their content while keeping you out of the loop. Now if only the team can live up to the site :P Go Warriors!

Getting the Most From Your Blog

I started out back in May with a blog that accessible on Blog*Spot at cameronhinkle.blogspot.com. Well, that wasn't quite cool enough. I didn't like the URL and I definitely didn't like that ugly blue bar at the top of every Blogger blog. Additionally, I wanted a central place for all my stuff. I wanted cameronhinkle.com to not just be a blog, but to be a place where I do whatever I wanted. This is when I started looking into Blogger's API.

Hopefully you can tell by reading this blog that using Blogger's API has worked pretty well. In fact, because I'm not hosting the blog on Blogger's servers, I have a lot more flexibility with what else can go here, which is why you can also browse my Picasa collection as well as static HTML content. I basically enter my blog posts using the standard Blogger interface, and then when you browse cameronhinkle.com it polls Blogger's servers to get the latest content. While this has worked out really well, there have been some obstacles. If you're thinking about doing this yourself or you're already doing this same thing, maybe this will clear up some of the obstacles.

Duplicate content at your old address

I was not happy about having my blog displayed both at cameronhinkle.blogspot.com and cameronhinkle.com. This is bad for SEO and makes cameronhinkle.com look redundant. I initially solved this by deleting the "Blog" widget from my template and replaced it with static text linking to this site. This worked okay, but it still left cameronhinkle.blogspot.com as an active site and Blog*Spot's RSS feeds still came up in search results. Since the RSS feeds don't link back to cameronhinkle.com, I found this to be a problem.

Blogger has a cool feature that allows you to host your blog on their servers from a unique address. You tell Blogger in your Settings->Publishing tab that you want to host your blog from a custom URL, then you configure your site's DNS entry through your registrar to direct requests for the custome URL to Blogger's servers. Well, I didn't want to host the site on Blogger's servers, so I didn't think this custom URL would work for me. As it turns out, I could configure Blogger to think my blog is at cameronhinkle.com and then just not change my DNS entries. Blogger will then forward all requests for cameronhinkle.blogspot.com to cameronhinkle.com. I did some research using wget and found that it's doing a 301 redirect, which transfers all the PageRank from cameronhinkle.blogspot.com to the cameronhinkle.com. However, there was one small problem...

Paths restricted in custom URLs

My blog is hosted at cameronhinkle.com/blog, which is a path rather than a domain or subdomain. I attempted to put cameronhinkle.com/blog into the Custom URL field of Blogger's Publishing tab, but it wouldn't accept it because it only accepts domains or subdomains. Initially I just lived with the old URL redirecting to cameronhinkle.com, but then I had a better idea. I set up a subdomain called blog.cameronhinkle.com that does a 301 redirect to cameronhinkle.com/blog/. Now any requests to cameronhinkle.blogspot.com will get redirected to blog.cameronhinkle.com, which will in turn link to cameronhinkle.com/blog/. Try this out in Linux if you can by typing the command "wget cameronhinkle.blogspot.com".

Pinging services

You've probably all seen the option to "Send Pings" in Blogger's Settings->Basic tab. This is an important feature, as it alerts several blog services that you have new content. It can be extremely useful in driving visitors to your blog. Unfortunately, since I enter posts into Blogger.com (I have no interest in using Blogger's API to enter new posts since it's not visible to anyone except me and Blogger's interface is just fine), I there was no event on CameronHinkle.com that could be triggered and send off a ping. Additionally, maintaining the list of services to ping and how to ping them is something much better left to experts at Blogger, if at all possible. Unfortunately, before I had set up the configuration described above, Blogger would ping services with an update for cameronhinkle.blogspot.com, but it didn't know about cameronhinkle.com. Since implementing both of the above steps, Blogger knows my actual address, so it will correctly send out pings. Just doing the first step left Blogger sending out pings for cameronhinkle.com (which was okay), but doing step two correctly got Blogger to send pings for blog.cameronhinkle.com. Because of the redirect I set up, this works perfectly.

Blog*Spot RSS Feeds

I often found my blog contents in BlogSpot's RSS feeds, which I did not want. Their feeds would only direct users to cameronhinkle.blogspot.com, which would just be a link to cameronhinkle.com and that wasn't good enough. Even after doing the steps mentioned above, the RSS feeds would have the wrong URL structure; it would link to cameronhinkle.com using Blogger's URL structure because it had no idea I had created my own URL structure. I had already created my own RSS feed using PHP, which is the one I would really like users to find. To remedy this, I used Bloggers "Post Feed Redirect URL" option. It's supposed to be for FeedBurner or other similar services, but it works for this as well. Now Blogger thinks my RSS feed is at http://www.cameronhinkle.com/blog/rss/, which is where it should be.

Comments

There is not, as far as I can tell, a great way to actually incorporate posting comments through the API. Retrieving comments is easy enough, but posting comments requires that all users first log in to Blogger. I don't anticipate a lot of comments so I would really rather that users can post anonymously and I can moderate any spam posts, etc. I did some digging to try to figure out how Blog*Spot does posting to see if I can reverse-engineer it. I found that all blogs on Blog*Spot actually do their posting through Blogger. I think this is for security. To check it out, post a comment on any Blog*Spot blog and you'll see that the page where you enter your comment is hosted at Blogger.com. So given this fact, I didn't mind if comments on my site were entered through Blogger. To make it as seamless an experience as possible, I got the URL for posting comments through Blogger, which is https://www.blogger.com/comment.g?blogID=YOUR_BLOG_ID&postID=YOUR_POST_ID&isPopup=true, and made a link display after every blog post that opens a popup to that page. Specifically, the link says this:

<a href="https://www.blogger.com/comment.g?blogID=YOUR_BLOG_ID&postID=YOUR_POST_ID&isPopup=true" onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=550"); return false;'>Add a comment</a>

I took this link straight from another Blog*Spot blog and this ensure that it opens to the correct width and with the correct javascript values set. Now users can comment on any blog post and each comment is displayed through the API (which is, as I said, easy enough to do), but new comments are added through a popup hosted on Blogger.com. So the popup doesn't look like CameronHinkle.com, but this way users can easily login if they want or post an anonymous comment.

Future upgrades

The one thing that I think I'm still missing here is that sometimes I'll find cameronhinkle.com/blog in search results with Blog*Spot's URL structure appended to it. This is a result of Blog*Spot thinking that I'm hosting it on their servers at a different address. So the future enhancement will be to make my site's PHP engine correctly interpret paths from Blogger. The more I look at this problem, the more complicated it could potentially be. I think I will probably settle for a "close enough" solution. That may still be several weeks off.

Learning how to do all of this has been a really rewarding experience because I'm proud of the final outcome. I feel like I have a site that is really easy to customize and an interface for entering blog posts that is I never have to think about. Hopefully these tips will stop someone else from having to do all this research themselves. If anyone has any other good tips, please feel free to let me know!

Fin

Well if you weren't viewing this at cameronhinkle.com before, you certainly are now because that's all that's left. Now that I've added an archive section, there's no need to host the site on Blogger. I'm not sure how Google will feel about this; I don't see a negative side for them because it's not like they have any advertising on my site. Also the burden of all the continuous gigabytes of traffic running through my site per day has got to be a weight off their servers :-) Anyway, I've added a link to them just in case at the footer of the blog.

I think this system will work out really well for me. I can still use Blogger's slick text editing tools for writing blog entries (I don't really feel the need to go through the trouble of creating my own blog-entry feature) and I get the whole blog integrated with the rest of my website. Unfortunately, a pretty big design flaw sort of appeared to me today when I implemented the archive. I resolved it reasonably, I think, but if I want to change the formatting of the archive, it becomes significantly harder than it should be. I'll work with it the way it is for a while and try to come up with a better solution. I foresee it being a bigger problem when I start to work out the other sections.

Speaking of other sections, my next goal is to integrate my Picasa account into the Pictures section of the site. It's great because it works with similar Zend engine classes for PHP so I don't think there will be as much of a learning curve. I can't decide when I'm going to start it...I'll probably work on fixing up some of the blog's functionality before going there, mostly because Metroid Prime 3 comes out in a mere 5 days and I just don't want to be thinking of one while spending time with the other :-\

Behold, CameronHinkle.com!

The time has finally come for me to have a legitimate personal website, which you can now find at www.cameronhinkle.com. My previous site, which I created to get a job, was at cs.pdx.edu/~cch/. I put a lot of work into it but at the time, I didn't realize what had happened in the 6 years since I had made a website (what is...."css"?!). So now that I'm a little more up to speed, I've created a whole new layout and new site. I've been reading a lot of books on web design, CSS, XHTML, and useability so hopefully it shows in my new layout.

Of course now I need to consolidate. I've got a blog here and a website there, so my next project is going to be to somehow get this blog to look like the new site. I spent the evening figuring out how to do that. After hours of struggling, I decided to take all the CSS from my current site and paste it into Blogger's template box and it is closer than anything I've come up with so far. I'm trying it out on my other Blogger account so take a look at if you're curious. I hope to have it finished soon. In fact, I hope to have the whole website finished soon because starting August 27th, I'm going to be sitting in front of my television playing with my Wii for a really long time. I stopped at GameStop to get a copy of Sonic for Debbie (which she is surprisingly good at!) and asked the clerk when Metroid Prime 3 was due out. To my complete shock, he said it was a mere month away. That made my day.

On a side note, the fact that I did not know when Metroid Prime 3 was coming out- especially given that it was a month away- says a lot. Save about a 1 year phase in high school, I was the most knowledgeable Nintendophile I knew. There's part of me that's a little disappointed, but there's also a big part of me that is happy. And just think, if I hadn't spent that fourth year at GameStop, I might still be trolling the System Wars Forums every day. So thank you to GameStop for helping me quit cold turkey.