When I build a website unless it’s a one page wonder, I always integrate a blog. This is true of client sites and my own websites. For clients it’s easy for them to add new content without having to call me up. For example if you were building a website for a church, school or other low profit organization, blogging is a very attractive route to go. Sure they will need some static pages, like location, and contact information. That sort of information will remain the same for long periods of time. However when they hold events, they want to be able to add things quickly, easily and cheaply, which is exactly what a blog will let them do. Yes you’ll miss out on the update/maintenance fees, but you’ll more than make up for it in the client referrals. For my websites I do it mostly for marketing purposes. It allows me to list my websites in blog directories, get involved in technorati tagging, comments and trackbacks, or simply put to take advantage of the blogosphere.

To make the process of integrating a blog easy to understand I’ve set up a sample website. The code on the pages come from of glish and is for demonstration purposes only. For this example I’m assuming you already have a functioning website. I’m also assuming you have set up an account with blogger and have configured it to publish using a one of the built in templates. For part I we are only going to be working with HTML files. In part II I’ll show you how to integrate blogger into a PHP, ASP, JSP or an include file based website. For this tutorial we’ll be using the imaginary domain of www.example.com .

Lets assume you’re helping Widgets Inc. set up ‘trends’ blog where they are going to blog about surprisingly enough, trends in the Widgets world. Demonstrating good information architecture you’ve decided to keep the blog content in its own directory. Something as simple as ‘trends’ will be perfectly fine. First you’ll need to create a ‘trends’ directory on your webserver. Next log into blogger and select the ‘Settings’ tab and then select ‘publishing’ from the sub menu.

The second line will say blog URL. Change this to the full URL of your websites and add the blog subdirectory on the end. It would look something like this:

http://www.example.com/trends/

The third line will say FTP directory. This will vary depending on your webserver configuration, just make sure you add your subdirectory. Mine looks like this:

www/trends/

The other settings we’ll leave with the existing configuration, so hit ’save settings’.

At this point you should make a test posting to make sure everything is working. If you open your browser window, and visit your website www.example.com/trends/ you should see your test posting. Once everything is working we’re ready to move to using your template instead of the one of the prebuilt ones. You could certainly use one of the blogger templates I just find it creates a better user experience if all of the pages have the same look and feel. This way your websites visitors don’t get confused.

The first thing we’ll need to do is change the template. So take your existing file and open it up in your favorite HTML editor. Then make the following changes:

1. Change the title tag to the following:

   <$BlogPageTitle$>

2. Change the H1 tag to the following:

   <$BlogTitle$>
   

3. Insert the following into the main body section:

   <Blogger>
   
   <a name="<$BlogItemNumber$>"></a>
   
   <BlogItemTitle><BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl><$BlogItemTitle$><BlogItemUrl></a></BlogItemUrl><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></BlogItemTitle>
   
   <$BlogItemBody$>
   
   <MainOrArchivePage>
   
   <!-- Begin #comments -->
   
   <ItemPage>
   
   <div id="comments">
   
   <BlogItemCommentsEnabled><a name="comments"></a> <$BlogItemCommentCount$> Comments:
   
     <dl id="comments-block">
   
     <BlogItemComments>
   
      <dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
   
        <$BlogCommentAuthor$> said...
   
      </dt>
   
      <dd class="comment-body">
   
   <p><$BlogCommentBody$></p>
   
      </dd>
   
      <dd class="comment-timestamp"><a href="#<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>
   
    <$BlogCommentDeleteIcon$>
   
   </dd>
   
     </BlogItemComments>
   
   </dl>
   
   <p class="comment-timestamp"><$BlogItemCreate$></p>
   
   </BlogItemCommentsEnabled>
   
   <p class="comment-timestamp"><a href="<$BlogURL$>"><< Home</a></p>
   
   </div>
   
   </ItemPage>
   
   <!-- End #comments -->
   
   <MainOrArchivePage>
   
   </Blogger>

4. Lastly, insert the following into the side panel where you want the blog archive links to go:

   <MainOrArchivePage>
   
   <h2>Previous Trends</h2>
   
   <ul>
   
   <BloggerPreviousItems><li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li></BloggerPreviousItems>
   
   </ul>
   
   <h2 >Archives</h2>
   
   <ul >
   
   <BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives>
   
   </ul>
   
   </MainOrArchivePage>
   

You should end up with something like this file. Yes it looks ugly now but none of the blogger magic has had a chance to work yet. So take your file and copy it into your clipboard. Then select the blogger ‘template’ tab and chose ‘edit current’.

Paste the contents of your clipboard and hit ’save template’. At this point you’ll want to make a test posting and play around with the spacing and placement. Once you’re happy you’re almost done. Now just go back to your original files and add a link into your trends blog, and you’re done! See an example here. The ‘trends’ link on the left hand side brings you into the ‘blog’ section.

In Part II I’ll show you how to integrate it with dynamically built PHP, ASP, JSP and using include files.

Technorati Tag blogging

Popularity: 20% [?]

Sphere: Related Content

6 Responses to “Integrating Blogger Into Your Website, Part I”

1. Andrew Says:
   November 13th, 2006 at 5:29 pm

   Have you posted Integrating Blogger Into Your Website, Part II yet? I couldn’t find it on your blog.

   - Great stuff by the way

   Thanks,
   Andrew

2. Pratheep Says:
   December 7th, 2006 at 12:41 am

   EXCELLENT Post I like ths very much. now going to foward this link to my friends. Soon, please post the 2nd part…

   Pratheep

3. Didier Says:
   March 3rd, 2007 at 12:55 pm

   Hi,

   I have the same question as Andrew: can i find Integrating Blogger Into Your Website, Part II yet?
   Very good tutorial, thx!!

   Didier

4. R Deuninck Says:
   May 21st, 2007 at 5:05 am

   http://www.example.com/trends/
   Entering the above results in a warning, only allowed to enter
   http://www.example.com

   Any suggestions?

   Cheers

   Rudy

5. Jezebelus Says:
   June 18th, 2007 at 7:29 am

   Very useful, I will put it on my site. Thanks.

6. JamesZol Says:
   October 10th, 2007 at 1:22 pm

   This is an ancient post…but I thought I would try to ask: Did you ever end up doing a part 2? Also, do you have any recommendations regarding style sheet issues regarding this info? For example, the Blogger section of my page calls on classes that aren’t in my style sheet - do I need to add a style sheet from Blogger?

   Overall though, this info is still really useful. Could there be an easier platform now - is WordPress this easy to integrate?