.NET and Open Source: better together


  • Join Us on Facebook!
  • Follow Us on Twitter!
  • LinkedIn
  • Subcribe to Our RSS Feed

Building Widgets for BlogEngine.NET 3.3

Version 3.3 dropped user controls from BlogEngine and new widgets use Razor views instead. To start developing new widget, open source code in Visual Studio, navigate to BlogEngine.NET/Custom/Widgets in the solution explorer and add "Example" folder. If you run application and go to admin/custom/widgets, you'll see "Example" widget added to available widgets. You can even drag it to widget zone and save changes. More...

Tutorial - Building NivoSlider Extension (Part 4)

Creating NuGet Package

nuget-logoBlogEngine uses NuGet format for sharing extensions. NuGet package in a nutshell is a ZIP containing files you want to share with some metadata NuGet uses internally. The easiest way to create a package is to use Package Explorer. Download and install this small application on your local machine, then click to run as any regular Windows application. At the time of writing, I’m using Package Explorer version 2.0. More...

Tutorial - Building NivoSlider Extension (Part 3)

Data Persistence

db_1What we need next is to save metadata for each picture used by every slider, and also we need to be able to add and delete all these records. Extension settings are standard way of doing it in BlogEngine - you declare what kind of data you want to maintain, set initial values and first time extension runs it will instantiate settings object and save it on the back-end. To maintain these data, blogger goes to admin/extensions and clicks extension link in the right sidebar. This will load auto-generated form where settings can be edited. The code below would be sufficient: More...

Tutorial - Building NivoSlider Extension (Part 2)

Creating Repository

HTML code we added to site.master can be moved to user control (1), so we’ll need just drop control on the page and be done. But some new themes use Razor instead of WebForms – for those to work we can provide HTML helper (2) do the same thing control does for WebForms. And also we want slider be available in the posts and pages, for that functionality we’ll have to use extension (3). Having planned 3 distinct UIs, it makes sense to abstract common functionality and make UI as light as possible. So lets start by moving that hard-coded list of images into its own class. Open  ~/app_code/extensions folder and create new folder inside it called “NivoSlider”. Then add new class “Repository.cs” – here what it looks like: More...

Tutorial - Building NivoSlider Extension (Part 1)

Getting Started - Pure HTML Code

When I built theme for this site I used excellent Boldy theme as a template, and original theme has nice jQuery slider for a front page. I did not need it at the time, but later used it for another project and liked how simple and light-weight this slider is. In this tutorial we’ll transform NivoSlider into full-featured extension for BlogEngine.NET 2.5 and learn few tips and tricks along the way that will help you add useful functionality to your blog with no sweat. More...

Compiled Extensions in BlogEngine 1.5

image With BE.NET 1.5 release candidate out of the door, it is a good time to look at some of the new features. Most of them are small and incremental, but nevertheless are interesting. One such feature is support for compiled extensions. There are several reasons you want to compile extension rather than provide source code, such as security, protecting intellectual property, simplifying deployment (for large extensions) etc. If you find a reason to choose this route, this guide is for you. More...

Simple Widget Tutorial

feedj-6 Feedjit is a service that provides live traffic feed for your site. It is easy to set up – you copy chunk of HTML and insert it into your blog’s markup. That is, if you know HTML and used to editing files in your blog, which shouldn’t be a requirement for average blogger. This is why popular blog providers supply Feedjit widgets – so that blogger does not have to edit files by hand and FTP them to the host. In this little exercise we create such a widget for BlogEngine. More...

Writing extensions for BlogEngine 1.4 (part 4)


Default admin interface for extensions in BlogEngine works fine in most cases and very easy to use. But sometimes you just got to get creative, right? That means, you want no limits. Obviously, some of simplicity will be lost – but still it is surprisingly easy to get along using plug-and-play BlogEngine architecture. Lets say, we ran into nice DHTML color picker and want to use it in the admin page for our extension. We want admin page look like this picture – it should allow us to enter a word, size and color. This values will be saved in the extension manager, so we don’t have to deal with databases or file system – usual BE stuff. And when you click “Color picker” button, nice color picker will show up and you can visually select value for a color. More...

Writing extensions for BlogEngine 1.4 (part 3)

Lets say we want to write an extension to track user activities on our site. Blogger should be able to set basic settings, for example choose to track  posts, pages or both. Then every time user requests post or page, we increment corresponding counter by one. Look at the picture above. Its clear that we need two sets of settings: one for post/page options and another to list user activity.



Writing extensions for BlogEngine 1.4 (part 2)

In the first part, we wrote simple extension that changes case in the post to lower. Let’s say, we want user to decide show post in the lower or upper case. For this, we need to be able to maintain variable and let blogger change it’s value through admin interface. Normally, you would need to add a data access functionality for extension to handle this kind of operation, create admin form etc. BlogEngine uses Extension Manager to help make job a lot easier. Take a look at the code below. In the constructor, we subscribe to post serving event and then call InitSettings. There we create ExtensionSettings object, which can hold singe value (scalar) or/and table of values. In our case, we want it to hold single scalar value, so we set settings to scalar. We call our variable “Case” and initialize it with default value of “upper”, then call ExtensionManager.InitSettings and pass name of extension and settings object. More...

Download BlogEngine Themes