序文

我々はそれを共有したい場合は、あなたのウェブサイトのページで、あなただけのリンクをコピーする方法によって友人に送信することができます。ここでは、ネットを見つけることができなかった公式文書では、Baiduの公式シェアのプラグインの共有を使用する方法について説明しますが、プラグインはまだ使用可能です。

コードの構造

次のようにHTML、JSローディング及び設定、特定コード：共有コードは、3つの部分に分けることができます

<!-- 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を共有します

共有するメディアは、以下の特定のメディアIDのクラスのHTMLコードおよびデータCMDを変更することによって変更することができます

名前 ID	ID	名前	ID
キーシェア	mshare	QQスペース	qzone
新浪微博	中国	人人網	人人網
テンセントのマイクロブログ	tqq	Baiduのアルバム	bdxc
ハッピーネットワーク	Kaixin001の	テンセントの友人	TQF
Baiduのポストバー	tieba	Douban	douban
捜狐Weibo	tsohu	Baiduの新しいホーム	bdhome
QQの友人	SQQ	和讯微博	どうも
Baiduのクラウドコレクション	bdysc	Meilishuo	meilishuo
キノコストリート	mogujie	リトル・ネット	diandian
花びら	huaban	堆糖	duitang
そして、ニュース	HX	Fetion	FX
倫理雲ノート	youdao	小麦ライブラリメモ帳	SDO
ライトノート	qingbiji	マイクロブログの人々	人
新華のマイクロブログ	新華	メール共有	郵便物
私の捜狐	isohu	クレードルスペース	yaolan
隣接するネットワークの場合	wealink	世界社会の終わり	企業
フェイスブック	fbook	ツイッター	TWI
LinkedInの	LinkedInの	URLのコピー	コピー
プリント	プリント	Baiduの個々センター	物語
マイクロ手紙	weixin	株式	iguba

第三に、結果は

使用して、ウェブページにコードをコピーし、設定の一部です。図に示した結果

共有を開始するにはアイコンをクリックしてください

そして、あなたが参照することができ、アイコンをより美しくしたい
https://jingyan.baidu.com/album/e4d08ffd8cd90e0fd2f60d02.htmlを

四は、JavaScriptにThymeleaf伝統的な価値観、および外部JSパス値を使用して

あなたが導入された外部JSを使用する必要がある場合は、以下のチュートリアルを参照することができます。

JS 4.1 Thymeleafパス値

jsのスクリプトタグを追加する最初のthymeleaf値を取得番目：インライン=「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>

外部パス値JS 4.2

外部JS道に渡される値の数は、ここで我々が提示し、あります。

変数の定義は、外部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" : {},
};

Baiduのウェブサイトの共有プラグインを追加します。