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

Published by
天恩
Share

羅志祥先生因為一句說話,被台灣的 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>
把 code 貼入 notepad 記事本
另儲新檔為 xxx.html (選所有檔案)

相關文章:
  • IG、Facebook 五月起標註 AI 生成內容 盼能解決假新聞問題
  • Meta AI 被指無法生成異族情侶圖片 外媒:亞洲男人與白人妻子不能同時出現
  • 加拿大四校董會聯手 控告 TikTok 等平台影響學生學習

  • Step 3: 發佈上網分享

    可以雙按 File 直撞運行,又或是放上 Google Drive 給朋友玩!

    把 file 拖入 google drive 後,右下角按「共用」

     

    按更多

     

    選這兩個選項其中一個

     

    把連結告訴朋友吧!

     

    使用方法 :

    在 Broswer 中找尋 fans page 的 url ,例如羅志祥的就是 www.facebook.com/IsShow/

    貼上後就會不停更新數字了

     

    關於 Gap Lo:

    「一名現於StartUp打滾土生土長嘅九十後,熱愛Open Source Software,最不爽與一成不變的井蛙談海。我的四大座佑鉻:Simple is beautiful、己所不欲 勿施於人、工欲善其事 必先利其器、一山還有一山高。」

    網站:http://blog.gaplotech.com/


    相關文章:
  • IG、Facebook 五月起標註 AI 生成內容 盼能解決假新聞問題
  • Meta AI 被指無法生成異族情侶圖片 外媒:亞洲男人與白人妻子不能同時出現
  • 加拿大四校董會聯手 控告 TikTok 等平台影響學生學習

  • Published by
    天恩