使用 jQuery 模板製作自定義 Facebook 牆
在本教程中，我們將創建我們自己版本的 Facebook 牆。我們將使用 Facebook 的 Graph API 和 jQuery 以及模板插件。 jQuery.tmpl 插件將允許我們在頁面中定義模板，並將我們從 API 獲得的帖子轉換為真正的 HTML 頁面。
您可以使用今天的示例在您的 FB 頁面或網站上的個人資料上顯示最新帖子的提要。
在開始之前，讓我們先談談 Facebook API。
圖形 API
Graph 是 Facebook 為網站中存在的每個對像以及與其他對象的連接提供接口的解決方案。您在網站上看到的每個頁面都有相應的圖形表示，無論是用戶、照片、組、狀態更新還是其他任何內容。該 API 還支持 JSONP 請求，這使得它非常容易與 jQuery 一起使用。
我們將使用兩個 API 數據點 - 一個用於選擇最新帖子，另一個用於選擇頁面的全名和頭像。您可以在下面查看示例響應：
http://graph.facebook.com/smashmag/posts/
{
"data": [{
"id": "45576747489_10150136051797490",
"from": {
"name": "Smashing Magazine",
"category": "Website",
"id": "45576747489"
},
"message": "Creating a sphere with 3D CSS",
"picture": "http://platform.ak.fbcdn..",
"link": "http://bit.ly/epqBBv",
"name": "Creating a sphere with 3D CSS \u2013 Paul Hayes",
"caption": "www.paulrhayes.com",
"description": "A professional slice of newly..",
"icon": "http://photos-d.ak.fbcdn.net/photos..",
"actions": [{
"name": "Share",
"link": "http://www.facebook.com/share.."
}],
"type": "link",
"application": {
"name": "Sendible",
"id": "26065877776"
},
"created_time": 1301325483,
"updated_time": 1301325483,
"likes": {
"data": [{
"name": "Zome Lia",
"id": "100000643422735"
}],
"count": 16
}
}]
} JSON 上面的回复包含有關 Smashing Magazine 發布的每一篇文章的信息。一些字段包含有關創建/修改日期、喜歡和評論的數量、標題和描述以及類型的數據。此請求可能會返回狀態更新 , 共享鏈接 , 上傳照片 和視頻 ，等等。
我們還需要發出一個額外的請求，以便我們可以獲取與頁面關聯的頭像（它不包含在帖子響應中）：
http://graph.facebook.com/smashmag/
{
"id": "45576747489",
"name": "Smashing Magazine",
"picture": "http://profile.ak.fbcdn.net/hp..",
"link": "http://www.facebook.com/smashmag",
"category": "Website",
"likes": 42696,
"website": "http://www.smashingmagazine.com/",
"username": "smashmag",
"company_overview": "Founded in September 2006..",
"mission": "The offical Smashing Magazine pa..!",
"products": "Looking for a web design job? Che.."
} 上面的圖片字段為我們提供了我們需要的內容。請求這麼多數據有點浪費，所以在插件中我們實際上將返回的字段限制為我們需要的。
模板
現在讓我們談談 jQuery 模板。由於 Graph API 返回有效的 JSON 數據，因此非常適合嘗試 jQuery 的模板插件。這個官方插件使我們能夠使用易於使用的標記定義 HTML 構建塊。這使我們不必手動創建 HTML 元素、連接字符串和轉義字符序列。
模板本身可以插入到一個特殊的腳本標籤中，或者可以通過 AJAX 調用從一個單獨的文件中接收。在本教程中，我選擇了第一種方法，因為它簡單明了。
每個模板的格式如下：
<script id="someID" type="text/x-jquery-tmpl"> <!-- HTML markup coupled with template tags --> </script>
這是一個腳本標籤，由於 type 屬性，瀏覽器無法識別它，因此不會對其進行評估或顯示。更重要的是，它的內容被視為字符數據並且不被解析，這非常適合我們保存模板的任務。然後我們可以使用 jQuery 的 tmpl() 方法並將其渲染為實際的 HTML 標記（稍後會詳細介紹）。
這是第一個模板，它創建了頁面的標題：
<script id="headingTpl" type="text/x-jquery-tmpl">
<h1>${name}<span>on Facebook</span></h1>
</script> ${} 模板標籤被對象的 name 屬性值替換，該值被傳遞給 tmpl() 方法，在我們的例子中是 facebook 頁面的名稱。
另一個顯示單個帖子的模板稍微複雜一些，並採用了一些更高級的模板功能：
<script id="feedTpl" type="text/x-jquery-tmpl">
<li>
<img src="${from.picture}" />
<div>
<h2><a href="http://www.facebook.com/profile.php?id=${from.id}" target="_blank">${from.name}</a></h2>
<p>{{html message}}</p>
{{if type == "link" }}
<div>
{{if picture}}
<img src="${picture}" />
{{/if}}
<div>
<p><a href="${link}" target="_blank">${name}</a></p>
<p>${caption}</p>
<p>${description}</p>
</div>
</div>
{{/if}}
</div>
<p>${created_time} ·
{{if comments}}
${comments.count} Comment{{if comments.count>1}}s{{/if}}
{{else}}
0 Comments
{{/if}} ·
{{if likes}}
${likes.count} Like{{if likes.count>1}}s{{/if}}
{{else}}
0 Likes
{{/if}}
</p>
</li>
</script>
在模板標籤內，我們可以有任何 JavaScript 表達式，甚至是方法和函數調用。這在構建 {{if}} 時特別有用 語句，正如您從上面的代碼中看到的那樣，我們檢查了喜歡和評論的數量。
${} 的一項功能 標籤是它在將文本值插入模板之前對其進行轉義。但是在某些情況下，這不是您所需要的。例如，message 變量保存了我們想要按原樣顯示的 HTML 代碼。這就是我們使用 {{html}} 的原因 而是標記，它保留了代碼的原始格式。
這是我們最終得到的 HTML 文檔：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Making a Custom Facebook Wall with jQuery | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<div id="page">
<div id="wall"></div>
</div>
<!-- jQuery templates. Not rendered by the browser. Notice the type attributes -->
<script id="headingTpl" type="text/x-jquery-tmpl">
<h1>${name}<span>on Facebook</span></h1>
</script>
<script id="feedTpl" type="text/x-jquery-tmpl">
<li>
<img src="${from.picture}" class="avatar" />
<div class="status">
<h2><a href="http://www.facebook.com/profile.php?id=${from.id}" target="_blank">${from.name}</a></h2>
<p class="message">{{html message}}</p>
{{if type == "link" }}
<div class="attachment">
{{if picture}}
<img class="picture" src="${picture}" />
{{/if}}
<div class="attachment-data">
<p class="name"><a href="${link}" target="_blank">${name}</a></p>
<p class="caption">${caption}</p>
<p class="description">${description}</p>
</div>
</div>
{{/if}}
</div>
<p class="meta">${created_time} ·
{{if comments}}
${comments.count} Comment{{if comments.count>1}}s{{/if}}
{{else}}
0 Comments
{{/if}} ·
{{if likes}}
${likes.count} Like{{if likes.count>1}}s{{/if}}
{{else}}
0 Likes
{{/if}}
</p>
</li>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/jquery.tmpl.min.js"></script>
<script src="js/script.js"></script>
</body>
</html> #牆 div 將在使用我們的模板呈現後使用 Graph API 數據動態填充。您可以在文件底部看到模板本身。在結束 body 標記之前，我已經包含了 jQuery 庫 , jQuery.tmpl 插件，以及我們的 script.js 文件，我們將在接下來討論。
jQuery 代碼
由於我們已經準備好了所有的部分，我們終於可以開始編寫我們的 facebook 牆插件了。
script.js
// Creating our plugin.
(function($){
$.fn.facebookWall = function(options){
options = options || {};
if(!options.id){
throw new Error('You need to provide an user/page id!');
}
// Default options of the plugin:
options = $.extend({
limit: 15 // You can also pass a custom limit as a parameter.
},options);
// Putting together the Facebook Graph API URLs:
var graphUSER = 'http://graph.facebook.com/'+options.id+'/?fields=name,picture&callback=?',
graphPOSTS = 'http://graph.facebook.com/'+options.id+'/posts/?callback=?&date_format=U&limit='+options.limit;
var wall = this;
$.when($.getJSON(graphUSER),$.getJSON(graphPOSTS)).done(function(user,posts){
// user[0] contains information about the user (name and picture);
// posts[0].data is an array with wall posts;
var fb = {
user : user[0],
posts : []
};
$.each(posts[0].data,function(){
// We only show links and statuses from the posts feed:
if(this.type != 'link' && this.type!='status'){
return true;
}
// Copying the user avatar to each post, so it is
// easier to generate the templates:
this.from.picture = fb.user.picture.data.url;
// Converting the created_time (a UNIX timestamp) to
// a relative time offset (e.g. 5 minutes ago):
this.created_time = relativeTime(this.created_time*1000);
// Converting URL strings to actual hyperlinks:
this.message = urlHyperlinks(this.message);
fb.posts.push(this);
});
// Rendering the templates:
$('#headingTpl').tmpl(fb.user).appendTo(wall);
// Creating an unordered list for the posts:
var ul = $('<ul>').appendTo(wall);
// Generating the feed template and appending:
$('#feedTpl').tmpl(fb.posts).appendTo(ul);
});
return this;
};
// Helper functions:
function urlHyperlinks(str){
return str.replace(/\b((http|https):\/\/\S+)/g,'<a href="$1" target="_blank">$1</a>');
}
function relativeTime(time){
// Adapted from James Herdman's http://bit.ly/e5Jnxe
var period = new Date(time);
var delta = new Date() - period;
if (delta <= 10000) { // Less than 10 seconds ago
return 'Just now';
}
var units = null;
var conversions = {
millisecond: 1, // ms -> ms
second: 1000, // ms -> sec
minute: 60, // sec -> min
hour: 60, // min -> hour
day: 24, // hour -> day
month: 30, // day -> month (roughly)
year: 12 // month -> year
};
for (var key in conversions) {
if (delta < conversions[key]) {
break;
}
else {
units = key;
delta = delta / conversions[key];
}
}
// Pluralize if necessary:
delta = Math.floor(delta);
if (delta !== 1) { units += 's'; }
return [delta, units, "ago"].join(' ');
}
})(jQuery);
我們正在使用 $.getJSON 從 Graph API 請求信息的函數。但是你可能會注意到我們沒有像之前的教程那樣使用它，即提供一個回調函數作為它的第二個參數。這是因為我們希望對 Graph API 的兩個調用同時運行（一路速度），而這對於簡單的回調是不可能的。
從 jQuery 1.5 開始，所有 AJAX 方法都返回一個延遲對象，這基本上允許我們將多個 AJAX 調用分組到一個 $.when() 中。兩個AJAX請求都成功完成後，done方法執行一次。
在此之後，我們可以簡單地渲染模板：
// Rendering the templates:
$('#headingTpl').tmpl(fb.user).appendTo(wall);
// Creating an unordered list for the posts:
var ul = $('<ul>').appendTo(wall);
// Generating the feed template and appending:
$('#feedTpl').tmpl(fb.posts).appendTo(ul); tmpl() 方法接受一個 JavaScript 對像或數組，並為每個元素呈現一次模板。模板由它們的 id 指定（#headingTpl 和 #feedTpl 在我們的例子中是腳本元素）。
最後，我們只需要使用您的頁面 ID 和訪問令牌（稍後會詳細介紹）調用 document.ready 中的插件：
$(document).ready(function(){
// Calling our plugin with a page id:
$('#wall').facebookWall({
id:'smashmag',
access_token:'19304297594165|ZGyz1d0clt2XO3AyrjHmrKORo'
});
}); 獲取訪問令牌
獲取訪問令牌的第一步是在 http://developers.facebook.com 上註冊為開發人員。在此之後，您將需要創建一個新的 Facebook 應用程序。這是一個簡單的過程，您不需要輸入任何數據，除了應用程序的名稱。這將為您提供一個App ID 和一個App Secret ，您可以從“我的應用程序”頁面中看到。
接下來，您需要訪問以下 URL，將 APP_ID 和 APP_SECRET 替換為您的應用程序的值：
https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET
這會給你一個字符串，類似於：
access_token=19304297594165|ZGyz1d0clt2XO3AyrjHmrKORo
這是您的訪問令牌。調用 facebookWall 時，您需要在等號後包含字符串 上一節的插件。
這樣我們的自定義 Facebook 牆就完成了！
總結
希望在今天的教程中，您看到模板是您的 jQuery 工具庫中的一個很好的工具。模板插件使定義、渲染和存儲模板變得非常容易。結合它的一些更高級的功能，您可以創建易於維護的 Web 應用程序，而不必糾結於冗長的 jQuery 選擇器鏈。
你喜歡這個教程嗎？你會如何改進這個例子？在下面的評論部分分享您的想法。
