單篇文章計數 - 部落格

※ 引述《Firedance (迎火飛舞)》之銘言：
: 　　http://www.esobondhu.com/2015/08/blogger-post-views-count-widget.html
: 請問有人看過這個網誌的嗎？雖然完全看不懂文章，但因為有影片，因此自己也
: 　　有實作一下，但都失敗？不知道是否有人試過且成功的？


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

　　不過計數資料當然不可能和後台的一樣，而且用這方法似乎手機是無法同步？

而且若是預覽的話也會加進去..@@

　　不過還是記錄一下，或許有人也需要囉！

　　圖文參考：http://bcsyddonxu.blogspot.tw/2018/04/blogger.html


步驟如下：

首先要先進去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，就完成了

--
︵︶︵︶︵ 生活紀錄網 ζ
ξ
如果說從相機觀景窗看出去的世界是不一樣的 -●
那麼拍張照吧 讓生活多點微笑 少點憂愁 ν)
＿ˍ▁▂▃▄▄▄▃▂＿ˍ▁＿ˍ▁▂▃▄▄▄▃▂＿ˍ▁ √■
　　 對，日子就是要過的輕鬆自在．http://bcsyddonxu.blogspot.tw/

--