注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

早衰男的巢

大音希声 道隐无名

 
 
 

日志

 
 

sina weibo:微博分享接口,自定义分享按钮样式  

2012-05-30 17:12:47|  分类: UI/CSS/HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
微博的开放平台(open.weibo.com)提供的网站集成方案, 是一个分享按钮或图标

http://open.weibo.com/sharebutton

有wbml和js两种方式生成
(js生成一个iframe显示 http://hits.sinajs.cn/A1/weiboshare.html)
好处是可以显示分享数等这种额外的信息,但分享出去的短链接必须是当前页面的链接

预定义好了样式,当我需要对分享的内容或者分享的方式进行自定义的话,可以怎么做?

我们先从js的脚本入手

<script type="text/javascript" charset="utf-8">
(function(){
var _w = 90 , _h = 24;
var param = {
url:location.href,
type:'2',
count:'1', /**是否显示分享数,1显示(可选)*/
appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
title:'', /**分享的文字内容(可选,默认为所在页面的title)*/
pic:'', /**分享图片的路径(可选)*/
ralateUid:'', /**关联用户的UID,分享微博会@该用户(可选)*/
language:'zh_cn', /**设置语言,zh_cn|zh_tw(可选)*/
rnd:new Date().valueOf()
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
</script>


构造 temp 这串参数里面,我们看到了各个变量的含义,那么自定义 url 或者改写函数 实现了

分享按钮样式如果要改变的话
继续看点开这个按钮的地址,通过urldecode我们看到是这么一个api
http://service.weibo.com/share/share.php?url=&appkey=&title=&pic=&ralateUid=&language=zh_cn

我们需要知道的是
url :转换成短链接的需要分享的link
appkey:如果有注册应用的话可以填上,这条微博发出的时候会显示通过你的app名称发送,可为空
title:可以预设分享内容的模板,会显示在分享转发内容的短链前面,空的话则文字为默认的上面url捕捉到的html title
pic:可为空,或图片的uri 会抓取图片作为微博附图
ralateUid: 发出的时候可以@上某的新浪用户,例如自己
language 不解释

以上的这串记得要进行 urlencode 然后点击后,就可以实现调用新浪微博的快捷分享窗口了..
那么可以用任意喜欢的表达方式来展现按钮或图标,链接构造成如上格式就可以了

十分简单, right?

  评论这张
 
阅读(9126)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018