自定义新浪微博分享按钮

avatar 2017年3月21日18:06:09 6 857 views

博主这几天申请了一个新浪微博的应用,得到了一个App Key,申请地址点此

于是准备给页面加一个新浪微博分享按钮,方便随时分享文章到微博,引一波ip,嘿嘿嘿。但是新浪微博的那个图标和按钮真的时丑的一比,不美观,不好改样式。于是就衍生了本文,如何自定义新浪微博按钮。

第一步、部署新浪微博组件

所谓自定义按钮其实原理很简单,就是直接弄一个超链接a,通过js给a标签的href赋值为要跳转的地址。上代码之前,我们需要看这里,如何部署新浪微博的组件。第三个,我们不加,通过代码的形式跳转。

 

第二步、加入a标签

在你按钮的位置放一个超链接,给id=shareBtn,其他的如href不需要填,当然,你也可以在a标签里加button按钮,随便自定义

  1. <a  id="shareBtn" href="javascript:void(0)"  target="_blank">分享</>

 

第三步、加js代码

然后在页面内加以下js代码,如果是放在js文件里,去掉script标签

  1. /* weiboShare */
  2. function weiboShare(){
  3.     var wb_shareBtn = document.getElementById("shareBtn")
  4.     wb_url = document.URL, //获取当前页面地址,也可自定义例:wb_url = "http://liuyanzhao.com"
  5.         wb_appkey = "3118689721",//你的app key
  6.         wb_title = "",
  7.         wb_ralateUid = "5936412667",//微博id,获得你的用户名
  8.         wb_pic = "",
  9.         wb_language = "zh_cn";
  10.     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+"");
  11. }
  12. weiboShare();

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:6   其中:访客  4   博主  2

    • avatar 牧羊人 0

      可惜你这个效果并不算好。。。可以加个函数进去,参考下我的。。

        • avatar Yanzh Admin

          @牧羊人 谢谢啦

        • avatar boke112导航 3

          这个还是很好用的,不过还是喜欢用百度分享,获得一个新浪微博KEY就行,分享之后可以留小尾巴就OK了

          • avatar 星空游戏 4

            沙发稳稳的

            • avatar 闲鱼 4

              我感觉添加这个了会变慢一些,就去掉了

                • avatar Yanzh Admin

                  @闲鱼 暂时还没感觉到 :mrgreen: :mrgreen: