How to create an ajax based blogger template

Going through blogger templates, I found that there were only a few Ajax based themes, even after the years of the launch 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 the 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:

Ajax execution starts whenever the user clicks on any DOM element, like a link or a button, and then a request is sent to the server through general Javascript or jQuery. Then the server processes the request and sends the data back to the browser. The request processing speed depends upon the type and size of the data returned. A good developer always keeps it light as much as possible, without compromising the site’s overall performance.

Now, during all of this process, no page load takes place and this is the true beauty of Ajax. This thing is also possible and supported by the bloggers. 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:

AJAX is completely dependant on Javascript to execute all its processes in a browser. Now the basic problem is, search engine bots do not go through javascript files to get the information they need, and neither do the users. This phenomenon introduces some issues which are listed below.

SEO related issues:

The first and most important one is SEO, or Search Engine Optimization. Ajax based data is always loaded into the template after the initial page load and here a problem arises. The search engine bots will get nothing on the page when they 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 and only experienced programmers can implement them.

Is Javascript enabled or not?

As I have explained before, javascript is required to execute the ajax and if the browser javascript is disabled by the user, then there will be no page load and no data can be presented to the user. Although there are some solutions to it, I will discuss it later in the post.

Linking can be hidden from Search Engine Bots.

Internal linking is of utmost importance when it comes to ranking in Google search results. In blogs, internal links 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 destroy your site rankings.

Ad impressions:

Displaying ads is a basic means 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:

Since Blogger version 2, a more reliable and upgraded API has been provided to fetch data from Blogger’s server with the help of ajax by using JavaScript. These are some important resources that can be fetched through this technique.

Blog: Displays all the posts, including the 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 from 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 the Google Developer Console and here, create a new project, like you might have done for displaying Google maps on 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 a 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 the blogger template, in order to render the page through the ajax API, the page’s respective ID should be present, through which it can be actually fetched. The links in the 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.

<header>
  <!--Header-->
</header>
<div class="main-wrap">
<b:section class="main" id="main" showaddelement="no">
    <b:widget id="Blog1" locked="false" title="Blog Posts" type="Blog">
      ...
      <b:includable id="post" var="post">
        </b:includable></b:widget></b:section><br />
<h2 class="post-title">
<a class="async-post" expr:data-postid="data:post.id" expr:href="data:post.url"><data:post.title/></a></h2>
...  
</div>
<aside>
  <!-- Sidebar -->
</aside>

The above code is a 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 the post, a class, data-postid attribute and the href attribute are also added.

What is essentially important is that every link that can be asynchronously accessed should have a specific class. In the above code, the async-post class will make sure that the link does not redirect the page when it is clicked, but if Javascript is disabled, then the href attribute will work under normal conditions.

JSON based date source:

Below is a list of each type of resource we can use:

https://www.googleapis.com/blogger/v2/blogs/blogId/posts
https://www.googleapis.com/blogger/v2/blogs/blogId/posts/postId
https://www.googleapis.com/blogger/v2/blogs/blogId/posts/postId/comments
https://www.googleapis.com/blogger/v2/blogs/blogId/posts/postId/comments/commentId
https://www.googleapis.com/blogger/v2/blogs/blogId/pages
https://www.googleapis.com/blogger/v2/blogs/blogId/pages/pageId

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.

Final Javascript Code

In a general ajax request, Javascript or jQuery, which is a Javascript library, is used. Either you can use a callback method that is conventional on blogs today, or you can use an unconventional AJAX method that I’m going to use here, not because it’s easy, but because it also allows you to quickly select all links instead of loops.

Just for example, the markup is shown below:

<a class="async-post" href="http://google.com" data-postid="6598240346497962458">Post</a>

The above code will generate a link to the href attribute and post Id attributes of the data attribute. Then click the link, instead of refreshing the page, the contents of the JavaScript below will be loaded into a div.

$(function() {
  var link = $('.async-post'),
    postId = link.attr('data-postId');
  link.click(function() {
    $.ajax({
      type: 'GET',
      url: 'https://www.googleapis.com/blogger/v2/blogs/Blog_Id_Here/posts/' + postId + '?key=YOUR_KEY',
      async: false,
      contentType: "application/json",
      dataType: 'jsonp',
      success: function(json) {
        $('div').html(json.content)
      }
    });
    return false;
  });
});

I just removed the key (for the sake of security). To make it work, simply add your blog ID and key. It’s just a tutorial and a sample of how to fetch a post through Ajax.

One important thing to remember that along with each new page load, keep updating the page title accordingly for a better user experience.