Thursday 28 May 2015

Using Documents or Script with Blogger

If you wanted to add an image or a video to your Blogger blog-post then you would have no problem; it offers toolbar buttons for exactly that. However, suppose that you wanted to add a document, or even a text file, as an attachment. What do you do then? You would have the same problem if you wanted to add some scripting or CSS files to be referenced from the HTML of your blog page.


Blogger doesn’t let you add arbitrary files to your posts, and so you would need another location to store them that provides you with associated URLs — the http:// addresses that link to them. Since Blogger is owned by Google then Google Drive (previously Google Docs) is the obvious choice, but — as usual — things are never as simple as you expect.

Updated Content (12 Jan 2017)

The original version of this article (retained below) made use of a Google Drive feature where URLs, of the form googledrive.com/host/ID, were exposed for individual files, known from here on as “web hosting”. On 31 Aug 2015, Google announced they were removing their web hosting feature, and were giving users one year to find an alternative. This was all very well, except that I was not notified directly, and there were no warnings when I utilised this feature within Google Drive. If I hadn’t received a direct email on the 18 August then I would not have known. I therefore had only a few days to find an alternative.

Google Sites, which I already use, appears to host files that can be accessed from elsewhere. However, the small print indicates that it doesn't really host "files", and that all resources (including pages) are actually BLOBs (Binary Large Objects) held in a database. Nevertheless, I tried to add my files to a hidden page. A javascript file appeared to work, although I came across articles suggesting that the development team tried to prevent this, which was rather worrying! The simpler case of simply being able to click on a link to, say, a plain text file did not work. Instead of allowing it to be viewed in another tab, it forced the operation into a download dialog and there appears to be no way around it. For some file types (notably image, PDF, and SVG), Google Sites offers a choice of View or Download, controlled by a d=0/1 URL parameter, but for no justifiable reason this is not offered for any other type, including plain text.

None of the alternatives suggested by Google were relevant to this requirement:

Google Cloud is designed for much larger amounts of storage (and applications) and seems to be aimed at corporate customers. It is a paid service, and although the payments are relatively cheap, you still need to supply your credit card to take advantage of the $300 (!!) 60-day trial.
Google Firebase is a product I'd not heard of. It appears to be free and uses a Google Cloud “bucket” (similar to a folder) to host your files. This sounds great, except that there is only a programmatic interface to it — no user interface.
Google Drive API is similarly no use for access from Blogger pages because it's also just a programmatic interface.
Google Domains is only useful for people wanting to host a Web site with Google. I already have a couple of web sites hosted by Google Sites and so I have no need for Google Domains.

I tried to make the case to Google that they now have no viable alternative to the particular feature that I was making use of, but there has been no feedback to date.

By far the easiest alternative — even easier than using Google Drive — would have been to switch to Dropbox and place your files in their special Public folder, or ideally a sub-folder of this (e.g. Public/BloggerAttachments). The Share option on such files immediately gave you a working URL that can be used from any other site, and it even looked like a file name (in contrast to Google drive’s cryptic URLs). I wasn’t keen on spreading my data between two different companies, but Google had forced this upon me.

Unfortunately, things were still not as simple as I expected. From 4 Oct 2012, Dropbox accounts didn’t have a Public folder by default. Worse still, as from 15 Mar 2017 it would become deprecated; your Public folder, and any associated sub-folders, would become private. Any files in there would have to be moved to a normal folder and new URL links created. My recommendation, therefore, is to use a folder outside of the Dropbox Public folder, and maintain your links manually.

One last obstacle, and this mirrors what I had previously had to do with URL links in Google Drive: the links it gives you have to be modified if you want your browser to have control over how they’re accessed, and not letting Dropbox “present” them.

Luckily, this is quite easy. A typical Dropbox URL link will look as follows:


What you need to do is change the “www” to “dl”, and then remove the “?dl=0” parameter, resulting in something like:


This is now the method I use, and will continue to use until yet something else is changed or broken. Sigh!

Original Article (now deprecated)

To get started, you need to go to your ‘my drive’ in Google Drive, and create a new folder: say, ‘Blogger Attachments’. On the ‘Share…’ right-click menu option, make sure this new folder is publicly visible on the Web. Then upload the files you need into this new folder.

If you right-click on any of the files and select the ‘Get Link’ option then it will provide you with what looks like a valid link, such as https://drive.google.com/open?id=FILEID&authuser=0, except that it’s not a shareable link. For instance:



Instead, select the ‘Share…’ option from the right-click menu, and copy that link. This new link will still have the long file identification in it, as highlighted in red above. Although the link is shareable, it is designed to open or view the file using an appropriate Google application, but that’s not what we want. We simply want a shareable link that can be used to reference the file. In order to achieve this, we need to modify the link from this form:


For instance:


When composing your Blogger page, you can then use this to reference your document, or other file, by using the ‘Add Link’ toolbar option. When someone clicks on that link, in your final blog-post, then it will use the normally registered application (e.g. Microsoft Word, or Acrobat) to view it.

If you’re creating more complex HTML to go into your blog page then this same link can be specified on ‘src=’ attributes to load script files. An example of such a blog-post can be found at Measurement Tools which uses Javascript to provide tools for converting units of height/weight and for manipulating dates.

No comments:

Post a Comment