One of the things my wife and I enjoy about Facebook is the interactions with all of our friends and family who are using the service. So, when I finally got around to redoing our personal site – Kris and Cindy – I wanted to find away to integrate with Facebook for comments and other features.

Enter Simple Facebook Connect

Two years ago, for something like this, I would have dove head first into the Facebook API and tried to build it myself. Nowadays, however, now that I’m very limited on time and totally drinking the WordPress kool-aid, it was just a matter of finding someone else who’s already done this.

After a few quick searches, I found the Simple Facebook Connect series of plug-ins that seemed up to the task. Sure enough, it delivered.  It was a little cumbersome at the very beginning, but only temporarily until I played around with things. That was due, in part, because the entire series consists of 15-16 separate plugins, which you don’t typically see in 3rd party plugins.

The reasoning behind it, however, is pretty clever because features are then modularized so you only end up switching on the ones you want. To start, I activated the following plugins:

• SFC – Like Button
• SFC – Comments
• SFC – Login
• SFC – Register
• Simple Facebook Connect – Base (Required)

I’ve played around with a few others, but they don’t currently fit the needs for this site at the moment. However, once I work on updates to Maui by Photo, there are certainly other aspects I will be using.

For Now…

The “For Now” portion of the post title is in reference to the announcement that Facebook Connect is going away now that the new Open Graph API is taking over. The good news is that Otto, the author of the Simple Facebook Connect, will be working towards a 1.0 release of the plugin that will support the new API. Sweet!

Check it Out

If you want to see it in action, go ahead and visit Kris and Cindy and see how it looks. If you don’t see something worth commenting on but still want to test it, try it with this post.

If you want to see more from Otto, head over to his website or visit his Facebook page, of course.

Be sure to check back again when I have updates to Maui by Photo for more samples of this awesome plugin suite.

- Kris.

Part of my recent blitz to update some of my websites and blogs – this one included – was a complete overhaul of the Kris and Cindy website.

The site itself was a neat idea and came together rather quickly, but before long it stalled out. The main problem at the time was I was spending too much time playing with all the cool code I was writing behind the scenes and not focusing on keeping up with the content.  I do that sometimes, you know.

Anyway, I scrapped the entire site and finally moved it over to WordPress with a nifty little theme Cindy and I found during lunch. It still needs a few tweaks to be called final, and I have to add back some of the static pages and definitely the photos, but that will come.  I kept the old site and code and moved it over to http://oldkc.krisandcindy.com for now, just in case.

Facebook Anyone?

Seeing as though Cindy and I spent our fair share of time on Facebook with our friends and a few family members, I thought it would be interesting to try introduce a little Facebook Connect integration via the Simple Facebook Connect plug-in for WordPress. That way, our friends can just post their comments without having to enter their name, email, etc. like on a normal blog.

I like the concept, and plan to share more details here on the blog and perhaps in corporate it into a few other blogs in the near future. The delay, however, is that shortly after I added these plug-ins to the blog, Facebook announced that Facebook Connect is being phased out. Bummer.

The good news is, however, the developer of the plug-ins I’m using is already actively updating to the new API changes from the Facebook team, so the impact should be minimal.

More Updates to Come

I mentioned that adding back some of the static content to the site is next on the list. In addition to reworking Kris and Cindy as well as this site, I’m also hacking away at the next version of kris.nelson, which is why you don’t currently see it listed in new Portfolio section on the site’s home page. Hopefully it will be up there soon.

Well, tomorrow I go back to work after having this past week off. Time to get back into my normal routine, but before I do, I wanted to recap a few of the things I crossed off my list from last week.

I didn’t make any direct progress on implementing my first Facebook application that I hinted at last week. The first stop at the bookstore last week came up empty in terms of finding a FB development book, but the latest trip this weekend was a little more successful. While I didn’t purchase the book, I thumbed through it enough to see that it was covering Facebook Application Development with Rails. 

While the Kris and Cindy site still remains in a dormant state, I did manage to move it to the new web host yesterday and perform a little bit of housekeeping on the site.

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.