Create Your Own LDS Blog Portal using XHTML, CSS, JavaScript and the Google Feed API

Some discussions just don't fit into a well defined box. Use this forum to discuss general topics and issues revolving around the Church and the technology offerings we use and share.
User avatar
New Member
Posts: 37
Joined: Fri Jan 19, 2007 10:47 am
Location: Orem, UT

Create Your Own LDS Blog Portal using XHTML, CSS, JavaScript and the Google Feed API

Postby jmaxwilson » Wed Jul 25, 2007 2:07 pm

Over the last couple of years I have been approached by various individuals looking for a programmer to develop an LDS blog portal.

There are, of course, already a couple of popular portals for keeping up with blogging by LDS members, but there have sometimes been those who are dissatisfied with the blog selection. Some feel that too many apostate and borderline apostate blogs are included, while others don't feel they are included enough.

Well now anyone can, with a very small amount of effort, create and host his or her own public or private LDS blog portal.

I am not really interested in maintaining my own LDS blog portal to compete with existing portals, even though the code upon which the most popular of these,, is available for free from its creator, Russ Johnston.

However, I do have an interest in new technology, and as a personal challenge, I wondered if I might be able to create a near clone of his portal, using only XHTML, CSS, and JavaScript in conjunction with the nifty new Google Ajax Feed API.

The resulting application is pretty cool, even if I do say so myself. It reproduces much of the functionality of the Mormon Archipelago portal, without any need for server side code, or complicated feed caching. And even better, it accomplishes it in about 38K of static XHTML, CSS, and JavaScript that runs entirely in the user's browser and communicates to Google to fetch posts from the blogs it aggregates.

And because it requires no server side technology, it can be run from just about anywhere, even from a blogger site or even your own computer's hard drive or desktop!

Check out the example running on blogspot at

Anyone is free to download the blog portal code and roll their own LDS Blog portal, add or remove feeds, and organize them how ever they wish.

The code can be downloaded in two flavors: a multi file version that splits out the code into 3 separate html, css, and javascript files, or the single file version that includes all of the code in a single html file that can be used as a blogger template.

Download Blog Portal Multi File version from:

Download Blog Portal Single File version from:

I have maintained the general feel, terminology, and blog groups used by because my personal challenge was to create a clone using only client-side technology and I thought it would be good for people to start with something familiar that they could then tweak. Modify it however you would like to include or exclude blogs, group them differently, or change the labels, how posts are displayed, or even the whole layout if you like. It is very flexible.

Of course, the code can be used to create not just an LDS blog portal, but any kind of blog portal; to aggregate and group posts from any number of websites that offer RSS Feeds and display them in groups on a single page.

*Some technical details*

The most difficult part of setting up the blog portal is getting your Google API Key for the website on which you intend to run the portal. You will need to have a Google Account. If you have a gmail account, you already have one. If not, you can sign up at

To generate the Google API Key for your website, go to . Login with your Google account if necessary, agree to the Terms of Use and enter the url of your website. Then click "Generate API Key". Google will generate a key that will look like a long list of letters and numbers.

Open up the index.html file for the portal in a text editor and find the following line (about line #17 in the multi file version, line #40 in the single file version):

var FeedAPIKey = '';

Copy and paste the API Key that Google generated in between the single quotes. Like this:


Then save the index.html file.

At this point, the portal should be fully functional, even if you open it in your browser from your own hard drive or desktop.

The feeds are grouped and displayed using a custom feedGroup JavaScript class that I wrote as a wrapper for the Google Ajax Feed API. If you want to add, remove, or move a feed from one group to another, simply find the line of JavaScript where it is added to the group in the html file and make the changes.

For instance, if you wanted to add the feed for the official website to the first group, you would find the lines where the first group is configured and add the following:


That is it. Now save the html file and reload it in your browser and the most recent posts to will appear mingled with other posts from sites in the first group.

The download includes as readme file with some additional details, and feel free to ask questions or give feedback here or on my blog.

Return to “General Discussions”

Who is online

Users browsing this forum: No registered users and 1 guest