How to add post views counter to blogger

we are brought a new tutorial on blogger for you today.This applies to the blogger.Many people come to a normal blog.And many people are concerned about the views of the blog.If there are too many views on the blog, many will visit your blog site

How to add post views counter to blogger

we are brought a new tutorial on blogger for you today.This applies to the blogger.Many people come to a normal blog.And many people are concerned about the views of the blog.If there are too many views on the blog, many will visit your blog site.You've seen views counters on different sites.Similarly, your blog can easily add views counter.Also, on a blog site, you can separate views, page views counter and post views counter.page views counter is a number of views on each pages blog.Also, post views counter is the number of views per post.Now you have some knowledge about this.


Creating your Firebase Account

You must first create a firebase account for this work.

1.First, go to https://firebase.google.com.
2.Then click GET START button.
3.Now click Add project.
4.You can then see a new window.Fill in the details and click CREATE PROJECT button.
Add post views counter to blogger
Creating your Firebase Account
5.Then go to Database section and click GET START button.
Add post views counter to blogger
Creating your Firebase Account
6.Now go to the RULES tab.You can see a code there.Then Copy and paste the following code instead and click PUBLISH button.There you can see a massage as "Your security rules are defined as public, anyone can read or write to your database".Dismiss it.
[{
 "rules": {
 ".read": true,
 ".write": true
  }
}]


7.Now click Setting icon and go to Project settings.Note the GENERAL tab of Project ID.
Add post views counter to blogger
Creating your Firebase Account
Now the firebase account settings have been completed.Next, add post views counter to blogger.Follow the steps below.

How to add post views counter to blogger

1.Go to Blogger » Template » Backup your Template » and Edit HTML.
2.Find (ctrl+f)  <data:post.body/>
2.Now Copy this code then paste it before <data:post.body/>
[<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views]
3.Now Find (ctrl+f) </body>
4.Copy the following code and paste it before </body>


[<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/><script>$.each($(&#39;a[name]&#39;), function(i, e) {var elem = $(e).parent().find(&#39;#postviews&#39;);var blogStats = new Firebase(&quot;https://Project-ID.firebaseio.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));blogStats.once(&#39;value&#39;, function(snapshot) {var data = snapshot.val();var isnew = false;if(data == null) {data= {};data.value = 0;data.url = window.location.href;data.id = $(e).attr(&#39;name&#39;);isnew = true;}elem.text(data.value);data.value++;if(window.location.pathname!=&#39;/&#39;){if(isnew)blogStats.set(data);elseblogStats.child(&#39;value&#39;).set(data.value);}});});</script>]


5.Now paste your Firebase Project ID instead of Project ID.


6.Finally save your Template

Note :- If post views are not working after the above step, .Copy the following code and paste it before </head>


[<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>]


Everything is right now.Next you can see the view counter in your blog post.So you know about How to add post views counter to blogger, Hope you like the post, don’t forget to share it with your friends and leave a comment below if you are facing any problem at any step in the method discussed above. Thank You.

COMMENTS

BLOGGER: 9
  1. very nice and helpful becuase it is very helpful to build a trust in readers

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Replies
    1. but plz help i could'nt till find views on my page,,like no one can see my views,,how can i solve it,,,i have followed the above procedure

      Delete
  4. but that doesn't shows my actual post views

    ReplyDelete
    Replies
    1. go to firebase/database/realtime7 on pages you can see the actula number counted the you can modifie. in that apartat you can see the post tile and change number of views

      Delete
  5. Good post is your theme magone pro। I use free version theme my blog techboyreal.com

    ReplyDelete
  6. hello i try to implement this on my blog, and try to install in snippet on post. but i have some problem, i'm using infinity scroll and the firebase count not refresh the value number after infinity scroll the post. how the views still display even the infinity scroll active?

    ReplyDelete

Name

Apple,4,Apps,8,Blogger,48,Emoney,9,Facebook,10,Graphics,19,Health,3,News,8,Product,2,Science,4,SEO,37,Software,6,Sponsored,5,Technology,118,
ltr
item
SBmade | New Data Of Technology: How to add post views counter to blogger
How to add post views counter to blogger
we are brought a new tutorial on blogger for you today.This applies to the blogger.Many people come to a normal blog.And many people are concerned about the views of the blog.If there are too many views on the blog, many will visit your blog site
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheN2NWcqd7vuwxj_hOjuz26IDxXjmNgJTg36D1-B-eKYYedJLw9bBy1ZGxWcBZpbcsUxzhW3hQmgJSa0kgYRJDBdsCBe3cXkwDFSWXH1P99slRRTqrFPxyTJWJReKkaBtneDa3IM_bPoY/s640/add-post-views-counter-to-blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheN2NWcqd7vuwxj_hOjuz26IDxXjmNgJTg36D1-B-eKYYedJLw9bBy1ZGxWcBZpbcsUxzhW3hQmgJSa0kgYRJDBdsCBe3cXkwDFSWXH1P99slRRTqrFPxyTJWJReKkaBtneDa3IM_bPoY/s72-c/add-post-views-counter-to-blogger.jpg
SBmade | New Data Of Technology
https://www.sbmade.com/2018/02/how-to-add-post-views-counter-to-blogger.html
https://www.sbmade.com/
https://www.sbmade.com/
https://www.sbmade.com/2018/02/how-to-add-post-views-counter-to-blogger.html
true
5296011179804877962
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content