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

新浪开放平台虽然有分享按钮的组件(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  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 =  "http://www.bluesdream.com/blog/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()

Demo

参考网址:http://www.bluesdream.com/blog/custom-sina-weibo-button-style.html


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值