我們在網頁中嵌入 Facebook 的「讚」按鈕，當被讚超過一定數量，就不會顯示明確的數字，如下圖：
但這個案子希望能顯示完整的數字，要怎麼解決呢？
對了，順帶一提，「讚」的數字包含「讚」以及「分享」次數。（ The count on the Like button will include all likes and shares — from Faceook Developer, Like Button）
思路是這樣，將原有的數字藏起來，然後加入我們用 Graph API 查詢出來的明確數字，噢對，你還得準備數字對話泡泡的圖檔。
註：不知道這樣的解法是否有違反 Facebook 使用規範 品牌引用許可資源中心 – 使用方針 – Facebook 讚按鈕 中的「你可以依照所需調整大小，但是不能以其他任何形式修改「讚」按鈕 （如變動設計樣式）」。
來看 code 吧：
[code language=”HTML”]
<!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>
[/code]
參考自： Facebook Like-Button – hide count? (stackoverflow)
簡單說明：
- 用 CSS 將「讚」右方原有的數字藏起來
- 用 Graph API 撈出這個網址實際被讚的明確數字
- 將數字塞到「讚」按鈕右方的區塊中，區塊的底圖要自己做。
懶得看的就下載檔案回去研究吧，是以 http://www.google.com 被讚的次數來作範例。
範例檔案(Sample Files)