Facebook Style Ajax Page Loading For Blogger

Ajax (Asynchronous JavaScript and XML) is a very famous technology extensively used by Google, Facebook, Twitter and many more websites. It is not a new platform, rather you can say it is getting popular day by day since 2004 when Google implemented it  in Gmail, Google Map and Google Search.

Those who do not know what exactly Ajax is, for them:

"When you scroll down your Facebook page, contents get automatically loaded. How ?"

"While typing in Google search, it displays some smart suggestions almost instantly, How ?"

"While watching cricket score online, the scores get automatically updated in real time. How ?"

I think you got the answers to above questions.

Well, What I gonna do with AJAX


Today I will explain you how to implement this technique for your blog if you are using Blogger platform. Its a common belief that AJAX needs a lot of programming skills, database, server and all. Those who use Blogger, don't even think about it as Blogger neither provide support for file hosting and database, nor we have any control on the server. And it is presumed that without having server and database it is almost impossible to dynamically load contents with some conditions.

But I thought the opposite. Just before a week I imagined how to implement AJAX loading for a Blogger's blog. After a hard exercise of about a week I came to a conclusion. We can obviously use Google Spreadsheet as the database and can implement the same for our blog. It's not even confined to Blogger, rather you can  implement it on any webpage, even for a simple HTML-only page.

Before going ahead lets have a LIVE demo.




How this actually works


The entire thing will be automated with Google Script. So I would say Google Scirpt is the heart of the system. GS will collect data from your RSS feed and store in a spreadsheet. Later we will fire some query with AJAX and fetch the data in JSON format according to our need.

When you scroll to the end of the page an event is fired automatically with javascript.  Then the method $.get(URL, function(response) {}) of jquery asks for the information from the spreadsheet. In place of URL you need to provide your own spreadsheet URL. Google spreadsheet will instantly process the request and will send you the information in JSON format. Again you have to process the JSON data and display on the webpage. The entire process occurs within 2 secs. So hopefully you will not face any performance related issue.


How to make this functional


To implement this you will need following resources
(a) Webpage.html  (b) jquery-1.4.4.min.js  (c) elementInview.js (d) Google Docs
  • First make a New copy of this spreadsheet (Go to File-->Make a copy..)
  • In the spreadsheet you can delete row-1 to row-201 which has been populated with FunButLearn's data.
  • Then goto Tools-->Script Editor
  • You will find a variable called feed in the GS code, change it to your own feed URL with ?max-result=200 appending at the end (Remember you need to add Blogger's default feed URL)
  • Now save the script and run it so that the spreadsheet will be populated with the latest data taken from the RSS feed
  • Now create a trigger of 5 minutes for your script so that it will automatically search for new updates. If you do not know how to create a trigger then refer this page
  • Now go to spreadsheet File-->Share... and make it public on the web. After you share you will get an public URL. Get the spreadsheet key from there and open Webpage.html in notepad
  • In Webpage.html replace the spreadsheet key with your own key.

    Example: You will find the following line in Webpage.html

    var spreadsheetkey = "0AgHK_Z79lrOmdG1DbWhidXBuaFRoaGE4bHpJZzBVWkE"; //Pease provide your spreadsheet key here
  • Now you are done, open the Webpage.html in browser. Hurrrayyyyyyy :)
  • You can also copy the code to your blog.


Make your own copy of the resources


I have already listed all the resources. Make a new copy of all and link to them. Do not link to my resources otherwise you may face performance related issues. In Webpage.html I have included loader.gif. Also make your own copy for that.

I have verified everything in latest versions of Firefox, Chrome and Opera. It is working great in these browsers. In IE8 it will not work. I have not tested in IE9, please check the same and inform me. 

If you are completely new to the coding world, then take help of somebody who can guide you for the same. For any doubt drop a comment.

How to install this in Blogger


To install this in Blogger go through following steps one by one.
  • Login to Blogger and go to Template-->Edit HTML. Make a back up of the entire code.
  • Now you need to remove the existing post widget from the code as you can't remove it from the front-end. Search for "Blog Posts" in the code and get the following line
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
  • Now search for its closing </b:widget> and remove the entire widget.
  • Now save your template and go to Blogger-->Layout
  • In the layout view add an HTML widget and paste the AJAX code there.
  • Now you are done. Enjoy your blog.