8/22/2007 - First Post!

Wed, 22 Aug 2007 18:09:10 GMT

Background

The Blog Control was built based on my own needs. I wanted to have a blog, but I didn't want my existing website dominated by the blog. Although there are other blog packages out there for ASP.Net, I couldn't find any that offered the features that I wanted; or more importantly, validated.

I wanted a package that would allow extensive customization via CSS, and I wanted it to generate valid code. While I was at it, I wanted it implemented as a control, so it could easily be integrated into existing sites. I ended up building the Blog Control.

Much like it's older sibling, the Content Control, the Blog Control uses TinyMCE for the editing interface. If you're using them together on the same site, you can reference the same TinyMCE installation, and save some space.

Demo

You're looking at it. This is a post in a sample blog. You'll need to log-in to see it in admin mode.

Click here for the login page. Use username admin and password password.

The Blog Control is intended to be pretty self-adminstering; so you'll just see more options when you're the admin user.

Usage

The Blog Control is an ASP.Net user control written in Visual Basic.Net. It was written under the framework v. 2.0, using Visual Web Developer Express 2005. It generates XHTML 1.1 compliant code.

You can insert them into any page, just like any other ASP.Net control:

<UserBlog:BlogControl runat="server" ID="BlogControl" SortOrder="DescendingDate" EditModeColumns="90" IncludeMonths="12" IncludeTags="10" IncludeSearch="true" AllowComments="true" PageSize="10" Admin="Admin" BlogKey="Admin" FilePath="~/Images" TinyMCEPath="~/Include/tiny_mce" DatabasePath="~/App_Data/Blog.mdb" ContentCSS="~/Skins/Normal/~Normal-Design.css" />

As you can see, it's got lots of options. Not all of them are required, but they give you lots of flexibility.

Also, make sure to register it, within your web.config:

You may have many blogs per site; or even per page, if you like. You can mix and match Blog Controls and Content Controls throughout the site, with different owners.

Also, I've built an optional RSS handler that accompanies the Blog Control. You can see an RSS sample here.

The commenting system contains some basic spam protection. It features a rotating math problem to throw off the bots. I did this quite intentionally; I hate forcing people to register. I though it a good balance between protection and openness.

Lastly, the blog even has the options to include links to Digg and Del.icio.us in your posts.

Dependencies

It depends on TinyMCE for the actual Javascript editing interface. This is located in the ~/Include/tiny_mce directory.
I've added included a custom plugin in the TinyMCE distribution. It's called advimageNet, and provides a nicer browser for images when using TinyMCE. Not critical, but tasty.
It needs write permissions wherever you allow users to upload images.
It uses an Access MDB database for storing the posts and comments. It's located in the ~/App_Data directory.

Properties

The Blog Control has several properties available. Here's the list:

SortOrder, Use this to specify which posts come first, oldest or newest. I tend to always use newest.

PageSize, Use this to specify how many posts are visible per page (default).

TinyMCEPath, Use this to specify the path to your TinyMCE files. Needed for pretty editing mode.

DatabasePath, Use these to specify the path to your database (for the posts and comments). Note: You can store multiple blogs per database, via the BlogKey property.

FilePath, Use this to specify which folder you store your images. These will be available on the image menu of TinyMCE.

BlogKey, Use this to differenciate different blogs that live in the same database file; it's used keep things seperate.

Admin, Use this to specify which user owns the blog. This is intended to integrate with your site's existing authentication. If you don't already have authentication, you can use the simple example provided in this project. The admin user has special rights, like creating new posts and deleting other people's comments.

Tags, Do you want a list of tags displayed? If so, provide the number that you want. I like 20. They are sorted in order of popularity (most popular first)

IncludeMonths, Do you want a list posts by month (archive)? If so, include the number of months that you'd like to see.

IncludeSearch, Do you want a full-text search available to visitors?

AllowComments, Use this to specify if comments are allowed.

ContentCSS, Use this to specify which stylesheet will be uses during editing mode (posts).

EditModeRows + EditModeCols, Use these to specify the dimensions of the textarea when editing posts.

RememberCommentNames, Use this to specify whether cookies should be used to remember commenters' names and URLs.

IncludeDigg + IncludeDelicious, Use these to optionally include links to Digg and Del.icio.us in the footers of your posts.

CommentProtection, Use this option to set your level of protection for commenting. You can specify a level between "none" and "hard". It does not render an annoying CAPTCHA, it just asks a simple math problem.

URLRewriting, Use this option to turn on URL rewriting. This is very helpful for search engine optimization. If you're going to use URL rewriting, you'll probably want to use a flexible rewriting library for your site. My favorite is URLRewriter.Net. The demo does not have this option enabled by default, as it just makes things more confusing when you're getting started.

URLRewritingBaseTemplate, URLRewritingLinkTemplate, URLRewritingTagTemplate, URLRewritingDateTemplate, URLRewritingSearchTemplate, URLRewritingPagePartialTemplate, These options allow you to customize exactly how the URL rewriting will work. You can write your own URL rules using these properties.

TagsDelimiterCharacter, Use this fellow if you want to set your own custom delimiter character for your tags list. Normally, tags are delimited by a "space", but this will let you use any character that you want. Commonly used characters are "," and ";".

EmailServerName, EmailAccountName, EmailAccountPassword, EmailNotifyAddress, EmailNotifyFromAddress, EmailNotifySubject, Use these properties to configure the blog to automatically email you each time a new comment is posted. You need to specify both an email server and an account to use. This allows you to use SMTP servers that require authentication (which most do, these days). You can customize the subject as well.

RSSLink, Use this property if you would like a "link" statement embedded that points to your RSS feed. This will cause the "feed" button to appear in both IE7 and Firefox when someone visits your blog.

Customization

Since the Blog Control uses TinyMCE for the actual editing, you have lots flexibilty available to you. Normally, I run a pretty stripped-down version of TinyMCE, but you are free to use any options that you choose.

Furthermore, since you have all the source to the control, you can modify any aspect about how it works.

Also, the Blog Control's presentation is done entirely through CSS. You can wildly alter the look of it through your stylesheet. What you see before you is simply a sample.

Localization

The Blog Control is totally localized. Currently, it includes translations in English, Dutch, Swedish, and Portugese. Additional translations can easily be added using the .resx files as templates. If you make any new translations, be sure to contact me so I can include them in future releases.

Sample Blog RSS