This is my second post about webpage counter. My previous post was about Download Counter for Blog and Website where i have discussed how Firebase actually works. You can check that out from here in case you are interested about how Firebase works. So i am not going into details.
Let's start.
Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
Step 1: Create Your Firebase Account
Signup for a free account at Firebase. Follow the steps carefully given at Firebase to activate your account. Step 2: Create Your Database at Firebase
Firebase offers you to create 10 unique databases. In our just one database is required. So create one database at Firebase to store your post view stats. Give your database a unique name (for e.g. i named my database as 'bloganalyzer-demo-view-stat') and hit CREATE.
Note down the URL of your Firebase database. For e.g., in my case that URL will be https://bloganalyzer-demo-view-stat.firebaseio.com/.
Step 3: Install Post View Counter Plugin
As i have already discussed how Firebase works in my previous post, so right now i am giving you the script and steps for installing post view counter for your blogger blog and website. - Go to 'Template' and click 'Edit HTML'.
In case of blogger old interface, make sure that 'Expand Widget Templates' is checked. - Make sure whether jQuery library is already included in your blog. If not, search for (Ctrl+f) <head> and write down the following line just below <head>.
- Search for (Ctrl+f) </head> and paste the following code before </head>.
- Search for (Ctrl+f) </b:skin> and paste the following code before </b:skin>.
- Search for (Ctrl+f) post-header. You will find the following code.
Now replace that <div class='post-header-line-1'/> with the following code.
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-header-line-1'>
<div class='blganr-view_counter'>
Post Views: <span class='blganr-loading'/>
</div>
</div>
<div class='post-header'>
<div class='post-header-line-1'>
<div class='blganr-view_counter'>
Post Views: <span class='blganr-loading'/>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('div.post').each(function() {
var get_position = $(this);
var get_name = $(this).children('a[name]').attr('name');
var dataRef = new Firebase('YOUR DATABASE' + get_name);
dataRef.once('value', function (snapshot) {
var data = snapshot.val();
if (data == null) {
data=1;
}
else if (window.location.pathname!='/') {
data++;
}
dataRef.set(data);
get_position.find('div.blganr-view_counter').children('span').removeClass('blganr-loading').html(data);
});
});
});
//]]>
</script>
/*--Post View Counter by Bloganalyzer--*/
div.blganr-view_counter {
font:18px PT Sans Narrow;
margin:0 10px 10px 10px; padding:8px 5px 8px 35px; float:right;
text-align:center;
box-shadow:0 0 2px #555;
background:#fff url('http://3.bp.blogspot.com/-L45u_pdvSsg/Umz1WLZEUSI/AAAAAAAAC2A/96QhAnVyq-I/s1600/post-views.png') 3px 50% no-repeat;
display:inline-block;
z-index:9999;
color:#444;
}
span.blganr-loading {
background:url('http://3.bp.blogspot.com/-EERf4K_hjBg/UmzBza69BtI/AAAAAAAAC1Q/67AexTAsKJU/s1600/spinner.gif') 50% 50% no-repeat;
display:inline-block;
width:30px;
height:18px;
margin:0 0 -3px 0;
}
Happy Blogging.
how to add Data of post views in firebase
ReplyDelete