Skip to main content

How to Add Likes and Views Button in Blogspot?

How to Add Likes and Views Button in Blogspot

Here I am going to show you a simple trick which can be used to keep track on every views plus add a like button with various customize options. But first lets just dive into the code.

Instead of going into Layout we are going to paste this code in our Post Itself. Just change Compose View to HTML View & Paste it under your post content.

This Code is for View Counter (Blogspot also has its own widget called Blog's Stats in Add a Gadget option. But it will not show you View Count on Each Post / Pages. But this code will.)

<!-- View Counter BEGIN -->
<script>
window.onload = function() {
     var xhr = new XMLHttpRequest();
     var url = window.location.href.replace("https://","").replace(/\//g, "");
     var urlr = url.substring(0,53);
     //document.getElementById("demo").innerHTML = urlr;
     xhr.open("GET", "https://api.countapi.xyz/hit/"+urlr);
     xhr.responseType = "json";
     xhr.onload = function() {
          document.getElementById("viewcount").innerHTML = this.response.value;
     }
     xhr.send();
}
</script>

<h1><span>Views: <span id="viewcount"></span></span><h1>

<p id="demo"></p>

<!-- View Counter END -->

So what is happening in this code? What the script does is when some one loads the page it will get the url of the current page using javascript and pass the url to count API which will keep track on exact views on each page by UNIQUE URLS passing response in JSON and display the number as Views.

Note:- Incase the code does not work for you. Un-comment "//document." and save, which will show your unique URL in id="demo".  Fix your URL Name / Post Title and comment out "//document." and save.

For Documentation Click HERE

 

This Code is for Like Button Counter

<!--LikeBtn.com BEGIN-->

<span class="likebtn-wrapper" data-theme="padded"></span>
 
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!--LikeBtn.com END-->

For Documentation Click HERE

Views:

Comments

Post a Comment

Back to Top

Popular posts from this blog

How to get View Count in every single page in blogspot / blogger?

Before we start let me answer some of your following questions that you might be thinking...   Q. What is "View Count" anyways? Ans. With View count you can keep track on how many people have visited your blog site with a total number of counts displayed in your blog. It also gives you a better idea how many people are coming to your blog daily. Q. Blogspot / Blogger already has this feature so what so special about this tutorial? Ans. Yes, I agree blogspot does have this feature and its great no coding involved but you cannot do this... Suppose you have made 2 posts: Page A, Page B. Whatif you want to know how many people visited Page A Vs Page B. Suppose people visited Page A - 100 times and Page B - 5 times. Blogspot View Count will show you only total visits i.e. 105 visits. And not for Page A or Page B specifically.  So to see Views for Each page... this is how to I did. Just copy paste this code on your blogspot page and you are good to go. <!--- //////////...
1 comment
Read more

[SOLVED] Google-served ads on screens without publisher-content

Waiting for Approval? And you get a mail something like this? ========================================= Your Publisher ID: pub-123456789 Sign In Thanks for submitting your site "<Your_WebSite.com>" for AdSense. The team has reviewed it but unfortunately your site isn’t ready to show ads at this time. There are some issues which need fixing before your site is ready to show ads. For more information, visit the ' Sites ' page in your account. You can find more details and application tips in the below video : We encourage you to review and update your site. Once you’ve done so, you can request a review. Our specialists will review your site for compliance with our Program policies , so make sure to resolve all of the issues. Watch our ' AdSense Site Approvals ' video series to troubleshoot your policy issues and start earning money from your site. Go to Sites ...
1 comment
Read more

What is the Limit to Post in Blogspot Per Day?

How many post can you make in blogger per day? Maximum Limit to Post per day for a blogspot user is:-  100 blogspot posts per day If you exceed more then 100 then you will start to get bounce emails that your post has not been delivered. Note:- The limit of 100 is for a "Single Gmail Account Per Day" . Example. If you have 2 blogs using the same account and you have posted 50 post for blog A and 50 post for blog B it will be still counted as 100 collectively .   Views:
Post a Comment
Read more