微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
==概述== Javascript SDK的widget包分为两部分: 1、基础包(widget.base),包含“与新浪微博连接按钮”、“关注按钮”两个基本组件; 2、用户名片组件包(widget.atWhere),包含一个微博用户名片的小组件; 开发者可以很容易的参照此widget包,通过使用Javascript SDK,开发自己的JS微博组件。 <b>Widget 线上演示:</b>http://jssdk.sinaapp.com/_html/widget/atWhere.html ==应用信息修改== 为了保证您的应用的安全,在您使用JS-SDK时,需要您在应用信息页面为该应用绑定一个域名,我们将以此域名来判定JS-SDK API请求来源的合法性,不合法的请求将被拒绝。 绑定域名的操作可以在应用创建页面及编辑页面完成。选择使用JS-SDK,填入域名提交即可。 ==放置跨域文件== 由于JavaScript在你的站点访问新浪微博API之间存在跨域问题,因此你需要在你的站点下放置一个新浪提供的跨域文件。 [http://jssdk.sinaapp.com/xd.html.zip 下载跨域文件(xd.html.zip)] 此文件(xd.html)需要被放置在你的站点域名下的某个路径,如 http://yourdoman.com/xd.html ,并保证此URL可用。 <b>注:</b>xd.html文件同运行Javascript SDK的页面需要在同一域下,比如均为abc.yourdomain.com。 ==引入Javascript SDK文件== 在页面顶端<head></head>中,加入如下代码 <pre> <script type="text/javascript" src="http://js.wcdn.cn/t3/platform/js/api/wb.js" charset="utf-8"></script> </pre> ==引入CSS样式文件== 在页面顶端<head></head>中,加入如下代码 <pre> <link type="text/css" rel="stylesheet" href="http://js.wcdn.cn/t3/style/css/common/card.css" /> </pre> 你也可以自己设计CSS样式并引用。 ==初始化JavaScript Client== 在页面的</body>后,加入下面的初始化代码 <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); //放置具体的组件代码 }); </script> </pre> ==使用“与新浪微博连接按钮”== 为了在一个<span>节点里,生成一个“与新浪微博连接”按钮,在html里添加 <pre> <span id="connectBtn"></span> </pre> 在已初始化的JavaScript Client代码里,添加代码 <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); //connect with sina weibo WB.widget.base.connectButton(document.getElementById("connectBtn")); }); </script> </pre> ==使用“关注按钮”== 为了在一个<span>节点里,生成一个“关注按钮”,在html里添加 <pre> <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> </pre> ==使用“微博用户名片”== 在一段纯文本中,识别@用户名,添加用户名片功能。使鼠标移动到“@用户名”上时,浮出一个展示用户信息的层。 在html中添加一段纯文本 <pre> <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> </pre>
返回到
Weibo JS Widget
。
反馈
分享
顶部