网站开启https后，百度分享插件不显示了该怎么解决？

网站自从开启https之后，网页中的百度分享就不能用了！但是又寻找不到类似百度分享的替代品，该怎么办呢？还是要想办法如何解决百度分享不支持https的问题！于是查阅了很多资料，还真发现了一个完美解决这个问题的方法。

由于百度分享不支持HTTPS这件事由来已久，一直也有一些朋友咨询这个问题：网站添加https后，百度分享不显示了，该怎么解决呢？所以我就整理了一下解决方案。在此，借助马海祥博客的平台跟大家分享一下。

第一步：下载百度分享必备文件

首先，我们需要先下载百度分享的主要文件static文件包，我将修改好的分享代码压缩包放在下面，大家可以先下载一下：

百度分享static文件下载地址：百度分享static源文件

第二步：解压后得到的static文件夹，可上传到网站根目录（注：域名/static）。

这里需要确保要确保“根目录”能被访问到。

然后在对应的百度分享代码中，把“http://bdimg.share.baidu.com/”改为“ /”。

…….src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>

改为：

…….src='/static/api/js/share.js?v=89860593.js?'];</script>

另外，如果你不是将static文件夹放在根目录，那就需要你将http://bdimg.share.baidu.com/改成你文件所在的路径，如下图红框内的链接：

同时，也要修改share.js文件中的链接，如下图所示位置：

至此，我们便将百度分享的插件本地化了，你网页中也便可以正常显示百度分享了。不过美中不足的就是，以后没法查看分享数据分析了！

相关知识扩展：

接下来，我将介绍一下百度分享的代码结构和安装配置方法，以便于大家更深入的理解百度分享插件，进而可以自定义修改：

1、代码结构

分享代码可以分为三个部分：HTML、设置和js加载，示例如下：

代码结构如下：

<div class="bdsharebuttonbox" data-tag="share_1">

<!-- 此处添加展示按钮 -->

</div>

<script>

window._bd_share_config = {

//此处添加分享具体设置

}

//以下为js加载部分

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

</script>

2、按钮标签

按钮标签代码：

<div class="bdsharebuttonbox" data-tag="share_1">

<a class="bds_mshare" data-cmd="mshare"></a>

<a class="bds_qzone" data-cmd="qzone" href="#"></a>

<a class="bds_tsina" data-cmd="tsina"></a>

<a class="bds_baidu" data-cmd="baidu"></a>

<a class="bds_renren" data-cmd="renren"></a>

<a class="bds_tqq" data-cmd="tqq"></a>

<a class="bds_more" data-cmd="more">更多</a>

<a class="bds_count" data-cmd="count"></a>

</div>

说明：

只有普通页面分享需要按钮标签。划词分享、图片分享无需添加HTML结构。

HTML结构可以放在body的任意位置，可复制多份。

class＝"bdsharebuttonbox" 部分为dom选择器，请勿改动。

data-tag属性为分享按钮标识，用于实现同一页面中多分享按钮不同配置。

data-cmd属性为分享目标标识，取值请参见：分享媒体id对应表。此外值为more时点击展现更多弹窗，值为count时展现分享数。

HTML代码中其他部分均可自定义。

3、自定义设置

设置部分结构如下，如不需要某项功能，删除相应的配置项即可。

设置：

<script>

window._bd_share_config = {

common : {

//此处放置通用设置

},

share : [

//此处放置分享按钮设置

],

slide : [

//此处放置浮窗分享设置

],

image : [

//此处放置图片分享设置

],

selectShare : [

//此处放置划词分享设置

]

}

</script>

（1）、通用设置

通用设置将作用于所有分享类型，可将通用设置放于此处，如分享内容、分享url等。

通用设置：

<script>

window._bd_share_config = {

common : {

bdText : '',

bdDesc : '',

bdUrl : '',

bdPic : '',

...

}

}

</script>

通用设置项解析：

（2）、分享按钮设置

分享按钮设置的值为数组或对象，值为数组时可对多个分享按钮应用不同的设置。

分享按钮设置：

<script>

window._bd_share_config = {

share : [{

"tag" : "share_1",

"bdSize" : 32,

...

},{

"tag" : "share_2",

"bdSize" : 16,

...

}]

}

</script>

分享按钮配置项解析：

（3）、浮窗分享设置

浮窗分享设置的值为数组或对象，值为数组时可在页面显示多个分享浮窗。

浮窗分享设置：

<script>

window._bd_share_config = {

slide : [{    

bdImg : 0,

bdPos : "right",

bdTop : 100

},{

bdImg : 0,

bdPos : "left",

bdTop : 100

}]

}

</script>

