首页 > 其他 > 详细

百度分享插件使用

时间:2019-10-14 16:11:33      阅读:67      评论:0      收藏:0      [点我收藏+]

这一篇写的比较全面,各种参数也基本都有了:百度分享代码--一键分享Baidu Share BEGIN

 

这里完整的展示一下插件如何编写。

首先需要插入百度分享插件js文件:

Tip:这个插件不支持https,如果要用https的话就直接把 static 文件夹放在网站的根目录下,并将百度分享代码中的 http://bdimg.share.baidu.com/ 改为 / 。下载支持HTTPS百度分享插件

with (document) 0[(getElementsByTagName(‘head‘)[0] || body).appendChild(createElement(‘script‘)).src =
    ‘http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=‘ + ~(-new Date() / 36e5)];

 

DOM中需要添加的内容:

<div class="bdsharebuttonbox">
    <a href="#" class="bds_more" data-cmd="more">更多</a>
    <a href="#" class="bds_qzone" data-cmd="qzone">QQ空间</a>
</div>

<div class="bdsharebuttonbox">是必须要有的,在其内部可以添加各种分享按钮,具体请看最上面提到的文章

class="bds_more" data-cmd="more"  分享按钮的 class 和 data-cmd 要相互对应

js 部分,插件的初始化属性配置:

 1  window._bd_share_config = {
 2     common: {
 3         bdText: ‘分享的内容‘,
 4         bdMini: "2",                // 下拉浮层分享按钮的列数
 5         bdMiniList: [‘mshare‘, ‘qzone‘, ‘tsina‘, ‘weixin‘, ‘tqq‘, ‘tieba‘, ‘copy‘, ‘print‘],   //  下拉浮层显示的内容,默认显示为 false
 6         bdPic: ‘/assets/share.jpg‘,    // 分享的图片
 7         bdStyle: "0",
 8         bdSize: "16",
 9         bdUrl: ‘‘,                  // 分享的地址
10         onBeforeClick: setConf      // 在用户点击分享按钮时执行代码,更改配置。function(cmd,config){} cmd为分享目标id,config为当前设置,返回值为更新后的设置。
11     },
12     share: []
13 };
bdMiniList 可以配置鼠标悬浮时具体显示哪些分享按钮,按照如上配置会显示为:
技术分享图片

 如果改为 false ,则会显示:

技术分享图片

如果一个页面需要分享不同的内容,就要在分享之前重新配置。这里用 mouseover 事件监听,动态修改参数,等待 onBeforeClick  被触发,从而达到动态配置分享内容的目的:

 1 function setConf(cmd, config) {
 2     if (url) {
 3         config.bdUrl = url;
 4         config.bdText = title;
 5     }
 6     return config;
 7 }
 8 $(‘.bdsharebuttonbox a‘).on(‘mouseover‘, function () {
 9     title = $(this).data(‘title‘);
10     url = window.location.origin+$(this).data(‘url‘);
11 })

但是对于点击“更多”出来的分享弹出框中的内容如何自定义还没有找到方法。

 

百度分享插件使用

原文:https://www.cnblogs.com/cyhan/p/11671566.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!