上周，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>
您的代码应如下所示：
<!doctype html><html><head><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></head><body>...</body></html>
将 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('<img src='+ twitter.currentuser.data('profile_image_url') +' /> <a href=http://twitter.com/'+ twitter.currentuser.data('screen_name') +'>'+ 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('<img src='+ twitter.currentuser.data('profile_image_url') +' /> <a href=http://twitter.com/'+ twitter.currentuser.data('screen_name') +'>'+ 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 做了什么！
以上就是使用 twitter 的 @anywhere 服务的 6 个简单步骤的详细内容。