Click here to Skip to main content
Click here to Skip to main content
Go to top

Integrating a Blogger.com Blog into an ASP.NET 2.0 Web Site

, 8 Jul 2009
Rate this:
Please Sign up or sign in to vote.
How to integrate a blogger.com blog into an ASP.NET 2.0 Web Site

Introduction

Ok, so this is my first article. I've been wanting to write one forever, but always seem to be busy. As far as I know, no one has really written about this yet, but if so, can someone please let me know and send the links.

This article assumes that you are familiar with blogging (blogger.com to be specific), have a blogger.com account, know how to use blogger.com templates and template parameters, CSS and ASP.NET 2.0's Master Pages. For more information on how to create and write blogs using blogger.com, please visit the Blogger homepage. For more information on using blogger.com markup, e.g. <$BlogPageTitle$>, visit this site.

Background

So what's this all about? Blogging. I have a couple of web sites, http://www.rugbyincanada.com and http://learn-ajax.com and in an effort to get some more hits, I did a redesign as well as added a couple of blogs, one for site news, the other one for me to talk geek.

Now for ASP.NET, I haven't really seen any decent blogging software that was OpenSource except for BlogEngine.NET which I tried and it seems to work well. More recently I discovered Phill Haack's pet project SubText. It's not bad, but even Phil himself says he's trying to get a lot of what WordPress does into SubText. Looks like an interesting project though. I'm going to try and find some time and contribute to SubText.

The problem however was that I wanted to keep the same look and feel of my site for the blog, i.e. use my blogs with my master page. I thought about building my own blog/CMS to integrate into my site and didn't really feel like reinventing the wheel. I looked at somehow integrating BlogEngine.NET into my site, but that meant modifying BlogEngine.NET source. I found it hard to integrate into my existing site as it had its own masterpage and folder structure.

I already used blogger.com for some other blogs and thought to myself, how can I use blogger.com in my site? Sure I could use the APIs from Google, but I'm lazy and just want the blog working with the look and feel of my site. So... I just created a new blog on blogger.com, and wrote some posts and added a little magic.

Using the Code

Blogger.com lets you host your blog on their servers or you can host it on your own site. I opted to host it on my own site. To do this, you need to create the blog on blogger.com through the advanced setup, here. In advanced setup, you will be asked for all your FTP information. If you need to know how to create a blog on blogger.com using the advanced setup, visit the Blogger homepage. Once your blog is created, just write a test post, such as Hello World.

Here's where the magic happens. Blogger.com creates blogs using a template. Generally this template is good ol' CSS, HTML and some blogger.com specific markup so that it can plug in stuff like the title of the post, post content, etc. So, by default, the template file is called index.html. I decided to call mine default.aspx.

As well there is an archive.html file for, you guessed it, the archives. I decided to call mine archive.aspx.

Now our blog will work and all the pages are *.aspx, so they go through ASP.NET now. Still not good enough though. I mentioned that I wanted to use the same look and feel as my entire site, so at the top of my default.aspx, I just put my page directive. Notice that the title attribute has a blogger.com piece of markup. This will get transformed into the blog post title. If you want to learn what all the blogger.com tags are, e.g. <$BlogPageTitle$>, visit this site.

<%@ page language="c#" masterpagefile="~/ric.master" Title="<$BlogPageTitle$>" %>

Now for the blog content, what I did was take an existing template on blogger.com and used everything that was inside the <body> tag as the rest of the markup is in my master page. Here's a template I modified to use for my pages. This is where you need to know CSS and the blogger.com templates. Using ASP.NET's OutputCache page directive is up to you. In my case, I can cache it as there is nothing dynamic on these pages ever, so the pages load faster.

<%@ OutputCache Duration="900" VaryByParam="none" %>
<%@ page language="c#" masterpagefile="~/ric.master" Title="<$BlogPageTitle$>" %>
<asp:Content ID="m" ContentPlaceHolderID="main" Runat="Server">
<link href="http://www.codeproject.com/css/blog.css" type="text/css" rel="stylesheet" />  
<div id="content">
<h2>Site News</h2>
<div id="main"><div id="main2">
<Blogger>
    <BlogDateHeader>
  <h2 class="date-header"><$BlogDateHeaderDate$></h2>
  </BlogDateHeader>
  <div class="post"><a name="<$BlogItemNumber$>"></a>
         <BlogItemTitle>
    <h3 class="post-title">
	 <BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
	 <$BlogItemTitle$>
	 <BlogItemUrl></a></BlogItemUrl>
    </h3>
    </BlogItemTitle>
	         <div class="post-body">
	<div>
      <$BlogItemBody$>
    </div>
    </div>
    <p class="post-footer">
      <em><$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></em>
      <MainOrArchivePage><BlogItemCommentsEnabled>
         <a class="comment-link" href="<$BlogItemCommentCreate$>"
		<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase">
		<$I18NNumComments$></span></a>
      </BlogItemCommentsEnabled><BlogItemBacklinksEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links">
	<span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>
