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.
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.
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.
To implement this you will need following resources
(a) Webpage.html (b) jquery-1.4.4.min.js (c) elementInview.js (d) Google Docs
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.
To install this in Blogger go through following steps one by one.
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.
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.
great…maybe oneday i will implement it…thanks for the info
Great work………
Great Article
Spreadsheet is not getting updated after changing the feed…what to do ?
Please show me your URL which you are providing as feed in the script editor.
Just for another info, I have added a new line in above tutorial regarding deleting row1 to row201 in the spreadsheet which has been already populated with FunButLearn’s data.
i redirected the feed url to feed burner in blogger and that was the problem ,i rectified that problem and it worked fine in “website.html”.But when i copied the “website.html” source code and tried to edit my blogger template it is showing error.it says “tq has to be closed with proper delimeter” .can you provide a tutorial on how to add the ajax method with my existing template ?
Thanks for informing me, I identified the problem 🙂 The head and body tag in the code were creating the problem. Now I have modified the Webpage.html. Download it again. I also verified the code putting it in my blog. Working great. I have slightly modified the tutorial (regarding providing the spreadsheet key). Check it in above tutorial.
but is this SEO friendly ?
your webpage.html is not loading.
Not loading ??? it is working fine this side. Is JavaScript is enabled in your browser ?
For your info, it is completely SEO friendly. Those who use AJAX page loading with PHP, implement this type of techniques only. The only difference here is that the data comes from Google Spreadsheet instead of database. So no problem at all. If you have any doubt ask SEO experts.
Update: I have uploaded my files in Dropbox. But perhaps Dropbox has changed its protocol to https. So it was denying access. Now fixed the issue. Check it now.
i never seen tech websites with ajax technique.Won’t it affect the page loading time ?
This is the fastest method as the data is fetched from Google Server in JSON format. Accessing JSON object is superfast in JavaScript. Moreover the entire data is not fetched at a time, rather when you scroll down the data comes again from Google server. By the way ajax technique is implemented to decrease the loading-time not to increase it 😉
still i get the error
rajeshsundu, When document is parsed as XML you need to add CDATA section in the script tag. As in Blogger, the code is parsed as XML, you have to include that in your script. Here is an example:
//<![CDATA[
your javascript code goes here
//]]>
Try this it will work.
still the problem persists
What’s the error you are getting this time ?
404 not found
This is not an expected error. I think you are pasting the code at some wrong place, otherwise 404 error…..
nice work 🙂
labnol used this style along ago…
but is this SEO friendly ?
Can i get thumbnail?
As of now the code does not support thumbnail. However you can modify the code to display thumbnail.
Can you please help me modify this code? 😀
Now this is so easy to communicate with Facebook and i hope every one are like to use. To get a wide field in our career such kind of technology is more useful for us. I like to get more information from here.