Month: August 2010

If you’ve suddenly discovered the internet and decide the world needs your voice, there are several content management systems (CMS) a.k.a. blogging systems you can choose from. Some of the more visible & open source projects include WordPress, Drupal, Joomla. The ‘not so new’ contender on the scene is Habari. I’ve written and linked to articles talking about technical advantages of switching to Habari.

For me, I wanted the challenge of making a go out of this new and strangely beautiful content management system. It has been over 9 months since I switched and I’m feeling pretty good about my choice so far. 🙂 Without further ado, here are basic items that you need to ensure are in place before you move to that next-generation blogging system:

1. A reliable method for displaying your blog’s archives: I use the RN Monthly Archives for this purpose, but there’s the Breezy Archives plugin too.
2. A reliable way for viewers to contact you i.e. a contact form I use the Jambo plugin (it acts wonky in Chrome 5)
3. A relatively easy way to make sharing your blog posts easy: Currently, I do this manually by adding the code to my entry.single.php file which makes the Googe Buzz, Twitter Button and Facebook Like buttons appears on all my posts. The downside to manually editing your theme’s file is that if you switch themes, you’ll have to re-do the customizations over. However, there’s the Socialink plugin that automates this.
4. Spam fighting abilities: I currently use the Akismet plugin for Habari along with the built-in Spam Checker plugin. There are a bunch of other spam-fighting plugins, notably the Mollom plugin, Defensio, a simple blacklist plugin and others.
5. Basic file/image storage: the Habari media silo and other plugin implementations.
6. Optimizing your blog for search engine visibility a.k.a. SEO: Habari doesn’t yet have any good plugins for SEO like the All-in-one SEO pack for WordPress. However, there are always little thing you can do like adding alt tags to images, adding titles to your links, and more recently, I’ve re-used code from Andrew Rickman to make the title tags of my site display the post title (if you’re reading a post), page title (if on a page), the tag or keywords searched for. Granted, this isn’t the most elegant way of doing things, but you’ll learn and become better at troubleshooting & tweaking your theme! Further instructions below:
7. Step 1: Copy and paste the code with comments into your theme.php file.

   	/**
   	 * Return the title for the page
   	 * @return String the title.
   	 */
   	public function the_title( $head = false ){
   		$title = '';
   		//Copy Pasta from Andrew Rickman's ported theme, Dilectio http://www.habari-fun.co.uk/converting-wordpress-themes-to-habari-file-names
   		//check against the matched rule
   		switch( $this->matched_rule->name ){
   			case 'display_404':
   				$title = 'Error 404';
   			break;
   			case 'display_entry':
   				$title .= $this->post->title;
   			break;
   			case 'display_page':
   				$title .= $this->post->title;
   			break;
   			case 'display_search':
   				$title .= 'Search for ' . ucfirst( $this->criteria );
   			break;
   			case 'display_entries_by_tag':
   				$title .= ucfirst( $this->tag ) . ' Tag';
   			break;
   			case 'display_entries_by_date':
   				$title .= 'Archive for ';
   				$archive_date = new HabariDateTime();
   				if ( empty($date_array['day']) ){
   					if ( empty($date_array['month']) ){
   						//Year only
   						$archive_date->set_date( $this->year , 1 , 1 );
   						$title .= $archive_date->format( 'Y' );
   						break;
   					}
   					//year and month only
   					$archive_date->set_date( $this->year , $this->month , 1 );
   					$title .= $archive_date->format( 'F Y' );
   					break;
   				}
   				$archive_date->set_date( $this->year , $this->month , $this->day );
   				$title .= $archive_date->format( 'F jS, Y' );
   			break;
   		}
   		
   		if ( $head ){
   			return ( empty($title)) ? Options::get( 'title' ) : $title . ' - ' . Options::get( 'title' );
   		}
   						
   		return $title;
   	}
   

8. Step 2: Open up your header.php file and replace the contents of your title tags with the following:

    <title>the_title( true ); ?></title>
   

9. Save your code and refresh your page (and thank Andrew Rickman. :P)

After blogging for a while, you’ll come to want more from your content management system. Here are some more important additions that you would need to ensure are present or supportable within your CMS of choice:
1) Alternative Commenting Systems

2) Managing Images

