How to make Post Views Counter in Blogger Posts

Hi guys! Hope you are good and doing some great stuff too. We hope you liked our previous artile about How to make Safelink on main Blog in Blogger. This time i came up with How to add Post Views Counter in Blogger Posts.
How to make Post Views Counter in Blogger Posts


We often see people searching about How to add Post Views Counter in Blogger Posts but due to lack of correct solutions on the internet, they end up with disappiontment. Blogger have a built-in counter but it's not "Post Views", it is "(Total) Page Views". I also been in this situation for more then a year untile now. I found something that's working nicely as i want and thought i would share my hard search with you.

How to add Post Views Counter in Blogger Posts

Please follow these steps carefully to get the correct final results but first create a backup file for your theme.

Step 1 - Create a Firebase Account

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

Step 2 - Create a New Project

After loging in, create a new project by following these instructions;

Click on "add project"
Enter project name and continue until the project is created. You will enter the project automatically.

Expand the sidebar.

Select "Realtime Database"

Create new Database

Select "test mode" and cick "Enable"

Get the project id from "setting > project setting"

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

Step 3 - Installing Scripts

After successfully firebase project creation, we will enter to the final step of adding HTML, CSS & Javascript codes in blogger.

Login to Blogger.com and navigate to "Theme".

Click the arrow icon near to "CUSTOMIZE"

Click "Edit HTML"

Pust the following code just above "/body".
<!-- Post Views Script by Blog.VUInsider.com -->
<script type='text/javascript'>
//<![CDATA[
jQuery.getScript('//cdn.firebase.com/js/client/2.3.2/firebase.js').done(function() {
$.each($("a[name]"),function(e,o){var t=$(o).parent().find("#postviews"),n=new Firebase("//vu-insider.firebaseio.com/pages/id/"+$(o).attr("name"));n.once("value",function(e){var a=e.val(),s=!1;null==a&&(a={},a.value=0,a.url=window.location.href,a.id=$(o).attr("name"),s=!0),t.text(a.value),a.value++,"/"!=window.location.pathname&&(s?n.set(a):n.child("value").set(a.value))})});});
//]]>
</script>
<!-- Post Views Script by Blog.VUInsider.com -->
code-box


*Replace the maked id with your firebase project id. Make sure of doing it as it is very important part.

Now, the last thing is to put the following code inside post container where you want to show your post views count.
<a expr:href='data:post.Url' expr:name='data:post.id'><span id='postviews' title='Views'/></a>code-box

So, this is it from How to make Post Views Counter in Blogger Posts. If you have any questions about it then comment below. We will gladly take time to help you.

Post a Comment

To be published, comments must be reviewed by the administrator *

Previous Post Next Post
Clickadu