social-share网页社交分享替代百度分享按钮

maolai web前端评论9081阅读模式

social-share.js插件可一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等各大社交网站平台,使用字体图标。

之前一直是使用百度分享按钮http://share.baidu.com/code的代码安装来分享网站页面到微博、人人网、QQ空间等各大媒体平台。由于地址已关闭下线,部分平台分享按钮点击也没反应。而social-share可以一建分享到各大社交网站,替代百度社交分享&Bshare按钮。以下有两种方法分享

social-share网页社交分享替代百度分享按钮-图片1

social-share网页社交分享替代百度分享按钮-图片2

1、方法一,还是引入百度js分享按钮,在你要分享页面的位置(如文章底部、栏目侧栏)添加以下百度一键分享按钮HTML代码即可

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};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>

效果演示地址http://www.bokequ.com/qqkw/touxiang/
如果你不想在上面的代码引用百度的http://bdimg.share.baidu.com/static/api/js/share.js文件地址,可引用本站的http://www.bokequ.com/static/api/js/share.js文件。或将static文件上传到你网站的根目录后,在要显示的页面添加以下代码。

<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"1","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];</script>

2、方法二、在你网站要显示页面的头部,添加以下js代码和css样式地址

<link href="http://www.bokequ.com/blog/youxian/css/share.min.css" rel="stylesheet" type="text/css" />
<script src="http://www.bokequ.com/blog/youxian/js/social-share.min.js" type="text/javascript"></script>

在你要分享的页面添加以下div,这个为全部显示分享按钮

<div class="social-share"></div>

演示效果地址http://www.bokequ.com/blog/youxian/2.html看文章页底部
如果只想显示部分社交分享按钮(如微博、豆瓣、qq/微信等可以自行添加),以下代码

div class="social-share" data-initialized="true" style="text-align: center;">
	        <a href="#" class="social-share-icon icon-weibo"></a>
	        <a href="#" class="social-share-icon icon-wechat"></a>
	        <a href="#" class="social-share-icon icon-qq"></a>
	        <a href="#" class="social-share-icon icon-qzone"></a>
			<a href="#" class="social-share-icon icon-douban"></a>
	    </div>

也可以用data-sites=""来指定只显示的部分,如只显示微博、微信、qq、qq空间、豆瓣,代码如下

<div class="share-component" data-sites="weibo,qzone,qq,wechat,douban"></div>

演示效果http://www.bokequ.com/blog/youxian/1.html
通过data-disabled="wechat,google,twitter,facebook" 来限制显示,意思是禁用wechat,google,twitter,facebook 代码如下

<div class="share-component" data-disabled="wechat,facebook,twitter,google"></div>

来源地址cdnjs : https://cdnjs.com/libraries/social-share.js可以直接引入,部分按钮可能要登录帐号才能分享,如豆瓣。

方法一代码static文件下载

https://pan.baidu.com/s/1gXQNF2DL8XyDKEiP_BZKpw?pwd=d35q 提取码: d35q

密码bokequ.com

 
maolai
  • 本文由 maolai 发表于 2019年3月10日 15:52:52
  • 转载请务必保留本文链接:http://www.bokequ.com/370.html

发表评论