3) Managing Video

4) Managing Audio

Alternate commenting systems

Bloggers like myself have jumped ship from so many blogging systems that I’ve begun to “see the light” about services like Disqus Comments which allows comments to be located on a server that’s separate from your blogging site. I’ve used Upsaid, Danchan We::Blog, Blog-city, Blogger, Livejournal, WordPress and now, Habari. So, I know what I’m talking about in saying I’ve had a lot of comments lost in cyberspace. Unsurprisingly, I heartily recommend you use a service like Disqus for which the Habari Developers/Community have a plugin for (or IntenseDebate if you so desire and use the “Generic Install” method because there’s not yet an IntenseDebate plugin for Habari) because you’ll “solve” the issue of comment spam by leaving that to Disqus’s filtering system which works pretty well and being able to export and future-proof your comments! This way, if when you switch blogging systems, you won’t lose your comments or worry about migrating your comments over because more than likely, there’ll be a Disqus plugin for your newfangled CMS of choice.I still have blogs running on WordPress and I’ve added Tumblr & Posterous to the list of content management systems I’m using. Guess what commenting system I have on these blogs? 🙂 By the way, implementing Disqus comments on your Habari Site is as simple as activating the plugin and replacing this piece of code

<?php $theme->display ( 'comments' ); ?> 
//--> Dark Autumn Theme/Connections/DeMorgan
<?php include 'comments.php'; ?>
// --> Georgia Theme and others

with this line of code (line 4)

//Make sure that your comments code is in a template called comments.php.
//Where you would normally display your comments, put 
<?php $theme->comments( $post ); ?>
//If there are native Habari comments on your post, these will be displayed,
//along with the native comment form. Otherwise, Disqus comments will be used.

into your entry.single.php file. The code to be replaced might be different depending on the theme, but thankfully, it’s pretty easy to find out the relevant section to replace. Repeat this process for page.single.php if you want comments to show up on your Pages or elsewhere. There is a manual installation available for getting Disqus commenting working on your Habari site as well. If you’re hellbent on having the comments hosted with your database, there are ways to spruce Habari’s built-in commenting system such as the Comment Ident plugin which is

Utilises the wonderful Ident Engine javascript library by Glenn Jones to find commenter’s various profiles around the web

the Discuss It plugin which enables threaded comments, and the BackType Connect plugin which connects & displays commentary about your blog post/page. Tip: Disqus can also find and display the conversation about your post from the following services: FriendFeed, Twitter, Digg, Reddit, Hacker News, Blogger, WordPress, YouTube, Vimeo, Picasa, Flickr, TypePad, Movable Type and other services.
The moral lesson of “outsourcing” your comments is: let the other site worry integrating the new services that come up everyday.

Managing Images

What good is a blog post without images to illustrate or buttress your point?

To assist in the management of media, such as images, video and audio, Habari provides a mechanism for defining virtual filesystems for media, called Media Silos.

Habari comes out-of-the-box with a basic media silo plugin that you can upload images to and insert into your blog posts.

At this point, it’s not as fancy as WordPress’s media management system i.e. no auto-generated thumbnails or resized images, but plugins are slowly but surely cropping up that will help with the shortcomings of the Habari media silo. The other side to the image management story is for the blogging system of choice to have a way (via plugins) to connect to image hosting/sharing services elsewhere. Currently, two big names in the photo-sharing community (Flickr and Smugmug [Coupon: DGwxx0rcYaTWQ]) have plugins (Flickr Silo Plugin included with Habari and Smugmug Media Silo by Colin Seymour) created by the community. For a good number of people, this is all they need. Unfortunately for me, I use Zenfolio (Referral Code: WRC-655-RUY) for hosting the bulk of my photos, but I’ve made peace with using my Flickr account for referencing images. The Flickr Silo plugin has a clean and organized interface. Here’s what it looks like from the post editing screen:

Managing Video