浮窗分享设置项解析：

（4）、图片分享设置

图片分享设置的值为数组或对象，值为数组时可对图片应用不同的设置。

图片分享设置：

<script>

window._bd_share_config = {

image : [{

"tag" : "img_1",

viewType : 'list',

viewPos : 'top',

viewColor : 'black',

viewSize : '16',

viewList : ['qzone','tsina','huaban','tqq','renren']

},{

"tag" : "img_2",

viewType : 'list',

viewPos : 'top',

viewColor : 'black',

viewSize : '16',

viewList : ['qzone','tsina','huaban','tqq','renren']

}]

}

</script>

图片分享设置项解析：

（5）、划词分享设置

划词分享设置：

<script>

window._bd_share_config = {

selectShare : [{

"bdSelectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf'],

"bdContainerClass" : "容器class名"

}]

}

</script>

图片分享设置项解析：

4、引入javascript

加载js：

<script>

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

</script>

说明：请将代码放于</body>之前。

5、完整示例代码

完整代码如下，请根据自身情况修改。

完整示例代码：

<div class="bdsharebuttonbox" data-tag="share_1">

<a class="bds_mshare" data-cmd="mshare"></a>

<a class="bds_qzone" data-cmd="qzone" href="#"></a>

<a class="bds_tsina" data-cmd="tsina"></a>

<a class="bds_baidu" data-cmd="baidu"></a>

<a class="bds_renren" data-cmd="renren"></a>

<a class="bds_tqq" data-cmd="tqq"></a>

<a class="bds_more" data-cmd="more">更多</a>

<a class="bds_count" data-cmd="count"></a>

</div>

<script>

window._bd_share_config = {

common : {

bdText : '自定义分享内容',

bdDesc : '自定义分享摘要',

bdUrl : '自定义分享url地址',

bdPic : '自定义分享图片'

},

share : [{

"bdSize" : 16

}],

slide : [{    

bdImg : 0,

bdPos : "right",

bdTop : 100

}],

image : [{

viewType : 'list',

viewPos : 'top',

viewColor : 'black',

viewSize : '16',

viewList : ['qzone','tsina','huaban','tqq','renren']

}],

selectShare : [{

"bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']

}]

}

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

</script>

6、分享媒体id对应表

分享媒体id对应表：

7、工具

检测分享代码版本

//打开已安装分享代码的页面，在控制台中执行：

javascript:b=(window.bdShare||window._bd_share_main);alert(b?'u5F53u524Du9875u9762u7684u5206u4EABu4EE3u7801u7248u672Cu4E3AuFF1A'+(b.version||'1.0'):'u5F53u524Du9875u9762u6CA1u6709u5B89u88C5u5206u4EABu4EE3u7801u3002')

注意：您在使用自定义属性，请您将自定义内容里面涉及到英文单引号(')进行(')转义，以免出现问题！

常见问题：

1、修改后，地址栏绿色的小锁会消失，该怎么解决？

有些时候，直接这么将static文件放上去是会有问题的，比如你地址栏绿色的小锁会消失！

就是说你虽然是Https的站点，但请求了http的资源，这种混合模式是不好滴（不懂得如何安装的朋友，可查看马海祥博客《HTTP与HTTPS的区别》的相关介绍）。

修复方法：

（1）、打开static文件：

domain: {staticUrl: "http://bdimg.share.baidu.com/"}

修改为：

domain: {staticUrl: "/"}

nsClick: "http://nsclick.baidu.com/v.gif"  

修改为：

nsClick: "/"

（2）、找到staticpijs ranslogger.js文件，把里面的内容都删掉，但保留这个空文件。

按照这两个步骤，问题便解决了。

2、微信URL过长失败二维码出不来的问题

出现这个问题呢，主要的原因：网址过长时，调用dwz API，而该网站不支持HTTPS。

修复方式有两种：

（1）、允许长的网址

（2）、自己寻找可以缩短网址的API，进行替换

本文采用的是第一种，在trans_weixin.js 修改d函数即可：

d = function () {

s.attr("data-url") != r && (u.html("u6b63u5728u52a0u8f7d"), r.length > 200 ? 

/*p(r, function (e) {

h(e, !0)

}) */

h(r):

h(r))

},

至此，问题也便解决了！

好了，快去试试效果吧~

马海祥博客点评：

对于这个百度分享按钮，说实话，我本人还是非常喜欢用的，不但可以帮自己的网页做社交平台的引流，还能分析出自己文章的受众群体的喜爱程度，但随着网民上网习惯的改变，以及社交媒体对第三方网址的限制，百度也停止了此插件的运营，现在也用不到了，想想还是非常可惜的！