How to make a blog hit counter on Blogger (Part 2 of 2)

  • 0
So as you’ve read on this article, we now have an operational keeping the data that we’re requesting it.

Our current job is yet to link the blog to this server and retrieve the data of the server (i.e. the number of view). I must admit that I’m convinced that there is a better way to do it than the solution I'm submitting but my current knowledge in Web programmation are limiting me to this ugly but working solution. So, if you have better idea, feel free to comment this article, it would be very helpful!

First, we need to send a unique non-changing id to the server in order to associate a view count with an article. Happily, Blogger provides us this kind of data with this code:
expr:href='data:post.id'

Second, we need a way to detect if the user is on our homepage or on the article-specific page. Here also, Blogger provides us “nearly-built-in” tool with its condition and a tricky combination:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Here is what happens if we're in article specific page -->     
    <b:else/>
         <!-- Here is what happens if we're not in article specific page -->
</b:if>

Last but not least, we need to display what the server returns and that’s the point where the solution I used is extremely dirty: I used a … <iframe>! It didn’t find any other way with JS, jQuery or whatever! If you find/know a solution, I would be very interested to know it.
Anyway, here is the code used by our blog:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
          <li>
          	<iframe expr:src='&quot;http://lolobosse.pythonanywhere.com/get_count/&quot;+data:post.id' frameborder='0' height='30px' name='about' scrolling='no' width='25%'/>
          </li>
<b:else/><li>
          	<iframe expr:src='&quot;http://lolobosse.pythonanywhere.com/get_count_homepage/&quot;+data:post.id' frameborder='0' height='30px' name='about' scrolling='no' width='25%'/>
          </li>
        </b:if> 

Laurent Meyer, Android Developer
@laurent_m_meyer