網站添加百度分享插件

前言

在自己的網站上我們如果想把網頁分享出去，只能通過復制鏈接的方式發給好友。這里將介紹如何使用百度官方提供的分享插件進行分享，在官網里已經找不到文檔了，但插件還是能用的。

一、代碼結構

分享代碼可以分為三個部分：HTML、設置和js加載，具體代碼如下

<!-- HTML代碼 -->
<div id="share">
    <div class="bdsharebuttonbox" data-tag="share_1">
        <a class="bds_more" data-cmd="more">更多</a>
        <a class="bds_weixin" data-cmd="weixin"></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_sqq" data-cmd="sqq"></a>
        <a class="bds_tieba" data-cmd="tieba"></a>
    </div>
</div>


<script>
    /* 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)];
    
    /* 設置 */
    window._bd_share_config = {
        "common" : {
            "bdText" : '這是分享的標題',
            "bdComment" : '我是通用分享設置,會出現在發送給QQ好友里的描述',
            "bdPic" : "圖片鏈接"",//分享的圖像地址
            "bdStyle" : "1",//按鈕樣式
            "bdSize" : "32",//按鈕大小
            "bdUrl" : 'https://www.baidu.com',//分享的地址
            "bdDesc":'給你的好友留一句話吧',
        },
        "share" : {},
    };
</script>

二、分享的媒體id對應表

通過更改html代碼的class和data-cmd可以更改分享媒體，具體媒體id如下

名稱ID	ID		名稱	ID
一鍵分享	mshare		QQ空間	qzone
新浪微博	tsina		人人網	renren
騰訊微博	tqq		百度相冊	bdxc
開心網	kaixin001		騰訊朋友	tqf
百度貼吧	tieba		豆瓣網	douban
搜狐微博	tsohu		百度新首頁	bdhome
QQ好友	sqq		和訊微博	thx
百度雲收藏	bdysc		美麗說	meilishuo
蘑菇街	mogujie		點點網	diandian
花瓣	huaban		堆糖	duitang
和訊	hx		飛信	fx
有道雲筆記	youdao		麥庫記事	sdo
輕筆記	qingbiji		人民微博	people
新華微博	xinhua		郵件分享	mail
我的搜狐	isohu		搖籃空間	yaolan
若鄰網	wealink		天涯社區	ty
Facebook	fbook		Twitter	twi
linkedin	linkedin		復制網址	copy
打印	print		百度個人中心	ibaidu
微信	weixin		股吧	iguba

三、效果展示

使用方式就是將這些代碼復制到你的網頁中，再進行一些設置即可。效果如圖

點擊圖標即可進行分享

想要讓圖標更加的好看的話可以參考
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.html

四、Thymeleaf傳值到JavaScript中和使用外部JS傳值

​ 如果需使用外部引入js可看下方教程。

4.1 Thymeleaf傳值到JS

1. js取得thymeleaf中的值首先要在script標簽中加上 th:inline="javascript"

​ 2. 變量格式： [[${變量名}]]

<script th:inline="javascript" src="../static/js/share.js" th:src="@{/js/share.js}">
    var id = [[${blog.id}]];
    var img = [[${blog.firstPicture}]];
    var title = [[${blog.title}]];
</script>

4.2 使用外部JS傳值

將值傳給外部js的方式有很多種，這里就介紹一種。

​ 首先需在script標簽中定義變量(如上方代碼塊)，定義好變量后需在外部js加上如下代碼

var script = document.getElementsByTagName("script");
eval(script[script.length-1].innerHTML);

加上去之后就可以使用剛剛傳進來的變量了。

share.js完整代碼：

var script = document.getElementsByTagName("script");
eval(script[script.length-1].innerHTML);
with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
window._bd_share_config = {
    "common" : {
        "bdText" : '安徒生的筆-博客',
        "bdComment" : title,
        "bdPic" : img,//分享的圖像地址
        "bdStyle" : "1",//按鈕樣式
        "bdSize" : "32",//按鈕大小
        "bdUrl" : 'http://www.atsdb.cn/blog/'+id,//分享的地址
        "bdDesc":'兄弟，分享一篇干貨給你，趕緊領取',
    },
    "share" : {},
};