Chris Brauer Media Project [BLOG]

• In order to get Labels to appear on the right navigation column I followed the steps documented in the Blogger Guide to FTP Labels
• Comment functionality in Blogger is a bit clunky. Follow this guide to integrating comments using Blogkomm. This is one of the most challenging hacks to implement but worth it if you make the effort.
• For search engine optimisation I reversed the order of the page titles on permalink pages using this hack from Freshblog. So instead of all my page titles leading with the blog name, the search engine friendly titles start with the title of the story.
• Post titles are clickable on the home page of the blog thanks to another Freshblog beauty.
• My list of archive months was getting a bit lengthy and taking up unecessary space in the right navigation so it was useful to implement this drop-down-menu solution
• Thanks to 3spots and Freshblog for the very cool Popmarks button you see on the bottom of each post that allows users to bookmark or subsribe easily to RSS without all the clutter of buttons for the various services. It took a bit to customise it to my needs but it is easy to customise what services are available through it so I think it will really come in handy in the future.

1. Add a few Labels to blog posts. Just do a couple as these will be test labels. You can add labels at the bottom of each post. Seperate labels with commas, don't use spaces between words (underscores instead) but try and limit yourself to one word labels.
   
   
2. Background Research. There are a couple of key blog posts on the Web for this idea at this time of writing. The first comes from David Nicholson (Where Magic Lives) in the form of a guide on how to include a "Label Cloud" of Labels where most frequently applied terms appear biggest and least referred smallest. The code for this example comes from a customized install of an exchange between David and a user in the comments at the bottom of the post. Meanwhile Andrew Huey was working on his own solution to getting labels on a left or right navigation as a PHP include. Another Good Source is Freshblog that lists some of the latest hacks available to hosted and unhosted alike.
   
   
3. It is important to note if your blog posts use an .html extension (or other) or a .php extension. If you use a .html extension you must add the following code to your .htaccess file (ask your host if you don't know where this file is).
   
   AddType application/x-httpd-php .html
   
   If you are using a .php extnsion you don't need to add this info to the .htaccess file.
   
   
4. Open up Notepad or another text editor. Copy and Paste the following code into Notepad and read step 3.
   
   <ul class="labels">
   <?php
   define('PREFIX', 'url prefix');
   define('SEARCH_DIR',
   'absolute path to Labels folder');
   define('THIS_FILE', 'cloud.php');
   if(file_exists(SEARCH_DIR.'_cloud_include_cache.html') &&
   filemtime(SEARCH_DIR.'_cloud_include_cache.html')>(time()-(60*60)))
   echo file_get_contents(SEARCH_DIR.'_cloud_include_cache.html');
   else
   {
   $output = '';
   $files = array();
   $dir = opendir(SEARCH_DIR);
   while($file = readdir($dir))
   if($file != '.' && $file != '..' && $file != THIS_FILE &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;& $file != CACHE_FILE)
   {
   $files[] = $file;
   }
   closedir($dir);
   asort($files);
   foreach($files as $name)
   $output .= "<li><span style='color:#990000'>----{-</span><span class='flower'></span> <a href='".PREFIX.
   htmlentities($name)."'>".
   htmlentities(str_replace('.php','',$name))."</a></li> ";
   echo $output;
   $fp = fopen(SEARCH_DIR.'_cloud_include_cache.html','w');
   fwrite($fp, $output);
   fclose($fp);
   }
   ?>
   </ul>
   
   
5. You must customize this code for your Blogger FTP weblog. Customize the text url prefix with your own web page prefix for where the labels folder is on your server (eg. www.yourdomain.com/blog/labels would equal 'blog/labels'). Next put the absolute web path to your labels folder where the text in place of absolute path to Labels folder(eg' /www/www/...'). If you use a .html (or other extension) replace the .php code with your extension (eg '.html'). Consult your ISP or support documentation if you don't know this path. Optional is also to replace the color or style options on the appearance of the Labels list in your left or right column.
   
   
6. Save the file as labels.php and FTP into a root blog directory on your server.
   
   
7. Customize Template. Less effort here. Insert the following code in the right or left column of your blogger template as desired and read step 6.
   
   <h2 class="sidebar-title">Labels</h2>
   <p><?php include($_SERVER['DOCUMENT_ROOT']."location of .php file"); ?></p>
   
   
8. Customize the formatting in the h2 class as required. You need to leave the second and third line but replace location of .php file with your location (eg. blog/labels.php).
   
   
9. Test the output by publishing. You should see a list of Labels in Blogger. Other things to keep in mind are that you can delete the file (_cloud_include_cache.html) that will appear in your label directory if you want to see changes on your blog Labels list. This file is automatically created to make it so users will not reload the list everytime they visit the web page. The script is very easy on your server and only checks for changes every 60 minutes unless you delete the cache file.

For other interesting Blogger functionality Check out the Beautiful Beat guide to getting recent post functionality on Blogger FTP blogs and the Blogger comments guide (Blogkomm) on this site. Phydeaux3 (followed up by WebWeaver's World) offers an elegant Label Cloud for any Layouts Compatible Templates (blogspot. ... domains).

So let's get started! I stumbled across the possibility of integrating Blogkomm into Blogger when reading Anne Galloway, a fellow Canadian and PhD student in sociology. Like most Bloggers I am acutely aware when someone is using the same software as me and has some as yet undiscovered functionality available. I followed the link on her blog to Blogkomm, and so began the half-day installation journey documented here.

The WWW is full of stories of people's frustrations at trying to install an not comprehensively documented piece of open source code that promises so much if you could only get it to work. Installing Blogkomm can be a frustrating experience as the intrepid blogger looks to piece together resources from across the Internet with the eventual goal of integrating the commenting system into your blog. It is by no means the only commenting system out there for bloggers using software that doesn't deal well with comments but in the end it provided an elegant and effective solution for me. I have listed the steps I eventually took as contribution to future efforts to install and integrate comments into blogs.

1. Visit http://www.blogkomm.com/index.php and try out the commenting system by posting a comment on any of developer Holger Kreis' postings. You can see a number in [square brackets] under each post indicating the number of comments. Click on this link to open up comments for that post. If there are no posts this will simply open up the comment authoring form embedded in each post. Also take a whirl around the admin-demo to get a sense for how you can manage and moderate comments (a nice feature of the latest release of Blogkomm offering some protection against comment spam)
2. Click on download on the left navigation and follow a link to the appropriate blogkomm_2_3_final file (either .tar.gz or .zip) and 'open'. Unpacked the file includes a folder 'Blogkomm'. Rename this folder something else and upload to the root directory of your weblog (where your index page for your blog is located ... e.g. for me it is http://www.chrisbrauer.com/weblog/
3. There are three useful pieces of support on the Blogkomm website. Open up two browser windows (file > new>window) and navigate to the "how-to" section and the .pdf document supporting Blogkomm 2.2. You will need to consult these documents regularly as you make your way through the install. Also useful if the the FAQ. Open a third window and point your browser to the set-up index page http://root_directory/blogkomm_directory/setup/index.php. Follow these steps that are well documented. You can also configure your setup through the conf file in blogkomm/module/conf on your server for those who don't want the wizard functionality. You should arrive at a point where you have a PHP "code snippet" that you are instructed to insert into your Blogger template.
4. At this point you can either go into your Blogger settings and 'hide' comments or just let them appear where they normally would in your blog and when you are satisfied with the appearance of the new commenting system remove them. Also note that blogkomm will pick up the email address you have on file for your Blogger profile, NOT the one you have normally associated with your comments if you indicated that you wanted email notification when comments are posted on your site. So change your profile email address to the one you'd like to be notified on. Insert the PHP code snippet into your template in the location you want the [n] of comments to appear. Also insert the following code at the very top of your template:
   
   <?php
   if (isset($rem)) {
   setcookie ("blogKo_name", $comm_name,time()+1209600);
   setcookie ("blogKo_mail", $comm_e_mail,time()+1209600);
   setcookie ("blogKo_www", $comm_website,time()+1209600);
   }
   if (!isset($button)) {
   $comm_name = $_COOKIE["blogKo_name"];
   $comm_e_mail = $_COOKIE["blogKo_mail"];
   $comm_website = $_COOKIE["blogKo_www"];
   }
   session_start();
   ?>
   
   
   This will ensure your admin functions work.
   
5. First make sure that none of the stylesheet classes being used are already on your site. Copy the stylesheet data from the blogkomm.css file in the blogkomm directory you unpacked and paste it into the head of your Blogger template. This will ensure that the commenting functions will pick up the appropriate styles generated automatically by the script. Save your template
6. Go into your Blogger settings and change the name of the index pages for your blog and your archive to a .php extension (eg if your blog is http://yoururl.com/index.html the new address will be http://yoururl.com/index.php). In archive you can change the name of your archive page (default is archive.html) to archive.php. This step will ensure that your PHP code will work on your blog pages to allow the commenting system to function. When you next publish your entire blog the index page will change to index.php and your archive directory pages (eg months/weeks) will also change. But making this change will not change the individual blog pages to .php extension. You do that in STEP 8. Now publish your entire blog. Don't worry about your existing comments as they are still stored and are not impacted by the implementation of Blogkomm.
7. If everything is going according to plan you should see [n] underneath your blog postings. If you are using expandable post summaries on your blog front page like I do, you should see [n] under both the post intro and the full story.
8. Now for a bit of the unglamorous slog. I'm sure there is a better way to do this step so don't hesitate to suggest but this is how I did it. In order to change the file names of past individual posts from .html to .php the only method I found that worked was to publish each individual post through your Blogger admin. It seems to be a common challenge but the solution proposed in that forum (to turn off archive and turn back on again) didn't work for me. Oh well, it doesn't actually take that long and it gives you a chance to review all your old posts. Once you have published each individually, publish your entire blog again and all the pages should now have a .php extension allowing comments to function on every page.
9. This next step is even stinkier. I wasn't sure what to do about the fact that search engines had indexed all of my blog when the file extensions were .html, also links to my individual posts on other blogs and in forums were aimed at pages with a .html extension. If I left it with my pages being overwriten with .php extensions those links would not work. So I created a quick and dirty redirect page. (Click on this link and hit stop on your browser to view source of my redirect page. Just save the file and change the urls to point to your pages by opening it in a text/html editor) I copied the page as the file names of all my individual posts and added .html extensions. So now in each of my archive directories are a filename.php and a filename.html that redirects to filename.php. When search engines visit or someone clicks on links to .html pages they are redirected to the appropriate .php page. It also helps by not losing any Google PageRank your pages might have. But this took about an hour and was a real pain in the ass. It is also helpful to copy the file into all of your directories as archive directories do not automatically generate index pages allowing access to your file structures online. A common redirect file called index.html can be uploaded into every directory (including your renamed Blogkomm directory) to shift users back to the home page of your blog. If you don't do that this or this can happen.
10. To transfer over my old comments I again did it manually by turning comments on in Blogger settings and republishing my entire blog. This led to me being able to see the old comments and the new comment submission form at the same time and transfer over existing comments. Again an opportunity to review blog postings if you haven't had enough of yourself already.
11. You can make changes to how the comment form and output appear in your blog by adjusting the content of the appropriate style classes in the HEAD of your Blogger template. These are well commented in the code for you to make changes and you can fiddle with div.blogkbox to control the look of the comment form, and div.blogkcomments for control of the look of the comment output. If you are linking to the stylesheet (eg. link href="/weblog/blogkomm/blogkomm.css" type="text/css" rel="stylesheet") you need to make changes in the blogkomm.css file.
12. Optional is to go into your blogger template and insert the code snippet generated from setup/index.php for adding recent comments to your sidebar. You can configure the number of comments and teaser in module/recent_comments_sidebar.php. You can make changes to the style with the style class div.blogkcommentsrecent.

You can decide for yourself whether it is worth your while to integrate the commenting system into your blog. When I installed Blogkomm to my satisfaction I found it to be a big improvement on the default comments. It is so encouraging that one developer can create something of so much use to everyone. It is really our job as users to provide the supporting noise to help with many succesful Blogkomm implementations.

Please comment if you have any tips regarding Blogkomm, commenting software, or further Blogger extensions.

See: Other web tips in New Media Notes on the Chris Brauer Media Project

Labels: blog, internet