How to Add Post Views Counter on Blogger ?

How to Add Post Views Counter on Blogger

Bloggerbyte - How To Add Post Views Counter To Blogger- I've been looking for some articles about adding post views to bloggers and most of them aren't working. Counter view is to display the number of views on articles. And counter view certainly has the benefit of making visitors know which articles are most viewed so they know that the article is really useful.

First Create a Firebase Account:

  1. The first thing you have to do is create a firebase account. If you already have then let's go for next step. *Make sure you are on this url:https://console.firebase.google.com/project/_/firestore~2Fdata
  2. Create a New Project
  3. After loging in, create a new project by following these instructions;
  4. Click on "add project"
  5. Enter project name and continue until the project is created. You will enter the project automatically.
  6. Select "Realtime Database"
  7. Create new Database
  8. Select "test mode" and cick "Enable
  9. Update Rules of database by replacing with below code.
  10.  {
      "rules": {
        ".read": true,
        ".write": true, 
      }
    } 
  11. Get the project id from setting > project setting

Thats it ! You have successfully create a WORKING Datebase for How to make Post Views Counter in Blogger Posts.

The following step by step in creating a view counter on blogger:

1.Login to Blogger, Enter to THEME , Then Select Edit HTML .
2.Make sure you have installed Jquery Library and Font Awesome CDN on your blog if not then paste it just below all meta tags or just below <head> tag.

<!-- Jquery Library and Font Awesome CDN -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>

3.Copy below code then paste it before <data:post.body/>

<b:if cond='data:view.isPost'><span class='post-view' expr:data-id='data:post.id'><span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span>Views</span></b:if>

4.Paste This Script above </body> in your HTML as shown below.

<script>
  /*<![CDATA[*/
/*! bloggerbyte-Firebase-post-view */
jQuery.getScript("//cdn.firebase.com/js/client/2.3.2/firebase.js").done(function(){$.each($(".post-view[data-id]"),function(e,a){var i=$(a).parent().find("#postviews").addClass("view-load"),t=new Firebase("https://md-count-view.firebaseio.com/pages/id/"+$(a).attr("data-id"));t.once("value",function(e){var o=e.val(),d=!1;null==o&amp;&amp;((o={}).value=0,o.url=window.location.href,o.id=$(a).attr("data-id"),d=!0),i.removeClass("view-load").text(o.value),o.value++,"/"!=window.location.pathname&amp;&amp;(d?t.set(o):t.child("value").set(o.value))})})});
  /*]]>*/
</script>

Warning!
Please change your firebase app id with you have created.

5. If you have done above, click SAVE.

That's all this article about How to Add Post Views Counter to Blogger for those of you who are still confused or have other questions about bloggers, please comment in the comments column below this article.

About the Author

“Hustle in silence and let your success make the noise.”

6 تعليقات

  1. Couldn't copy the code
    1. Check now, it's working
  2. Can I use your code above?
    1. Sure, you can
  3. hello, is firebase free?
    1. Yes, Its Free
Check the "Notify me" box to get an email notification if someone replies to a comment.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.