上周，Twitter 發布了 @Anywhere，只需在代碼中添加幾行，就可以將 Twitter 的所有平臺功能引入您的網站。 @Anywhere 可以允許任何事情，從將簡單的@用戶名轉換為可點擊的鏈接，甚至直接從您的個人網站創建新推文。我將在本教程中向您展示具體如何操作！
開始之前，創建一個應用程序
為了開始使用 @Anywhere，您必須擁有 API 密鑰。什么？你沒有嗎？沒問題。只需轉到此處注冊新的應用程序（不要從此處注冊）。
- 如果您安裝了本地服務器，請將其設置為域（例如，developertutorial.com），因為它無法與您的本地主機一起使用（如果您不知道如何操作，請查看本教程，主機文件部分尤為重要）。
- 如果您沒有本地服務器，請將此部分留空。請記住，對于生產環境，您必須將其設置為您正在使用的域。
最后，將默認訪問類型設置為“讀取和寫入”。這非常重要！
現在，您將被重定向到應用程序設置頁面。復制消費者密鑰（API 密鑰），讓我們開始使用@Anywhere。
包括 @Anywhere 的 JavaScript
打開新的 html 文件，并在
標記內包含：
<script src="http://platform.twitter.com/anywhere.js?id=<strong>APIKey</strong>&v=1" type="text/javascript"></script>
您的代碼應如下所示：
<title>@Anywhere</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link href="styles.css" rel="stylesheet" type="text/css"><script src="http://platform.twitter.com/anywhere.js?id=APIKey&v=1" type="text/javascript"></script> ...
將 APIKey 替換為您在上一步中獲得的應用程序的 API 密鑰。參數 v=1 是版本。也許將來，Twitter 會添加新功能，也許還有新語法。為了防止破壞現有的 @Anywhere 代碼，他們將保留舊代碼（如果指定）。版本 1 支持所有主要瀏覽器，包括 IE6。
包含此 JavaScript 文件后，我們可以訪問 twttr 對象，當 @Anywhere 準備就緒時，該對象將使用參數調用 anywhere() 函數：
twttr.anywhere(function(twitter) { // Actions when @Anywhere is ready });
參數（在本例中為 twitter）是我們將使用的對象，類似于 jquery 的 $。
接下來，我們需要創建一個 HTML 庫。復制并粘貼以下代碼，并將其放置在“body”標記內。
<div id="main"> <div class="post"> <h2>My blog post</h2> <div class="content"> <p>This is a test blog post testing @Anywhere by @twitter.</p> <p>If you enjoyed this tutorial, please <a href="http://twitter.com/faelazo" class="hovercard">follow me</a> and keep in touch with @NETTUTS for more awesomeness.</p> </div> </div> <div class="comments"> <h3>Comments</h3> <ol> <li> <span class="author">@corcholat</span> says: <p>Such a great tutorial! </p> </li> <li> <span class="author">@faelazo</span> says: <p>You should also follow @smashingmag</p> </li> </ol> </div> </div>
現在讓我們深入探討。
1. linkifyUsers：將@something轉換為鏈接
@Anywhere 允許我們將 @mentions 轉換為鏈接。此功能稱為 linkifyUsers，非常簡單：它設置您希望轉換為鏈接的 HTML 元素。
由于我們希望將文檔中的所有@mentions轉換為鏈接，因此我們只需在body元素中調用linkifyUsers()函數即可：
twttr.anywhere(function(twitter) { twitter("body").linkifyUsers(); });
正如前面提到的，回調函數內部的“twitter”參數很像 jQuery 的“$”別名；如果我們想要將 @mentions 轉換為鏈接，但僅限于特定部分內的鏈接，我們可以使用 CSS 選擇器，如下所示。
twttr.anywhere(function(twitter) { twitter(".post").linkifyUsers(); });
linkifyUsers() 接受一個對象作為參數，有兩個屬性：className 和 success。通過 className ，您可以指定找到 @mentions 時要應用的類；因此，例如，您可以添加一個無語義的“紅色”類并在 CSS 中指定：
.red { color:#f00; }
這是代碼。
twttr.anywhere(function(twitter) { twitter("body").linkifyUsers({ className:'red' }); });
2.hovercards：在懸停時顯示附加信息
mousecards() 將 @mentions 轉換為鏈接，但也會在鼠標懸停時加載一個小的彈出工具提示。這是其用法的基本示例。
twttr.anywhere(function(twitter) { twitter.hovercards(); });
但是， hovercards() 足夠靈活，可以包含某些元素，即使它們中沒有@mention。在 HTML 中，我將“follow me”鏈接到 http://twitter.com/faelazo;但 @anywhere 足夠聰明，可以將此鏈接轉換為懸停卡。通過向錨標記添加“hovercard”類，Twitter 將處理其余的事情！
twttr.anywhere(function(twitter) { // Find the @mentions and linkify as usual twitter("body").hovercards(); // Let's find the elements which has a hovercard class twitter(".hovercard").hovercards({ username: function(node){ var twitter_regexp = /twitter.com/([a-z0-9_]*)/?(.*)?/gi; if(node.href.match(twitter_regexp) && (twitter_match = twitter_regexp.exec(node.href))){ return twitter_match[1]; } return ''; } }); });
username 參數采用一個函數，該函數的參數將是找到的對象（在本例中為 node）。以下是函數內部逐行發生的事情。
var twitter_regexp = /twitter.com/([a-z0-9_]*)/gi;
這是一個正則表達式。它將匹配帶有字母數字值和下劃線的 twitter.com/ 字符串。
if(node.href.match(twitter_regexp) && (twitter_match = twitter_regexp.exec(node.href))){
如果正則表達式與節點元素中的 href 屬性匹配，則設置變量 twitter_match 以捕獲數組中的值。
return twitter_match[1];
它將返回找到的匹配項。
我們添加一個“return”，以防元素確實有一個類，但不引用 twitter.com；所以不會有匹配。如果它返回 false 或 NULL，則腳本會引發錯誤。使用空字符串時，它會顯示一個懸停卡，但未找到用戶。
現在，如果這有點太復雜，您可以隨時簡化過程，并將用戶名添加為錨標記的標題屬性。
<a href="http://twitter.com/faelazo" class="hovercard" title="faelazo">follow me</a>
只需返回 node 的 title 屬性即可。容易多了，對吧？
twitter(".hovercard").hovercards({ username: function(node){ return node.title; } });
“hovercards”可以應用于任何元素（甚至是 div），只要它指定用戶名即可。
twitter("#main").hovercards({ username: function(){ return 'therrorcom'; }});
3. followButton：一鍵邀請關注
followButton() 將在先前指定的元素中的用戶名參數后面附加一個按鈕。
以下代碼將在 #main div 中附加一個按鈕以關注 Nettuts+。
twttr.anywhere(function(twitter) { twitter("#main").followButton("nettuts"); });
followButton() 需要一個參數：要跟隨的用戶名。夠簡單吧？
4. tweetBox：來自您網站的推文
tweetBox() 將附加一個框，用戶可以在其中輸入評論并通過您的網站發布推文。
tweetBox 可以接收一個對象作為參數，具有以下屬性：
>
- counter（布爾值，默認true）
是否顯示剩余字符的計數器。
- height（整數，默認65）
框的高度，以像素為單位。
- width（整數，默認515）
框的寬度，以像素為單位。
- label（字符串，默認“發生了什么？”）
框上方的文本。
- defaultContent（字符串，默認無）
您可以默認輸入 URL、@mention、#hashtag 等。
- onTweet（函數）
按下推文按鈕后調用。它接收兩個參數：純文本推文和 HTML 推文。
可以在帶有注釋類的元素之后調用默認的 tweetBox ，并使用以下代碼片段。
twttr.anywhere(function(twitter) { twitter(".comments").tweetBox(); });
因此，如果您想要自定義標簽、內容以及發送推文時的回調，請使用此代碼。
twitter(".comments").tweetBox({ label: 'What do you think about this article?', defaultContent: '#nettuts ', onTweet: function(plain, html){ // Actions when tweet is sent } });
如果您計劃用您正在使用的 cms 替換默認評論區域，則 onTweet 可能會很有用。您仍然需要一個數據庫和一個表格來顯示評論，對吧？因此，您可以對 CMS 進行一些修改，并使用 onTweet 事件發出 ajax 請求，以將推文插入數據庫。
5. connect：將用戶登錄到您的應用程序
正如您可能看到的，最后兩種方法需要確認才能向應用程序授予權限。 @Anywhere 有一個方法來檢查用戶是否使用應用程序登錄（而不是在 Twitter 上）。您可以使用條件來決定是否顯示某些元素。
此代碼片段將在元素中附加帶有注釋類的連接按鈕。
twttr.anywhere(function(twitter) { twitter(".comments").connectButton(); });
如果您需要不同大小的按鈕，則可以傳遞具有屬性大小和值小、中、大或 xlarge 的對象文字。請注意，“中”是默認值。
twttr.anywhere(function(twitter) { twitter(".comments").connectButton({ size: 'large' }); });
Twitter 對象包含一些額外的好處；一個是currentUser，它是一個對象；另一個是 isConnected()，這是一個返回布爾值的函數。從這里，我們可以創建一些條件語句。
twttr.anywhere(function(twitter) { if(twitter.isConnected()){ alert('Welcome, you are connected'); } else { twitter(".comments").connectButton(); } });
如果 isConnected() 返回 true，我們可以顯示一些用戶信息，例如用戶名 (screen_name)、個人資料圖片 (profile_image_url)、關注者或關注者。以下是應用程序可以訪問的信息的列表。讓我們看看最后綜述中的 currentUser 對象。
6.最終綜述：將它們混合在一起
我將使用 comments 類修改 div。
<div class="comments"> <h3>Comments</h3> <ol> <li> <span class="author">@corcholat</span> says: <p>Such a great tutorial! </p> </li> <li> <span class="author">@faelazo</span> says: <p>You should also follow @smashingmag</p> </li> </ol> <div class="add"> <h3>Add comment</h3> <div class="author"></div> <div class="box"></div> </div> </div>
現在讓我們加入 jQuery 以使事情變得更容易一些。在
和 之間插入以下代碼：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
現在我們有一個可以添加評論的空間。首先，如果用戶未登錄我們的應用程序，我們將使用 isConnected() 條件來顯示一個按鈕；該按鈕將被附加到帶有 “add” 類的元素。
if(twitter.isConnected()){ twitter(".comments").connectButton(); }
現在讓我們使用 Twitter 的 currentUser 對象。該對象可以使用 data() 方法檢索信息。因此以下代碼片段將檢索用戶的 screen_name。
twitter.currentUser.data('screen_name');
@Anywhere 讓我們為 connectButton 功能指定回調函數。作為參數，它接受具有兩個屬性的對象： authComplete 和 signOut；兩者都是函數，因此當調用 signOut 時，我們可以刷新頁面。 authComplete 也是如此。讓我們用以下代碼片段替換 connectButton() 行：
twitter(".comments > .add").connectButton({ authComplete: function(user) { location.reload(); }, signOut: function() { location.reload(); } });
這非常簡單：我們傳遞一個對象作為參數，然后設置 signOut 和 authComplete 函數來重新加載頁面。請注意，為了設置 signOut 事件，我刪除了 isConnected() 條件的 else 子句。
接下來，讓我們在條件中添加一個 tweetBox 。
if(twitter.isConnected()){ $(".comments > .add > .author").html('@@##@@ <a href="http://twitter.com/'+%20twitter.currentUser.data('screen_name')%20+'">'+ twitter.currentUser.data('screen_name') +'</a> | <a href="javascript:twttr.anywhere.signOut();">Sign out</a>'); twitter(".comments > .add").tweetBox({ label: 'What do you think about this article?', defaultContent: '#nettuts ' }); }
如果用戶已登錄，則應該有一個關注按鈕。同樣，在條件語句中：
twitter(".comments > .add").followButton("nettuts");
這是完整的條件，匯總了所有 @Anywhere 功能。
if(twitter.isConnected()){ $(".comments > .add > .author").html('@@##@@ <a href="http://twitter.com/'+%20twitter.currentUser.data('screen_name')%20+'">'+ twitter.currentUser.data('screen_name') +'</a> | <a href="javascript:twttr.anywhere.signOut();">Sign out</a>'); twitter(".comments > .add").tweetBox({ label: 'What do you think about this article?', defaultContent: '#nettuts ' }); twitter(".comments > .add").followButton("nettuts"); }
結論
@Anywhere 顯然是 Twitter 對 Facebook Connect 的回應。他們希望將這個平臺帶到盡可能多的網絡網站上；雖然該服務還很年輕，而且文檔肯定還有待改進，但它絕對是有前途的！請向我們展示您在自己的網站中使用@Anywhere 做了什么！
