• 本站已对IE放弃治疗,请在Chrome、Firefox等现代浏览器浏览本站。记住我们的域名:wanysys.cc 加入本站QQ群,大家一起HIGH: QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 传送门:#

自定义新浪微博分享按钮样式

前端 张昊翔 2年前 (2016-06-14) 997次浏览 5个评论 扫描二维码

新浪开放平台虽然有分享按钮的组件(http://open.weibo.com/sharebutton)并且提供了两种格式的应用方法:WBML和JS,但还是无法据自己的需求做到自定义样式。

为了解决该问题,我们首先来看下新浪所生成的JS代码:

<script type="text/javascript" charset="utf-8">
(function(){
var _w = 32 , _h = 32;
var param = {
url:location.href,
type:'1',
count:'', /**是否显示分享数,1显示(可选)*/
appkey:'', /**您申请的应用appkey,显示分享来源(可选)*/
title:'', /**分享的文字内容(可选,默认为所在页面的title)*/
pic:'', /**分享图片的路径(可选)*/
ralateUid:'', /**关联用户的UID,分享<a href="http://www.wanysys.cc/tag/%e5%be%ae%e5%8d%9a" title="查看更多关于微博的文章" target="_blank">微博</a>会@该用户(可选)*/
language:'zh_cn', /**设置语言,zh_cn|zh_tw(可选)*/
dpc:1
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://service.weibo.com/staticjs/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
</script>

在这里,可以看到新浪允许参数的自定义:
count:” 表示是否显示当前页面被分享数量(1显示)(可选,允许为空)
url:” 将页面地址转成短域名,并显示在内容文字后面。(可选,允许为空)
appkey:” 用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网。(可选,允许为空)
title:” 分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)
pic:” 自定义图片地址,作为微博配图(可选,允许为空)
ralateUid:” 转发时会@相关的微博账号(可选,允许为空)
language:” 语言设置(zh_cn|zh_tw)(可选)

附:
AppKey申请地址:http://open.weibo.com/webmaster/add
新浪微博用户UID/数字ID查看方法:
1. 进入到用户微博主页,点击其关注和粉丝的连接,便能在地址栏中看用户的UID/数字ID。例(http://weibo.com/用户用户UID/myfllow)
2. 打开http://open.weibo.com/sharebutton,在关联账号中输入微博ID,便能在下方获得代码区域出现相关的ralateUid内容。

此时你有没发现,当单击分享以后,能够看到如带有相关参数的动态链接地址:http://service.weibo.com/share/share.php?url=&appkey=&title=&pic=&ralateUid=&language=zh_cn

如此一来,我们可以通过变量自己来创建动态链接地址,那么样式和各种细节就全由我们自己所掌控。

/* weiboShare */
function weiboShare(){
var wb_shareBtn = document.getElementById("shareBtn")
wb_url = document.URL, //获取当前页面地址,也可自定义例:wb_url = "http://www.wanysys.cc"
wb_appkey = "",
wb_title = "【素梅好翔博客www.wanysys.c】自定义新浪微博分享按钮样式",
wb_ralateUid = "345897472",
wb_pic = "自定义样式图片地址",
wb_language = "zh_cn";

wb_shareBtn.setAttribute("href","http://service.weibo.com/share/share.php?url="+wb_url+"&appkey="+wb_appkey+"&title="+wb_title+"&pic="+wb_pic+"&ralateUid="+wb_ralateUid+"&language="+wb_language+"");
}
weiboShare()

素梅好翔博客 , 版权所有丨如未注明 , 均为原创 , 转载请注明出处:http://www.wanysys.cc/coding/front/568.html
喜欢 (0)
[18586878276]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(5)个小伙伴在吐槽
  1. 这个可以呀
    纯洁博客2016-06-14 16:51 回复 Windows 10 | Firefox浏览器 47.0
    • 张昊翔
      嘿嘿
      张昊翔2016-06-14 17:00 回复 Windows 10 | Firefox浏览器 45.0
  2. 新浪微博的样式。
    夏日博客2016-06-17 15:36 回复 Windows 7 | Chrome 45.0.2454.101
  3. 如果可以有图示就更好了。
    真我风采2016-06-19 14:14 回复 Windows 10 | Chrome 45.0.2454.101
    • 张昊翔
      嗯,看有时间搞个
      张昊翔2016-06-19 15:16 回复 Windows 10 | Firefox浏览器 45.0