</BlogItemBacklinksEnabled>
</MainOrArchivePage>  <$BlogItemControl$>
    </p>
  </div>
 <ItemPage>
  <div id="comments">
	<BlogItemCommentsEnabled><a name="comments"></a>
    <h4><$I18NNumComments$>:</h4>
    <dl id="comments-block">
      <$CommentPager$>
      <BlogItemComments>
        <dt class="comment-poster" id="<$BlogCommentAnchorName$>">
		<a name="<$BlogCommentAnchorName$>"></a>
          <$I18NCommentAuthorSaid$>
        </dt>
        <dd class="comment-body">
          <p><$BlogCommentBody$></p>
        </dd>
        <dd class="comment-timestamp"><a href="<$BlogCommentPermalinkURL$>" 
		title="comment permalink"><$BlogCommentDateTime$></a>
          <$BlogCommentDeleteIcon$>
        </dd>
      </BlogItemComments>
      <$CommentPager$>
    </dl>
		<p class="comment-timestamp">
      <$BlogItemCreate$>
    </p>
    <p id="postfeeds"><$BlogItemFeedLinks$></p>
  </BlogItemCommentsEnabled>
    <BlogItemBacklinksEnabled>
    <a name="links"></a><h4><$I18NLinksToThisPost$>:</h4>
    <dl id="comments-block">
    <BlogItemBacklinks>
        <dt class="comment-title">
        <$BlogBacklinkControl$>
        <a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> 
		<$BlogBacklinkDeleteIcon$>
        </dt>
        <dd class="comment-body"><$BlogBacklinkSnippet$>
        <br />
        <span class="comment-poster">
        <em><$I18NPostedByBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
        </span>
        </dd>
    </BlogItemBacklinks>
    </dl>
    <p class="comment-timestamp"><$BlogItemBacklinkCreate$></p>
    </BlogItemBacklinksEnabled>
		<p class="comment-timestamp">
	<a href="<$BlogURL$>"><< <$I18NHome$></a>
    </p>
    </div>
</ItemPage>
</Blogger>
</div></div>
<div id="sidebar"><div id="sidebar2">
<br />
  <MainOrArchivePage></MainOrArchivePage>
  <h2 class="sidebar-title"><$I18NPreviousPosts$></h2>
    <ul id="recently">
    <BloggerPreviousItems>
        <li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
     </BloggerPreviousItems>
  </ul>
    <MainOrArchivePage>
  <h2 class="sidebar-title"><$I18NArchives$></h2>
    <ul class="archive-list">
   	  <BloggerArchives>
    	<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
	  </BloggerArchives>
  </ul>
  </MainOrArchivePage>
<div style="text-align: center;">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxxxxxxxx";
/* 160x600, created 9/29/08 */
google_ad_slot = "1710078650";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
      <p id="powered-by"><a href="http://www.blogger.com">
	<img src=http://buttons.blogger.com/bloggerbutton1.gif 
	alt="Powered by Blogger" /></a></p>
      <p id="blogfeeds"><$BlogFeedsVertical$></p>
</div>
</div></div>
</div>
</asp:Content>

Republish the blog once your template has been changed and that's pretty much it. You have your site and a blog integrated into it with the same look and feel.

Points of Interest

  • The only problem I seem to have with this approach to blogging is that blogger.com does not escape double quotes so the Title property for the Page directive gives a compilation error if you have double quotes in your title. Since I am aware of the issue, I just write my title using the double quotes entity &quot;.
  • Also, I'd like to be able to use the new blogger.com's tag cloud control, but unfortunately, from what I read, it is only available for blogger.com blogs that are hosted on blogger.com. So if you're looking to make a tag cloud, custom is the way to go.
  • I did this using ASP.NET but there's no reason why you couldn't take the same approach with PHP or another Web language.

I use blogger.com but I have to say I still love WordPress when it comes to blogging/CMS. If I had more time, it'd be cool to create a WordPress.NET blogging/CMS port.

History

  • 22nd April, 2008: Article submitted

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

nickyt
Software Developer
Canada Canada
Web Guru / Crime Fighter

Comments and Discussions

 
GeneralBlogger.com is Phasing out FTP Publishing Pinmembernickyt3-Feb-10 6:52 
Hey folks,
 
I just received this e-mail from Google explaining that their shutting down FTP publishing for blogger.com. See below. So looks like after mid-march, this article is obsolete. Thanks for all the comments and votes on the article.
 
Cheers,
nickyt
 
"Dear FTP user:
 
You are receiving this e-mail because one or more of your blogs at Blogger.com are set up to publish via FTP. We recently announced a planned shut-down of FTP support on Blogger Buzz (the official Blogger blog), and wanted to make sure you saw the announcement. We will be following up with more information via e-mail in the weeks ahead, and regularly updating a blog dedicated to this service shut-down here: http://blogger-ftp.blogspot.com/.
 
