Weibo JS Widget
(→使用“与新浪微博连接按钮”) |
(→概述) |
||
第9行: | 第9行: | ||
开发者可以很容易的参照此widget包,通过使用Weibo-JS,开发自己的JS微博组件。 | 开发者可以很容易的参照此widget包,通过使用Weibo-JS,开发自己的JS微博组件。 | ||
− | <b> | + | <b>Widget线上演示-微博名片</b> http://jssdk.sinaapp.com/_html/widget/atWhere.html |
+ | <b>Widget线上演示-登陆微博按钮</b> http://jssdk.sinaapp.com/_html/widget/login.html | ||
+ | <b>Widget线上演示-关注按钮</b> http://jssdk.sinaapp.com/_html/widget/follow.html | ||
==应用信息修改== | ==应用信息修改== |
2010年12月15日 (三) 16:19的版本
目录 |
概述
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)需要被放置在你的站点域名下的某个路径,如 http://yourdoman.com/xd.html ,并保证此URL可用。
注:xd.html文件同运行Weibo-JS的页面需要在同一域下,比如均为abc.yourdomain.com。
引入Weibo-JS文件
在页面顶端<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>
此外,为了使您更方便的取得登陆用户的信息,我们在连接按钮的函数中包装了两个回调函数,如示例:
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> </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>