发表于 2018-07-30 21:07:55   |   已被 访问: 722 次   |   分类于:   杂谈   |   暂无评论

今天有朋友问我一个问题，刚好我的另一个博客上（pop快讯）有，想着把那个页面分享给他就好了。却发现，并没有分享按钮，只能发一个光秃秃的网址过去。这件事当然不能这么过去，本节将探讨一种添加分享按钮的方法。

---

首先，仔细观察了一下点击分享按钮后的响应，发现其实就是访问一个组合后的网址 url

但我完全没有接触过网站开发，php 更是没有用过，所以即使知道方法，也不知道该如何实现。学一下当然时可以的，但是要花不少时间，所以如果有现成的轮子，就没有必要自己造了。于是，上各种搜索引擎，发现也是有一些插件可以实现分享功能，例如JiaThis, baidushare 等，但是，它们都在几年前停止更新了。再找，花了好多时间也没有找到适合国内使用的插件，最后，不得不自己动手改代码了。所幸，并不需要写太多代码，百度提供了分享代码。

百度分享代码

---

先放出官方网址：http://share.baidu.com/，居然不是 https 的，看来百度已经不想搞这个项目了。

点击获取代码，得到如下页面

可以设计成自己喜欢的样式，设置完成后，点击复制代码，就得到了现成的分享代码，下面是我获取的。

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone"></a><a href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq" data-cmd="tqq"></a><a href="#" class="bds_renren" data-cmd="renren"></a><a href="#" class="bds_weixin" data-cmd="weixin"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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)];</script>

如果你的网站是http的，就可以直接把代码粘贴到自己的网站页面了。如果网站是https的，粘贴也没有效果，这是因为百度share的 api 不支持 https 调用。

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

解决百度分享(baidushare)不支持https

---

有大神在 github 上分享了支持 https 的代码，我们可以把它下载到自己的网站本地，这样就不用远程调用百度的 http API 了，只要调用本地的 https 代码即可。

https://github.com/hrwhisper/baiduShare

这是大神写的说明

接下来就是详细操作了：下载上面的代码后，把它解压，里面有个 static 文件夹，把它上传到网站的根目录，就是跟 wp-content 同级的那个目录。接下来把分享代码的资源路径改成本地的，例如我的网站可以如下改：
将

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

src='https://xrkzn.cn/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];

这个时候，再把分享代码粘贴到网站页面就可以了。

粘贴分享代码到页面

---

因为打算分享的是文章内容，因此决定将分享代码添加到 single.php 文件里.

<?php the_content(); ?> 的功能使显示文章内容，所以如果想把分享按钮放在文章后面，就放在这行代码后，反之就放在前面。

最后，更新下文件，刷新页面，发现分享按钮出现了。