新浪开放平台虽然有分享按钮的组件(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,分享微博会@该用户(可选)*/ 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.bluesdream.com" wb_appkey = "", wb_title = "【蓝色梦想 BluesDream.com】自定义新浪微博分享按钮样式", wb_ralateUid = "1654619591", wb_pic = "https://file.bluesdream.com/wp-content/uploads/2013/01/CSS3-3D%E5%9B%BE%E4%B9%A6%E5%B1%95%E7%A4%BA-3D-Book-Showcase.jpg", 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()
素梅好翔博客 说:
网站做的挺好
June 14, 2016 11:09 am
豪豪 说:
我用你的办法试了一下,没有用啊,而且我用js设置按钮的属性也没有
February 18, 2016 3:49 pm
梦幻神化 说:
你可以把DEMO页的代码复制下来先查看一下 或者你能给到DEMO 现在你这么问我 我也无从回答的说...
February 23, 2016 10:33 am
flower 说:
如何在WordPress网站上应用呢?
December 18, 2015 4:25 pm
梦幻神化 说:
把JS复制过去 然后在你需要分享的按钮上面加上 id="shareBtn" 即可
December 18, 2015 5:31 pm
fir_dameng 说:
thank you~,不做伸手党
November 21, 2015 7:32 pm
flower 说:
如何在WordPress网站上应用呢?
December 18, 2015 4:25 pm