Weibo JS Widget

跳转到: 导航, 搜索

目录

概述

Weibo-JS的widget包分为两部分:

1、基础包(widget.base),包含“与新浪微博连接按钮”、“关注按钮”两个基本组件;

2、用户名片组件包(widget.atWhere),包含一个微博用户名片的小组件;

开发者可以很容易的参照此widget包,通过使用Weibo-JS,开发自己的JS微博组件。

Widget线上演示-微博名片 http://jssdk.sinaapp.com/_html/widget/atWhere.html
Widget线上演示-登陆微博按钮 http://jssdk.sinaapp.com/_html/widget/login.html
Widget线上演示-关注按钮 http://jssdk.sinaapp.com/_html/widget/follow.html

应用信息修改

为了保证您的应用的安全,在您使用Weibo-JS时,需要您在应用信息页面为该应用绑定一个域名,我们将以此域名来判定Weibo-JS API请求来源的合法性,不合法的请求将被拒绝。

绑定域名的操作可以在应用创建页面及编辑页面完成。选择"绑定域名",填入域名提交即可。

放置跨域文件

由于JavaScript在你的站点访问新浪微博API之间存在跨域问题,因此你需要在你的站点下放置一个新浪提供的跨域文件。

下载跨域文件(xd.html.zip)

此文件(xd.html)需要被放置在你的站点域名下的某个路径,如 http://yourdoman.com/xd.html ,并保证此URL可用。

注:xd.html文件同运行Weibo-JS的页面需要在同一域下,比如均为abc.yourdomain.com。

引入Weibo-JS文件

在页面顶端<head></head>中,加入如下代码

<script type="text/javascript" src="http://tjs.sjs.sinajs.cn/t3/platform/js/api/wb.js" charset="utf-8"></script>


引入CSS样式文件

在页面顶端<head></head>中,加入如下代码

<link type="text/css" rel="stylesheet" href="http://tjs.sjs.sinajs.cn/t3/style/css/common/card.css" />

你也可以自己设计CSS样式并引用。

初始化JavaScript Client

在页面的</body>后,加入下面的初始化代码

<script type="text/javascript">
WB.core.load(['connect', 'client', 'widget.base', 'widget.atWhere'], function() {
	var cfg = {
		key: 'YOU APP KEY',
		xdpath: '你的跨域文件URL(http://yourdomain/xd.html)'
	};
	WB.connect.init(cfg);
	WB.client.init(cfg);
	
	//放置具体的组件代码
});
</script>

使用“与新浪微博连接按钮”

为了在一个节点里,生成一个“与新浪微博连接”按钮,在html里添加

<span id="connectBtn"></span>

在已初始化的JavaScript Client代码里,添加代码

<script type="text/javascript">
WB.core.load(['connect', 'client', 'widget.base', 'widget.atWhere'], function() {
	var cfg = {
		key: 'YOU APP KEY',
		xdpath: '你的跨域文件URL(http://yourdomain/xd.html)'
	};
	WB.connect.init(cfg);
	WB.client.init(cfg);
	
	//connect with sina weibo
	WB.widget.base.connectButton(document.getElementById("connectBtn"));
});
</script>

此外,为了使您更方便的取得登陆用户的信息,我们在连接按钮的函数中包装了两个回调函数,如示例:

WB.widget.base.connectButton(
			document.getElementById("wb_connect_btn"),
			{
				login:function(o){
					alert(o.screen_name)  //这里放置用户登陆后您希望采取的操作
				},
				logout:function(){
					alert('logout');  //这里放置用户登出后,您希望采取的操作
				}
			}
		);

使用“关注按钮”

为了在一个节点里,生成一个“关注按钮”,在html里添加

<span id=" followBtn"></span>

在已初始化的JavaScript Client代码里,添加代码,将You Weibo User ID换成你想要关注的人的UID

<script type="text/javascript">
WB.core.load(['connect', 'client', 'widget.base', 'widget.atWhere'], function() {
	var cfg = {
		key: 'YOU APP KEY',
		xdpath: '你的跨域文件URL(http://yourdomain/xd.html)'
	};
	WB.connect.init(cfg);
	WB.client.init(cfg);
	
	//follow you on sina weibo
	WB.widget.base.followButton(You Weibo User ID, document.getElementById("followBtn"));
});
</script>

使用“微博用户名片”

在一段纯文本中,识别@用户名,添加用户名片功能。使鼠标移动到“@用户名”上时,浮出一个展示用户信息的层。

在html中添加一段纯文本

<p id=”content”>
	@姚晨 //@微博新鲜人:@互联网的那点事 开微博啦。
</p>

<script type="text/javascript">
WB.core.load(['connect', 'client', 'widget.base', 'widget.atWhere'], function() {
	var cfg = {
		key: 'YOU APP KEY',
		xdpath: '你的跨域文件URL(http://yourdomain/xd.html)'
	};
	WB.connect.init(cfg);
	WB.client.init(cfg);
	
	//user card widget
	WB.widget.atWhere.searchAndAt(document.getElementById("content"));
});
</script>

文档更新时间: 2011-08-19