BlogEngine is a great tool for writing Blogs, and I use it to run this site. One of the great features about BlogEngine is that you can write your own extensions for just about anything you can think of. One of the things I wanted to add to my blog was a way to easily integrate AdSense ads. AdSense is a program provided by Google to generate a bit of income from your blog in the form of advertisements. If you haven't created an AdSense account you can do so at Google AdSense.
After signing up for Google AdSense you will need to create 1 or more Ad Units. Each of these will give you set of code to insert into your website. The code will look similar to the following based on your selections:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxxxx";
/* AdUnit Name */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I wanted my Google Ads to show up in 2 places: my sidebar on the right (which is a collection of widgets) and I wanted them to show up in the middle of my longer blog posts where the right side bar would no longer be in view. To do this I needed to create 2 extensions to Blog Engine: a widget and an extension. Here's how they work.
The AdSense Widget
I can't take full credit for the AdSense Widget unfortunately. I downloaded the oringinal widget from Hammering Out C# but it was written for BlogEngine 1.6. After installing the widget in my blog (BlogEngine 2.0) it didn't work due to upgrades in the core library, so I had to rewrite parts of the control and view.
To install and set up the AdSense Widget follow these simple instructions:
- Extract the .zip file to your computer
- Copy the entire AdSense folder to your Widgets directory in your blog. For me this was in brianlegg.com/wwwRoot/widgets/
- Navigate to your Home page and locate the widgets dropdown
- You should see AdSense in the list. Select this and press Add
- This will give you a blank section on your sidebar with an Edit link
- Press Edit and enter the parameters as they were provided to you by Google
- Press Save
You should have a few similar to the following:
That's it! You should now have Google ads in your side bar along with the rest of your widgets.
The AdSense Extension
The AdSense extension works very similarly to the [More] command but is also configurable in your extensions list. The extension allows you to place commands in the middle of your posts and they will be converted into AdUnit sections. Currently, you can only create 1 AdUnit for placement in a post but you can use it up to 3 times in the same post. The max of 3 times per post is a Google AdSense restriction, not mine. View one of my longer posts (like Intro to XNA 4) to see a working example of what this looks like.
To install and set up the AdSense Extension follow these simple instructions:
- Extract the .zip file to your computer
- Copy the AdSenseControl.cs file to your Extensions directory in your blog. For me this was in brianlegg.com/wwwRoot/App_Code/Extensions
- Navigate to your Admin dashboard and go to the Extensions tab
- You should see a new extension named AdSenseControl
- Hover over the Tools button and select Edit
Edit the AdSense Extension
- Fill in the parameters as they were supplied by Google
- Press Save
You should have a view similar to the following:
Add settings to AdSense Extension
To use the AdSense extension just place -> <- on a line by itself in your post and it will be converted into an AdUnit. I am currently using BlogEngine 2.0 and both of these work great. I plan to upgrade to version 2.5 over the weekend so if either of these break I will post an update to fix them. So, if you're already using BlogEngine 2.5 and these don't work just check back in a few days. Also, please note that if you just signed up for Google AdSense you may get a large blank area instead of ads. This is because Google takes a few days to verify your site and start sending you ads.
Congratulations! Enjoy the AdSense widget and Extension.
AdSense.zip (3.88 kb)
Tags: BlogEngine, AdSense, Extension, Widget