放置Connect登录按钮
人人Connect的一项核心功能是提供“身份认证服务”，即用户可以使用人人网帐号和密码登录第三方Connect站点。因此，人人Connect技术提供了一组Connect登录按钮，可以放置在第三方Connect站点的任何页面上，如登录页、注册页以及首页上。
目录 |
[编辑] 创建测试文件
放置Connect登录按钮，只需在页面中嵌入一段JS代码即可。下面是一个完整页面的例子。请将下面的代码拷贝后存为一个文件（这里做测试用），命名为index.html，然后放置在你的域名下，例如 http://www.swimmingacross.com/index.html。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xn="http://www.renren.com/2009/xnml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Renren Connect</title>
</head>
<body>
<xn:login-button autologoutlink="true"></xn:login-button>
<script type="text/javascript" src="http://static.connect.renren.com/js/v1.0/FeatureLoader.jsp"></script>
<script type="text/javascript">
XN_RequireFeatures(["EXNML"], function()
{
XN.Main.init("16356ddc758343a39400837e79f1a18e", "/xd_receiver.html");
});
</script>
</body>
</html>
[编辑] 预期效果
访问刚刚得到的html文件，即访问http://www.swimmingacross.com/index.html，你会看到页面上显示一个“与人人连接”的登录按钮，如下图所示：
点击这个按钮后，可以弹出一个人人连接登录窗口。输入你的人人网帐号和密码后，登录窗口关闭，原来的按钮变为下图的样子：
再次点击“退出登录”，弹出提示框，退出成功。
至此，非常简单地实现了用人人网帐号在第三方域名下登录的功能。
[编辑] 代码含义
下面对刚刚创建的index.html文件中的代码进行简单的介绍，更详细的介绍需要参见相应接口的描述文档。
第2行<html>标签多写了一个属性xmlns:xn="http://www.renren.com/2009/xnml"，是为了能够在IE中正确显示EXNML标签，即<xn:开头的那些标签。在上面这个文件中我们就用到了一个这样的标签：<xn:login-button autologoutlink="true"></xn:login-button>，这个xn:login-button标签就表示一个Connect登录按钮。简单的一个标签代表了很复杂的登录逻辑，这就是我们引入EXNML这项技术的原因。
第9行引用了FeatureLoader.jsp这个文件，这实际上是一个JavaScript文件。为了使用人人Connect的JavaScript Client提供的功能，必须要引用这个文件。目前这个文件需要在<body>里面引用，而不是在<head>里面引用。
文件最后有一段JavaScript初始化代码，用来加载所需的人人Connect相应功能，并为人人Connect的初始化传入必须的一些参数，如API Key、跨域文件的路径等。目前这段初始化代码需要放在页面底端，最好是恰好在</body>标签前面。
[编辑] 好友登陆
通过“与人人连接“按钮用户可以用人人帐号直接登录第三方网站，使用显示好友头像功能，已登录人人并且未连接过该网站的用户，来到该网站可以在“与人人连接”的按钮下面看到已连接该网站的好友，通过社交化属性吸引用户连接。
效果如下图：
代码示例：
<xn:login-button size="medium" background="blue" label="与人人连接" show-faces=
"true" face-size="small" max-rows="2" face-space="5" width="217">
</xn:login-button>
background表示登录按钮的文字背景。
show-faces表示是否显示登陆好友的头像，false代表不显示登陆好友，true代表显示登陆好友。
face-size表示显示登陆好友的头像大小，有small、medium两种。
face-space表示登陆好友的头像之间的间距。
max-rows表示显示登陆好友头像的最大行数。
width可以控制每行显示的登陆好友头像的个数，因为头像大小和间距固定了，从左边依次往右排列，所以width可以控制排列的个数。
详情请参见：好友登陆