天氣好，空氣品質又佳的話，照片特別好拍呀
雖然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($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews');
var blogStats = new Firebase("https://YOUR-APP-NAME.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', 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('name');
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>
然後要將「YOUR-APP-NAME」改成自己的專案ID，就完成了
如下圖，可以顯示單篇文章瀏覽次數(19 Views)
