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 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:

ajax workflow

Ajax execution starts whenever 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 its 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 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:

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 information they need and neither go the user. 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 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.

Javascript, enabled or not?

As I have explained before that 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 later in the post.

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.

Ads impressions:

Displaying ads is a basic mean of earning through a blog while ajax website can give you a big loss in your revenue because some major ads platforms do not support ajax to display their ads on a typical web page. Refreshing the page is the major requirement of an ads agency in order to run the business and page refresh is not possible in 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. Here are some important resources that can be fetched through this technique.

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 some one 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, their 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 the demonstration of a typical Blogger template. As you can see, inside var=’post’ we have placed the main post content. The link inside the main heading of post, a class, data-postid attribute and href attribute is also added.

What is essentially important is that every link that can be asynchronously accessed should have a specific class, in the above code 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 in blogs today, or you can use an unconventional AJAX method that I’m going to use here, not because it’s easy, but 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 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.

Add a Comment

Your email address will not be published. Required fields are marked *

Enjoy best web development services at an affordable price. Looking forward to build a good relationship and serve you better...

ABOUT CODINGACE

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.

Nohman Habib

CEO: codingace.com

Request a Quote