教你３步製作：羅志祥 Facebook Fan page 人數實時 Counter

作者

天恩
發佈日期

2016-01-18
閱讀時間

9分鐘
字體大小

羅志祥先生因為一句說話，被台灣的 fans 們紛紛 unlike Facebook 劃清界線，每一秒 F5 一下 fans 數目不斷下跌！有網友寫了一個即時 Counter 方便「花生友」觀賞。作為「玩生活。樂科技」的 unwire ，對其製作方法也有興趣，故此訪問了 Gap Lo ，讓他教各位 wire 民如何用最簡單的方作製方 Fanpage 即時 Counter 。

Step 1:知道 FB API 格式及設計程式

首先我們要知道如何 call FB 的 api ，讀取現時 Fans page 的人數，以 unwire.hk fan page 為例，格式如下 (可直接把連結貼到瀏覽器上)

https://api.facebook.com/method/fql.query?format=JSON&query=SELECT+like_count+FROM+link_stat+WHERE+url=”https://www.facebook.com/unwirehk?_rdr=p”

然後我們想想如何利用這個 api call 出的數目:

原理剖析 :

1.用一段 jQuery script 問 FB 拿取 Like count

2. 再用 FB 回覆的結果去實時更新 HTML

3. 不斷重覆以上重作

Step 2: 儲存及測試運行

以下我們示範了一段 HTML code ，各位可以自己copy and paste 去任何的文字編輯 app 例如 notepad ，再 save as counter.html。各位 wire 民可使用一些 WYSWYG 的 html 工具，自行插入相片和把數字變大，做出更靚的介面

<html> <head> <title>Facebook View Count</title> <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script> </head> <body>

<div>
Facebook Page Url <input type=’text’ id=’fb-page’ style=’width:300px’/>
<h2>View Count = <span id=”view-count”></span> Likes</h2>
</div>
</body>

<script type=”text/javascript”>
function getFbViewCount(){
$.get( “https://api.facebook.com/method/fql.query?format=JSON&query=SELECT+like_count+FROM+link_stat+WHERE+url=\””+$(‘#fb-page’).val()+”\””, function( data ) {
$(‘#view-count’).html(data[0].like_count)
});
}
$(function(){

var retryTime = 1000;

// run on the first time
getFbViewCount();

// continuously run the funtion
setInterval(getFbViewCount,retryTime);

})

</script>
</html>