CodeProject: Integrating a Blogger.com Blog into an ASP.NET 2.0 Web Site. Free source code and programming help

Report Article

Discuss

Send to a friend

2 votes for this Article.

Popularity: 1.20 Rating: 4.00 out of 5

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 http://www.blogger.com.

Background

So what's this all about? Blogging. I have a Web site, http://www.rugbyincanada.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, http://www.rugbyincanada.com/blog, the other one for me to talk geek, http://www.rugbyincanada.com/webmaster.

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 very well. 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 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 advance setup, http://www.blogger.com/adv-create-blog.g. 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 http://www.blogger.com. 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.

<%@ page language="c#" masterpagefile="~/theNameOfYourMasterFile.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. All the CSS is inline in my template, but if you wanted to, you could just put it all into a *.css file. I leave that up to you.

<%@ OutputCache duration="900" varybyparam="none" %>
<%@ Page language="c#" masterpagefile="~/theNameOfYourMasterFile.master" 
    title="<$BlogPageTitle$>" %>
<asp:content id="m" runat="Server" contentplaceholderid="main">
<STYLE type="text/css">
#blog-title {
  margin:5px 5px 0;
  padding:20px 20px .25em;
  border:1px solid #eee;
  border-width:1px 1px 0;
  font-size:200%;
  line-height:1.2em;
  font-weight:normal;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.2em;
  }
#blog-title a {
  color:#666;
  text-decoration:none;
  }
#blog-title a:hover {
  color:#c60;
  }
#description {
  margin:0 5px 5px;
  padding:0 20px 20px;
  border:1px solid #eee;
  border-width:0 1px 1px;
  max-width:700px;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  }

/* Content
----------------------------------------------- */
@media all {
  #content {
    width:760px;
    margin:0 auto;
    padding:0;
    text-align:left;
    }
  #main {
    width:530px;
    float:left;
    }
  #sidebar {
    width:220px;
    float:right;
    }
  }

  }
/* Posts
----------------------------------------------- */
@media all {
  .date-header {
    margin:1.5em 0 .5em;
    }
  .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted #ccc;
    padding-bottom:1.5em;
    }
  }
@media handheld {
  .date-header {
    padding:0 1.5em 0 1.5em;
    }
  .post {
    padding:0 1.5em 0 1.5em;
    }
  }
.post-title {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:#c60;
  }
.post-title a, .post-title a:visited, .post-title strong {
  display:block;
  text-decoration:none;
  color:#c60;
  font-weight:normal;
  }
.post-title strong, .post-title a:hover {
  color:#333;
  }
.post div {
  margin:0 0 .75em;
  line-height:1.6em;
  }
p.post-footer {
  margin:-.25em 0 0;
  color:#ccc;
  }
.post-footer em, .comment-link {
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.post-footer em {
  font-style:normal;
  color:#999;
  margin-right:.6em;
  }
.comment-link {
  margin-left:.6em;
  }
.post img {
  padding:4px;
  border:1px solid #ddd;
  }
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }


/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#999;
  }
#comments h4 strong {
  font-size:130%;
  }
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block dt {
  margin:.5em 0;
  }
#comments-block dd {
  margin:.25em 0 0;
  }
#comments-block dd.comment-timestamp {
  margin:-.25em 0 2em;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block dd p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }
.paging-control-container {
  float: right;
  margin: 0px 6px 0px 0px;
  font-size: 80%;
}
.unneeded-paging-control {
  visibility: hidden;
}

/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
  margin:0 0 1.5em;
  padding:0 0 1.5em;
  border-bottom:1px dotted #ccc;
  list-style:none;
  }
#sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.5em;
  }
#sidebar p {
  color:#666;
  line-height:1.5em;
  }


/* Profile
----------------------------------------------- */
#profile-container {
  margin:0 0 1.5em;
  border-bottom:1px dotted #ccc;
  padding-bottom:1.5em;
  }
.profile-datablock {
  margin:.5em 0 .5em;
  }
.profile-img {
  display:inline;
  }
.profile-img img {
  float:left;
  padding:4px;
  border:1px solid #ddd;
  margin:0 8px 3px 0;
  }
.profile-data {
  margin:0;
  font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
.profile-data strong {
  display:none;
  }
.profile-textblock {
  margin:0 0 .5em;
  }
.profile-link {
  margin:0;
  font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }


/* Footer
----------------------------------------------- */
#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  }
#footer hr {
  display:none;
  }
#footer p {
  margin:0;
  padding-top:15px;
  font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.1em;
  }


/* Feeds
----------------------------------------------- */
#blogfeeds {
  }
#postfeeds {
  }

img
{
border: 0px;
}
  </STYLE>