The full text of the announcement at Blogger Buzz follows.
Last May, we discussed a number of challenges facing[1] Blogger users who relied on FTP to publish their blogs. FTP remains a significant drain on our ability to improve Blogger: only .5% of active blogs are published via FTP — yet the percentage of our engineering resources devoted to supporting FTP vastly exceeds that. On top of this, critical infrastructure that our FTP support relies on at Google will soon become unavailable, which would require that we completely rewrite the code that handles our FTP processing.
 
Three years ago we launched Custom Domains[2] to give users the simplicity of Blogger, the scalability of Google hosting, and the flexibility of hosting your blog at your own URL. Last year's post discussed the advantages of custom domains over FTP[3] and addressed a number of reasons users have continued to use FTP publishing. (If you're interested in reading more about Custom Domains, our Help Center has a good overview[4] of how to use them on your blog.) In evaluating the investment needed to continue supporting FTP, we have decided that we could not justify diverting further engineering resources away from building new features for all users.
 
For that reason, we are announcing today that we will no longer support FTP publishing in Blogger after March 26, 2010. We realize that this will not necessarily be welcome news for some users, and we are committed to making the transition as seamless as possible. To that end:
 
We are building a migration tool that will walk users through a migration from their current URL to a Blogger-managed URL (either a Custom Domain or a Blogspot URL) that will be available to all users the week of February 22. This tool will handle redirecting traffic from the old URL to the new URL, and will handle the vast majority of situations.
We will be providing a dedicated blog[5] and help documentation
Blogger team members will also be available to answer questions on the forum, comments on the blog, and in a few scheduled conference calls once the tool is released.
 
We have a number of big releases planned in 2010. While we recognize that this decision will frustrate some users, we look forward to showing you the many great things on the way. Thanks for using Blogger.
 
Regards,
 
Rick Klau
Blogger Product Manager
Google
1600 Amphitheatre Parkway
Mountain View, CA 94043
 
[1] http://buzz.blogger.com/2009/05/ftp-vs-custom-domains.html
[2] http://buzz.blogger.com/2007/01/blogger-custom-domains.html
[3] http://buzz.blogger.com/2009/05/ftp-vs-custom-domains.html
[4] http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=55373
[5] http://blogger-ftp.blogspot.com/"
 

QuestionRe: Blogger.com is Phasing out FTP Publishing Pinmemberakbyrne19-Feb-10 9:49 
AnswerRe: Blogger.com is Phasing out FTP Publishing Pinmembernickyt24-Feb-10 9:04 
GeneralRe: Blogger.com is Phasing out FTP Publishing PinmemberSuhel Shah16-Jul-12 12:08 
QuestionPublishing problem [modified] PinmemberMember 352846428-Dec-09 23:39 
AnswerRe: Publishing problem Pinmembersmith28830-Dec-09 6:54 
AnswerRe: Publishing problem Pinmembernickyt4-Jan-10 6:27 
QuestionProblems Publishing my blog files to my web server. PinmemberMember 352846415-Dec-09 1:23 
AnswerRe: Problems Publishing my blog files to my web server. Pinmembernickyt16-Dec-09 6:19 
GeneralThanks a lot Pinmembereslsys19-Nov-09 6:51 
GeneralRe: Thanks a lot Pinmembernickyt19-Nov-09 16:52 
GeneralQuestion Pinmemberxc2k13-Nov-09 6:45 
GeneralRe: Question Pinmembernickyt19-Nov-09 16:54 
GeneralOkay, something is wrong PinmemberAptiva Dave14-Aug-09 5:19 
GeneralRe: Okay, something is wrong Pinmembernickyt14-Aug-09 5:32 
GeneralRe: Okay, something is wrong PinmemberAptiva Dave14-Aug-09 7:00 
QuestionRe: Okay, something is wrong PinmemberAptiva Dave15-Aug-09 15:31 
QuestionNavigation menu in master page PinmemberAptiva Dave5-Apr-09 19:07 
AnswerRe: Navigation menu in master page Pinmembernickyt9-Apr-09 13:45 
GeneralRe: Navigation menu in master page PinmemberAptiva Dave9-Apr-09 14:24 
GeneralRe: Navigation menu in master page Pinmembernickyt10-Apr-09 16:35 
Generalliitle more clarification needed Pinmemberkennethdas19-Jun-08 19:04 
GeneralRe: liitle more clarification needed Pinmembernickyt20-Jun-08 2:52 
GeneralRe: liitle more clarification needed [modified] Pinmemberkennethdas23-Jun-08 19:31 
GeneralRe: liitle more clarification needed Pinmembernickyt24-Jun-08 16:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 8 Jul 2009
Article Copyright 2008 by nickyt
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid