Google Blogger Website Integration

Posted by Paul on 24th June 2009

Blog Integration on paulpepper.com

I’m currently working on a Java-based Content Management System (CMS) to integrate into my paulpepper.com website, but it’s very much a background task, taking second place to client work. I have a whole bunch of archived notes and articles and on-going technical notes (such as this one) that I would like to make available on my website.

When a prospective client recently enquired about getpepper creating a website for them, incorporating Google’s Blogger FTP publishing facility, it led me to learn more about Blogger’s publishing facilities. In less than a day of exploring what could be done with Blogger, I’d seamlessly integrated its FTP publishing facility into the paulpepper.com blog section, maintaining visual consistency with all other parts of the site.

Site Integration With Google Blogger

Google’s Blogger provides most of the features required to publish a blog on a domain, so long as a few basic administration features are available on the domain’s publishing server. Using Blogger’s FTP publishing facility, a set of static files is created. These include:

A main index page providing a chronological ordering of blog posts
A page for each label/tag containing all associated blog posts
A page per blog post
A file containing the blog RSS news feed data

All these files are pushed up to the HTTP server on which the blog will be published using FTP. After the initial files and directory structure have been created by Blogger using FTP, single posts are pushed up to the server as they are published. The whole blog can, however, refreshed from the Blogger dashboard.

Domain Server Set-Up

Firstly, you must have some degree of FTP configuration on the server that hosts your site. Here is an outline of the steps that you might follow in order to configure your server for integration with Google Blogger.

Create a user that Blogger alone will use when publishing content to your site. On Debian-based Linux distributions the VSFTPD server allows creation of virtual users for use solely with the FTP server, avoiding the need to add a user to the system.
Establish where abouts on the HTTP server the blog will be published from and permit FTP write access to that directory for the newly created user.
If your FTP server permits, then be sure to jail the user to that directory in order to minimise any damage that might be done should the user’s FTP account be compromised.

Blogger Configuration

Here’s what you need to do within Blogger to publish to your FTP server.

Choose the blog that is to be published from the Blogger dashboard.
In Settings > Permissions, allow anyone to read the blog.
In Layout > Edit HTML, click the link titled Revert to Classic Template – Google appears not to have enabled processing of their new Blogger tags for FTP publishing.
After completing the previous two steps, the FTP Publishing option should become available on the Settings > Publishing section. You should now complete the following details:

FTP server address
Root URL of the published blog (e.g. in my case this is http://www.paulpepper.com/blog), not forgetting the http://, which Blogger seems to require.
Path to where the blog will be pushed by the Blogger FTP client – this will be relative to the directory in which the FTP user has been jailed.
Published blog’s main archive filename – index.html by default, though be careful not to overwrite any existing file if you wish to serve up your own, alternative blog default directory index page).
The filename that Blogger should use for your blog’s RSS feed.
FTP username and associated password (refer to server configuration, above).

You should now be able to publish to the server and view the published content.

Blog Visual Formatting

Visual formatting is performed by providing blog page layout using the Blogger classic template tags. Go to the section, Template > HTML, where you’ll find a rather mingy box in which you can write (or maybe paste) your HTML, CSS and template tags. The Blogger tags allow access to various parts of the the blog, such as; blog post content, author name, publication date, etc. Conditional tags are also available permitting different blog archive views (main chronological view, label view, etc) to be formatted in a single HTML file.

Blogger offers a default HTML file and you might find this helpful when learning about the Blogger template tags. I’d recommend making the following changes for improved integration with the remainder of your website.

Turn off the blogger navbar (the “off” option only becomes available once FTP publishing has been fully enabled).
Don’t use Blogger’s <$BlogMetaData$> tag if you want to use your own favicon – part of the output of the <$BlogMetaData$> tag references the Blogger favicon. If you omit this tag, then you should manually insert some of the HTML tags that this template tag would have included for you:

<meta http-equiv="Content-Type"
    content="text/html;
    charset=UTF-8"
/>
<link rel="icon"
    type="image/vnd.microsoft.icon"
    href="http://your-domain.com/favicon.ico"
/>
<link rel="alternate"
    type="application/atom+xml"
    title="Blog Title - Atom"
    href="http://your-domain.com/atom.xml"
/>
<link rel="stylesheet"
    type="text/css"
    href="/css/mystylesheet.css"
/>

Don’t embed any blog-specific CSS in the head of the blog pages as the example theme demonstrates (I guess there are few other options for the default theme). Add any new CSS to your site’s CSS files and reference those files in your blog pages, just as you normally would. This gives you access to your site’s existing styling and of course allows browsers easily cache the CSS.

Tags: blog