<!-- Begin #content -->
<DIV id="content">
    <!-- Begin #main -->
    <DIV id="main">
        <DIV id="main2">
            <BLOGGER /><BLOGDATEHEADER />
            <H2 class="date-header"><$BlogDateHeaderDate$></H2>
            <!-- Begin .post -->
            <DIV class="post"><A name="<$BlogItemNumber$>"></A>
            <BLOGITEMTITLE />
            <H3 class="post-title"><BLOGITEMURL /><A title="external link" 
                 href="<$BlogItemUrl$>"><$BlogItemTitle$> <BLOGITEMURL /></A></H3>
            <DIV class="post-body"><DIV><$BlogItemBody$> </DIV></DIV>
            <P class="post-footer"><EM><SPAN style="FONT-SIZE: 9pt">
                 <$I18NPostedByAuthorNickname$> <$I18NAtTimeWithPermalink$></SPAN></EM>
            <MAINORARCHIVEPAGE /><BLOGITEMCOMMENTSENABLED />
            <A class="comment-link" href="<$BlogItemCommentCreate$>" 
                 <$BlogItemCommentFormOnclick$>
            <SPAN style="FONT-SIZE: 9pt"><<SPAN style="TEXT-TRANSFORM: lowercase">
                 <$I18NNumComments$></SPAN></SPAN></A>
<BLOGITEMBACKLINKSENABLED /><A class="comment-link" 
   href="<$BlogItemPermalinkUrl$>#links">
<SPAN style="FONT-SIZE: 9pt; TEXT-TRANSFORM: lowercase">
    <$I18NLinksToThisPost$></SPAN></A>
 <$BlogItemControl$> </P></DIV><!-- End .post -->
<!-- Begin #comments --><ITEMPAGE />
<DIV id="comments"><BLOGITEMCOMMENTSENABLED />
<A name="comments"></A><H4><$I18NNumComments$>:</H4>
<DL id="comments-block"><$CommentPager$> <BLOGITEMCOMMENTS />
<DT id="<$BlogCommentAnchorName$>" class="comment-poster">
    <A name="<$BlogCommentAnchorName$>"></A>
<$I18NCommentAuthorSaid$> </DT><DD class="comment-body">
<P><$BlogCommentBody$></P></DD><DD class="comment-timestamp">
<A title="comment permalink" href="<$BlogCommentPermalinkURL$>">
    <$BlogCommentDateTime$></A> <$BlogCommentDeleteIcon$> </DD>
<$CommentPager$> </DL>
<P class="comment-timestamp"><$BlogItemCreate$> </P>
<P id="postfeeds"><$BlogItemFeedLinks$></P><BLOGITEMBACKLINKSENABLED />
<A name="links"></A><H4><$I18NLinksToThisPost$>:</H4><DL id="Dl1"><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></DL><P class="comment-timestamp"><$BlogItemBacklinkCreate$></P>
    <P class="comment-timestamp">
<A href="<$BlogURL$>"><< <$I18NHome$></A> </P></DIV><!-- End #comments --></DIV></DIV>
<!-- End #main -->
<!-- Begin #sidebar -->
<DIV id="sidebar">
    <DIV id="sidebar2">
        <BR /><H2 class="sidebar-title">Blogs</H2>
        <UL>
            <LI><A href="http://www.codeproject.com/blog">Site News</A></LI>
            <LI><A href="http://www.codeproject.com/webmaster">
                Webmaster's Corner</A></LI>
        </UL>
        <H2 class="sidebar-title"><$I18NAbout$></H2><P><$BlogDescription$></P>

        <!-- Begin #profile-container -->
        <$BlogMemberProfile$>
        <!-- End #profile -->
        <MAINORARCHIVEPAGE />
        <H2 class="sidebar-title"><$I18NPreviousPosts$></H2>
        <UL id="recently">
            <BLOGGERPREVIOUSITEMS />
            <LI><A href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></A></LI>
        </UL>
        <MAINORARCHIVEPAGE />
        <H2 class="sidebar-title"><$I18NArchives$></H2>
        <UL class="archive-list">
            <BLOGGERARCHIVES />
            <LI><A href="<$BlogArchiveURL$>"><$BlogArchiveName$></A></LI>
        </UL>
        <DIV style="TEXT-ALIGN: center">
              <P id="powered-by">
                <A href="http://www.blogger.com"><IMG alt="Powered by Blogger" 
                src="http://buttons.blogger.com/bloggerbutton1.gif" /></A>
            </P>
            <P id="blogfeeds"><$BlogFeedsVertical$></P>
        </DIV>
    </DIV>
</DIV>
<!-- End #sidebar -->
</DIV>
<!-- End #content -->
<!-- Begin #footer -->
<DIV id="footer">
    <HR />
        <P><!--This is an optional footer. If you want text here, 
            place it inside these tags, and remove this comment. --> </P>
</DIV>
<!-- End #footer -->
</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 ".

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.

Also, 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.

History

22^nd April, 2008: Article submitted

License

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

About the Author

nickyt

Web Guru / Crime Fighter

Occupation:	Software Developer
Location:	Canada

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment.
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
MasterPages reinvented - a Component Based Template Engine for ASP.NET
User-friendly but powerful template engine which provides clean and painless separation of content and MasterPages (templates).
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.

Article Top

You must Sign In to use this message board.

(Refresh)

Subject

Author

Date

-- There are no messages in this forum --

General News Question Answer Joke Rant Admin