Weibo JS Widget
目录 |
概述
Javascript SDK的widget包分为两部分：
1、基础包（widget.base），包含“与新浪微博连接按钮”、“关注按钮”两个基本组件；
2、用户名片组件包（widget.atWhere），包含一个微博用户名片的小组件；
开发者可以很容易的参照此widget包，通过使用Javascript SDK，开发自己的JS微博组件。
Widget 线上演示：http://jssdk.sinaapp.com/_html/widget/atWhere.html
放置跨域文件
由于JavaScript在你的站点访问新浪微博API之间存在跨域问题，因此你需要在你的站点下放置一个新浪提供的跨域文件。 右键点击这里然后另存为xd.html。 此文件需要被放置在你的站点域名下的某个路径，如 http://yourdoman.com/xd.html ，并保证此URL可用。
引入Javascript SDK文件
在页面顶端<head></head>中，加入如下代码
<script type="text/javascript" src="http://js.wcdn.cn/t3/platform/js/api/wb.js" charset="utf-8"></script>
引入CSS样式文件
在页面顶端<head></head>中，加入如下代码
<link type="text/css" rel="stylesheet" href="http://js.wcdn.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>
效果预览
使用“关注按钮”
为了在一个节点里，生成一个“关注按钮”，在html里添加
<span id=" followBtn"></span>
</span>
在已初始化的JavaScript Client代码里，添加代码，将You Weibo User ID换成你想要关注的人的UID
<pre>
<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>
效果预览
