How to easily host web content on Google Drive

This article is deprecated, here's a message from Google:

---

Hello from Google,

We announced last year that we’re deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.

On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.

As an alternative to web hosting in Drive, we recommend:

• Blogger—An easy and free way to host websites.
• Firebase Hosting— An alternative if you’re using the web-hosting feature to serve static webpages with items on Drive.

If you have additional questions or need assistance, please contact Google Support.

Sincerely,

The Google Apps Team

---

Last November (2012) Google announced that Google Drive can now host static web content, for example html pages, javascript files, and flash. Here's the article where they announced this: Announcing Google Drive Site Publishing, and here's the documentation: Google Drive SDK.

It all looks very good, you can programmatically make shared public folder for hosting and add content. But what if I just wanted to host some .js (javascript) files which I have ready? Must I write a program to implement this hosting? Fortunately, I don't.

Hosting web files on Google Drive

First you have to create a directory in your drive. It can be a subdirectory (of a non-shared directory), for example in the root I have sub directory "Web Hosting" (private dir) which has all the public web hosting directories I have made.

/Web Hosting
--/Google Drive hosting url tool
--/Some Other Web Project
--/etc...

After you have created the directory, you can upload files there. When you want to begin hosting those files, select "Share..." for the directory, and under "Who has access" change the directory to be public on the web. Copy the "Link to share" url from the sharing dialog.

To get the web hosting url, use this tool ("Google Drive hosting url tool" hosted under my Google Drive):



You can make the url manually, or use the Drive API and "webViewLink", but I made this simple javascript tool for the job. It is a hosting example at the same time.

Other options for web hosting with Google products

You can also use Google Sites to host your files. Google App Engine can be used, too, but that is a bit more compilicated.

Some tips for hosting on Google Drive

• Don't upload multiple files with same name (like two copies of index.html) under the same directory. Use the "Manage revisions" option.
• You can use subdirectories under your web hosting directories.
• Do you have a good tip for Google Drive hosting? Please post it as a comment.

Thanks to Ben for the article idea. :)

Update May 6th 2013:
Updated the tool to handle the new Google Drive sharing urls.

Top Commentators Gadget with avatars

I had a request of this gadget in one blog comment. There are some top commentators gadgets around, most relying on a Yahoo pipe. I knew it can be done with just javascript, with no pipes. Demo: it is installed on this blog, look at the right sidebar. Hope you like it. :)

Features

You can configure the maximum number of top commentators, and minimum number of comments one must have to get on the list (to weed out the 1 comment commentators, if wanted, for example). Own nick and a list of other nicks (for example "Anonymous") can be excluded from the list. Output strings can be translated.

The Script, installing

Add a HTML/Javascript gadget to your blog, and paste the following code into it.

Data provided by Pastebin.com - Download Raw - See Original

Script configuration

There are two CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.

maxTopCommenters: how big the list is at maximum
minComments: how many comments must top commentator have at least
numDays: from how many days (ex. 30), or 0 from "all the time" (max 500 comments)
excludeMe: true, if own comments excluded
excludeUsers: array of usernames to exclude
maxUserNameLength: if 0, don't cut; if > 4, cut lenghty usernames

txtTopLine: specifies, what is output on each line. This text can have simple variables, which are: [#], [image], [user], and [count]. [#] is substituted by position on the list, [image] by commentator's avatar image, [user] by commentator name and [count] by number of comments. Text can also contain html.
txtNoTopCommenters: what to display, if list is empty
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: if true, fetch titles from post feed; if false, titles are generated from url
blogger favico [B]
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this
urlNoAvatar: comment feed offers the icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: ).

cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels

If you have very much comments (thousands and thousands of them), I suggest you to use this as "top commentators of 30 days" gadget or something like that (set numDays variable to 30), so that it won't take too long to load and calculate all the comments.

June 5th 2012: Small CSS update: Blogger changed the paddings of .profile-name-link, that's why I added this line (line 3.):
.top-commenter-line .profile-name-link {padding-left:0;}

August 1st 2017: To fix avatars, please change lines 48 and 49 (article code is updated).

Thumbnail on main page, bigger image on full post

You may have seen those fancy templates, that display on the main page a snippet of the post's text along with a thumbnail of an image inside the post. Maybe you want something like that only from time to time, so installing a new template for that would be overkill and maybe constrains your other options. I will show you how you can do it with a little javascript or CSS for example in Simple template.

Christmassy Concentration Memory Game

If your blog's readers celebrate christmas, why don't you publish them a nice memory game to play on holidays? I tidied one javascript game a bit, made it work on Blogger and also on dynamic views, worked even in a Feedburner feed. With christmassy pictures it looks like this:

Free JavaScripts provided by The JavaScript Source

If you do it under 1:30, that's quite good.

Here is the source for the game. This can be put in a blog post (use html editing mode), a blog page, or some other html page. Probably works in a html/javascript gadget, too. If you wish, upload another set of pictures, and change the image path in the source to use those pictures. Have fun.

Data provided by Pastebin.com - Download Raw

Blogger, javascript and CDATA

In some of my code samples in this blog you will see javascript blocks like this:

<script type='text/javascript'>
  ... code ...
</script>

And in some like this:

<script type='text/javascript'>
//<![CDATA[
  ... code ...
//]]>
</script>

You might ask: What is that CDATA? Why cannot he make up his mind which one to use? Can I stick to one of the notations?

Blogger layout template must be valid XML, otherwise it won't pass validation and you cannot save it. In XML for example character < starts a tag. Lets assume you want to run the following javascript code, which you have found somewhere in internet:

<script type='text/javascript'>
  alert("Tip of the day: 5 < 6 & 1 < 2");
</script>

But if you put that on your template and try to save or preview, you'll get:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The content of elements must consist of well-formed character data or markup.

Now there are two ways to correct this script before pulling out your hair. To make the original script to be valid XML inside script tags, you must escape certain characters, like <, >, and &. And if you don't escape, the template editor will escape " and ', too. The script in your template becomes:

<script type='text/javascript'>
  alert(&quot;Tip of the day: 5 &lt; 6 &amp; 1 &lt; 2&quot;);
</script>

You can use HTML Escape Tool (from htmlescape.net) and similar tools to escape the javascript code, if you don't want to do it by hand. There are also tools for unescaping the characters.

Ok, as you see that "messes up" the code and makes it harder to maintain. Another solution is to mark the code between <script> and </script> tags as CDATA (character data). This tells XML parser that the text is general character data, instead of XML to be parsed. You may have already guessed, it looks like this:

<script type='text/javascript'>
//<![CDATA[
  alert("Tip of the day: 5 < 6 & 1 < 2");
//]]>
</script>

The latter is perfect, you may think. It is good, but, there is a but. If you want to use widget tags for templates, you cannot mark those sections as CDATA. I'll give you a simple example.

<script type='text/javascript'>
  alert("<data:blog.url/>");
</script>

In this script you must not escape <data:blog.url/>, because it is template data tag http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=47270. You can escape "s to &quot;s, and if you don't, Blogger will do it for you. But if you try this:

<script type='text/javascript'>
//<![CDATA[
  alert("<data:blog.url/>");
//]]>
</script>

It does not show your blog address, but the text "<data:blog.url/>", which probably was not the intention.

For some reason, you cannot find this information in Blogger help.

Some references:
Wikipedia CDATA
Javascript and XHTML