[Facebook][jQuery] 讓「讚」顯示完整的數字

Standard

我們在網頁中嵌入 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)

 

簡單說明:

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

 

 

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

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *