How to add page view, post views counter Plugin For Blog or website 2016.
Ever wonder how many people visit your website? If you're an administrator of a website then sure you are. Post view counter or tracker is a widget or plugin that counts (and also displays) how many times a posts has been viewed. This helps blog author (and also readers) to know how much popular that post is. But to create this type of plugin, you have to know php, database, javascript etc, which is not so easy. However I've found a website, Firebase that also does the same job. You can create free accounts at Firebase and you can use their scripts to install post view counter in your blog. It doesn't matter which blogging platform you're using because Firebase works with all major blogging platforms and websites.
Follow Step:
- Step Create Your Firebase Account
- Step : Create Your Database at Firebase
- Step : Install Post View Counter Plugin
Signup for your free account. Follow the steps carefully given at Firebase to activate your account.
Firebase offers you to create 10 unique databases. In our case, only one database is required. Create one to store your post view stats. Give your database a unique name
- Sign in to Blogger account and go to Blogger dashboard.
- Click the arrow adjacent to 'Go to post list' icon and select 'Template' from the drop down menu. Alternately you can click 'Template' from left navigation menu if you're already within your blog.
- Click 'Edit HTML'.
- Skip this step if jQuery library already installed in your blog. Otherwise Search for (Ctrl+F)
</head>and paste (Ctrl+V) the following code before</head>.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
- Search for (Ctrl+F)
</b:skin>, copy (Ctrl+C) the following code and paste it (Ctrl+V) before</b:skin>.
.post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbYLC6uOO8MpkA0f9uGaCyzMHmPIsHZS5iuLIF0_lNGSi2w3_edWcHiJGgCkvLl-OCzqrXIOikVYINDe3NP25f7Ps4aRJJ5n3axrMS4JqciSSAAM7050QO0zI23-2Lxs9avXen3gpOF4sB/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}- Search for (Ctrl+F)
</head>and paste (Ctrl+V) the following code before </head>
<script src="//cdn.firebase.com/v0/firebase.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
// View counter===============================
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://priosoft.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
- Search for (Ctrl+F)
post-header. You'll find the a code similar to the following one.
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
- Replace
<div class='post-header-line-1'/>with the following code.
<div class='post-header'>
<div class='post-header-line-1'>
<b:if cond='data:blog.pageType == "item"'>
<div class='viewers' expr:id='"obs-" + data:post.id'>Post view: <span class='loading'/></div>
</b:if>
</div>
</div>
- You're done. Now Save template and see result by refreshing page.
- Replace "https://prio-soft.firebaseio.com" With Your Firebase url.
Customization
Any type of information please Contact us.
