Integrating Blogger Into Your Website, Part I

Please note Blogger has stopped supporting FTP as of March 2010, so most of this post is deprecated.

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

GraywolfSEO.com runs on the Genesis Framework

Genesis Framework

Genesis lets you to quickly and easily build amazing websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.
It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


tla starter kit

Advertisers:

  1. Text Link Ads - New customers can get $100 in free text links.
  2. BOTW.org - Get a premier listing in the internet's oldest directory.
  3. Need an SEO Audit for your website, look at my SEO Consulting Services
  4. TigerTech - Great Web Hosting service at a great price.