我們在網頁中嵌入 Facebook 的「讚」按鈕，當被讚超過一定數量，就不會顯示明確的數字，如下圖：

但這個案子希望能顯示完整的數字，要怎麼解決呢？

對了，順帶一提，「讚」的數字包含「讚」以及「分享」次數。（ The count on the Like button will include all likes and shares — from Faceook Developer, Like Button）

思路是這樣，將原有的數字藏起來，然後加入我們用 Graph API 查詢出來的明確數字，噢對，你還得準備數字對話泡泡的圖檔。

註：不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小，但是不能以其他任何形式修改「讚」按鈕 （如變動設計樣式）」。

來看 code 吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns:fb="http://ogp.me/ns/fb#">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Facebook 按讚顯示完整的數字</title>  
<style type="text/css">  
body {  
background-color:#000;  
}

/\* ref: http://stackoverflow.com/questions/2950172/facebook-like-button-hide-count \*/  
/\* make the like button smaller \*/  
.fb_edge_widget_with_comment iframe  
{  
width:42px !important;  
}

/\* but make the span that holds the comment box larger \*/  
span.fb_edge_comment_widget.fb_iframe_widget iframe  
{  
width:401px !important;  
}  
span {  
font-family: Arial, Helvetica, sans-serif;  
font-size: 12px;  
color: #313534;  
line-height: 16px;  
}  
</style>  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
<script type="text/javascript">  
$(document).ready(function () {

// 透過 Graph API 算出網址的被讚明確數字  
url = "http://www.google.com";  
var getter = $.getJSON("http://graph.facebook.com/?id=" + url + "&callback=?", function (data) {  
$counter = (data\["shares"\] == undefined) ? 0 : data\["shares"\];  
if ($counter < 0) $counter = 0;  
$("#counter").text($counter);  
});

});  
</script>  
</head>

<body>  
<div id="fb-root"></div>  
<script>(function(d, s, id) {  
var js, fjs = d.getElementsByTagName(s)\[0\];  
if (d.getElementById(id)) return;  
js = d.createElement(s); js.id = id;  
js.src = "http://connect.facebook.net/zh_TW/all.js#xfbml=1";  
fjs.parentNode.insertBefore(js, fjs);  
}(document, ‘script’, ‘facebook-jssdk’));</script>

<table border="0" cellspacing="0" cellpadding="0">  
<tr>  
<td><fb:like href="http://www.google.com" send="false" layout="button_count" width="320" show_faces="false" action="like"></fb:like></td>  
<td><table border="0" cellspacing="0" cellpadding="0">  
<tr><!–這邊的 num_l.jpg, num_m.jpg 與 num_r.jpg 是自行設計的數字對話泡泡底圖。–>  
<td><img src="images/num_l.jpg" alt="" width="6" height="20" border="0" /></td>  
<td background="images/num_m.jpg"><span id="counter"></span><!–會將明確數字塞在 #counter 中–></td>  
<td><img src="images/num_r.jpg" alt="" width="6" height="20" border="0" /></td>  
</tr>  
</table>  
</body>  
</html>

參考自： Facebook Like-Button – hide count? (stackoverflow)

簡單說明：

  1. 用 CSS 將「讚」右方原有的數字藏起來
  2. 用 Graph API 撈出這個網址實際被讚的明確數字
  3. 將數字塞到「讚」按鈕右方的區塊中，區塊的底圖要自己做。

懶得看的就下載檔案回去研究吧，是以 http://www.google.com 被讚的次數來作範例。
範例檔案(Sample Files)