For a blog that tries to educate, at some points, videos will have to be made to demonstrate a point. Habari includes a Youtube Silo & Viddler Silo plugin, but there is support for Vimeo as well. With these video silos, you can only browse content that has already been uploaded to the respective services. Generally, you want to avoid hosting the actual video files on your website because chances are if the video becomes popular for some reason (:P), the external sites hosting the video can bear the increased load very handily. Here’s an example of the Youtube silo in action with this post about installing Ubuntu in VirtualBox. The smart thing about the insertion of the videos is the use of the actual embed code versus some made-up shortcode which, while convenient, can result in broken links if you end up deactivating the Youtube Silo plugin. Here’s what the Youtube Silo plugin looks like from the post editing screen:

If you want to go the self-hosting route, there’s the Podcasting plugin which I haven’t tried because I’m not using the trunk version of Habari.

Managing Audio

OOB (out-of-box), Habari doesn’t come with any fancy audio player, but then again, as with most blogging systems, plugins fill the deliberate gap here. Colin Seymour has an excellent Habari Audio Player plugin that works as simply as the 1pixelout Audio player (now, WP Audio Player). Caution: The issue of HB Audio Player not working has been reported to the plugin author. My diagnoisis of “will complain if there’s not style.css file in your theme and wouldn’t you know it, my theme uses 3 .css files that are in a /css folder” is likely wrong” 😛 Anyway, there’s the excellent JW Media Player plugin for Habari put together by Joel Lee which I am currently using on my site. This plugin makes use of shortcodes much like WordPress plugins like to do. The JW Media player plugin currently supports embedding of several music and flash/video formats:

• mp3, mp4, m4a, the aac music file formats and the syntax is: fileformat:http://url in between strong brackets [ ]
• swf, flv, mp4 and m4v media and the syntax for videos is: fileformat:http://url width height. With .flv files, you can even insert the video file with an image thumbnail and you simply insert the thumbnail’s url after the video file’s url e.g. fileformat:http://urlofvideo http://urlofthumbnail width height
• Visit the project page for a more coherent explanation of the syntax and how it works. Here’s a link to the drop I created if you can’t be bothered to individaully download each file from the svn repo.
• Here’s the JW media player for Habari in action! [mp3:http://janetalkstech.com/user/files/mp3/selection.mp3]
• Here’s what the embedded thumbnail + flv video looks like:Pretty freaking cool, eh? 😛 Here’s the line I used to embedded the video in my post:

  [flv:http://janetalkstech.com/user/files/video/excel-tutorial-flv.flv http://janetalkstech.com/wp-content/uploads/2011/05/excel-video-thumbnail.png 613 345]
  

  [powerpress url=”http://janetalkstech.com/wp-content/uploads/multimedia/video/excel-tutorial-flv.flv”]

Being Extensible

By default, most blogging systems come out of the box with a two main content types content: posts and pages. With Drupal, the CCK module exists to create more content types. With WordPress, several plugins exist to extend the content types that can be created. Unsurprisingly, Habari lets you create custom content types with ease. Jemjabella (momma and php ninja, check her site out!) has a post languishing in her drafts about creating using Habari as a Tumblelog. 🙂 There are plugins for creating custom content types with Habari (although none have worked out-of-box the way I would like) that can create custom types like:

• events
• creating custom urls
• linkblog
• blogroll links
• creating polls
• inserting images (think photoblog)
• enhancing posts/pages with additional metadata such as
• adding geolocation data to posts
• adding ratings to posts
• adding more user fields to user profile pages
• and so on. On my blog, you can check out the list of plugins I’m using for Jane Talks Tech!

Connecting to your social life and other services

If you have been to the trouble of installing a blogging system, chances are pretty good that you have a Twitter/Facebook/FourSquare/BrightKite/LastFM/Google account. On Habari, there are several options for connecting sites like these.There’s:

• a plugin for adding products from Amazon
• embedding Google Maps
• displaying tweets on your blog
• inserting tweets into posts/pages with the Twitter Silo plugin
• displaying music you’ve listened to with audioscrobbler
• displaying checked-in locations via BrightKite
• displaying LastFM tracks that you’ve recently listened to
• support for posting to Identi.ca from your blog
• displaying or inserting social bookmarks from Delicious, Diigo, etc
• and many other plugins.

All of this to say that, with a little more work than you might be accustomed to, Habari is great system to hitch your wagon to. There isn’t a great way to see if your theme or plugins have been updated except to check out the official Habari repository and make a note of the last-modified date. Cheers, thanks for reading and leave your thoughts/comments behind!