Going through blogger templates, I found that there were only a few Ajax based themes, even after the years of launching of AJAX based technology, and it made me want to write this article. So what does happen in an Ajax based template is, whenever a user visits your blog or site, all the scripts, including css and js files are loaded once, when the initial page is loaded and after that, all the requests are made through Ajax. Thus, there is no further page load, after the first one and it adds interactivity to design and user experience. Data is sent back to the site through Ajax technique in plain text and will be placed in the respective DOM without refreshing the page again and again.
How Does all of this Ajax phenomenon actually works:
Now during all of this process, no page load takes place and this is the actual beauty of Ajax. This thing is also possible and supportive by the blogger. Some of the elements, like recent posts and comments are already being processed through Ajax in blogger, however, we may not have noticed that because it does not require a user action. While it seems simple, creating a whole blog with ajax is indeed complex and some important points should be kept in mind before proceeding with Ajax based template development.
Some typical issues related to AJAX:
SEO related issues:
The first and most important one is SEO or Search Engine Optimization. Ajax based data are always loaded in the template after the initial page load and here a problem arises. The search engine bots will get nothing in the page, when it will go through it. This will result in low page ranking in search results and thus can destroy revenue generation. However, there are some techniques to overcome this problem, but they are complex one and only experienced programmers can implement these.
Linking can be hidden for Search Engine Bots.
Internal linking is of utmost importance when it comes to ranking in google search results. In blogs, internal linking could be in the post or sidebars, like recent posts or comments. So, be careful while using ajax based data load, because it could hide these important internal links from search engines and thus can destroy your site rankings.
Displaying ads is a basic mean of earning through a blog while an Ajax website can give you a big loss in your revenue because some major ad platforms do not support Ajax to display their ads on a typical web page. Refreshing the page is the major requirement of an ad agency in order to run the business and page refresh is not possible with Ajax.
Counting page views:
This simple phenomenon can become a little complex in an Ajax system because blogger page view stats do not support Ajax well. However, you can get better stats with google analytics, but you should go through their documentation in order to get better details regarding where to exactly put their tracking code and how to visualize information.
Implementing Ajax in a blogger template:
Blog:Displays all the posts including blog’s meta data.
Posts: Specific single post using Post Id
Comments: Display all comments by Post Id or single comment using comment Id.
Pages: Display each page using its Page Id.
Lets move forward to step 1, called the authentication process.
The Authentication Process:
When we are accessing some data from a point, there could be a possibility that someone else can make such requests to the same resource and can fetch the same data. In order to stop this practice happening, the first step is authentication, where a private key is created and the request is validated by the server on the basis of this key. To create a key, first go to Google Developer Console and here, create a new project, like you, have might done for displaying google maps in your site. Then click on credentials to request a new key. Add the url and name of the blog as well, so that it can identify it, whenever a request is made from this domain.
Setting up the markup:
There are few scenarios or events to go through first: 1 – Page on load 2 – Internal links 3 – On internal link click
On Page Load Event:
In the example below, we will be using ordinary Blogger Layout data tags to display the content. In general, if every page content is there for a search but to go through well, then there is no issue with it, so do not go through any of the practices related to the page load event
On an internal link click:
In blogger template, in order to render the page through ajax API, the page respective ID should be present, through which it can be actually fetched. The links in navigation and footer can be easily fetched through ajax because they all have their associated IDs. Against each ID, there is a specific URL and it is this URL through which data can be rendered quite easily. Page loading through this method will be fast and interactive.
How the markup is set:
The basic markup is set by creating a starter blogger template file.
The above code is the demonstration of a typical Blogger template. As you can see, inside var=’post’ we have placed the main post content. The link in the main heading of post, a class, data-postid attribute and the href attribute is also added.
JSON based date source:
Below is a list of each type of resource we can use:
blogId, postId, pageId and comment Id must be replaced by unique id of each resource. Following data tags can be used to get these IDs. Blog: Post: Comment: Note: Post and Comments need to be executed in b:loop.
I basically work in the CMS, like Joomla and WordPress and in framework like Laravel and have keen interest in developing mobile apps by utilizing hybrid technology. I also have experience working in AWS technology. In terms of CMS, I give Joomla the most value because I found it so much user freindly and my clients feel so much easy to manage their project in it.
Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...
My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start codingace.com is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.