Blogger單篇文章計數器

天氣好，空氣品質又佳的話，照片特別好拍呀

雖然Blogger後台有提供單篇文章的計數器，不過自己想放在文章上面，搜尋了很多資料，試過很多，但都失敗。

好像因為Firebase有改版關係，重新試過後竟然可以了..XD

只是計數資料當然不可能和後台的一樣，而且用這方法似乎手機是無法同步？不過還是記錄一下，或許有人也需要囉！



步驟如下：

首先要先進去Firebase(Google帳號)
https://firebase.google.com/

進入後「新增專案」


專案建立中


建立好後選「Database」，按開始使用


選Realtime Database，開始使用


以測試模式啟動


之後在左上的Project Overview選專案設定


複製專案ID，然後進Blogger後台


在後台裡編輯HTML


進編輯後要先注意一下

若沒安裝jquery的記得要先加入下面語法(Jquery Library v1.2.3或更高版本，我是用2.1.3)

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

在想要顯示單篇文章計數器的地方輸入下面語法

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

我自己沒加入<i class='fa fa-eye'/>，這是眼睛的icon

然後再編輯語法下面，或按ctrl + f搜尋</body>，再</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://YOUR-APP-NAME.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); 
else 
blogStats.child(&#39;value&#39;).set(data.value); 
} 
}); 
}); 
</script>

然後要將「YOUR-APP-NAME」改成自己的專案ID，就完成了

如下圖，可以顯示單篇文章瀏覽次數(19 Views)