Re: [Blogger] 单篇文章计数

楼主: Firedance (迎火飞舞)   2018-04-02 22:50:23
※ 引述《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,就完成了

Links booklink

Contact Us: admin [ a t ] ucptt.com