
洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營銷規(guī)律
作者:狐靈科技 | 2020-04-29 18:21 |點擊:
一鍵分享功能是網(wǎng)站社交化的一個重要組件,當(dāng)前發(fā)現(xiàn)一款使用非常簡單的js插件,就是share.js,項目地址: https://github.com/overtrue/share.js 。 share.js使用非常簡單,它可以通過參數(shù)配置自由控制展示哪些分享圖標(biāo),同時它還可以自定義分享時的title以及icon。

如此簡單的一個js組件,對于我這樣的一個后端開發(fā)人員,那也是分分鐘上手,用法這里不細說, 請參考作者github?,F(xiàn)在結(jié)合share.js,給自己的靜態(tài)博客實現(xiàn)一鍵分享功能,同時給自己的博客實現(xiàn)通過參數(shù)控制分享圖標(biāo)的顯示位置。
要使用share.js功能,首先要把share.js的css文件、js文件都引入到html中。本博客是利用Hugo生成的,從share.js項目的src目錄,直接將子目錄css、font、js文件夾 復(fù)制到博客項目的static目錄中,然后將js、css文件引入主模板baseof.html中即可,js文件只需要qrcode.js以及social-share.js文件即可。
使用方法
HTML代碼
<div class="inner-meta clearfix social-share"></div>
自定義配置
所有配置可選, 通常默認就滿足需求:
可用的配置有:
url : '', // 網(wǎng)址,默認使用 window.location.href
source : '', // 來源(QQ空間會用到), 默認讀取head標(biāo)簽:<meta name="site" content="http://overtrue" />
title : '', // 標(biāo)題,默認讀取 document.title 或者 <meta name="title" content="share.js" />
description : '', // 描述, 默認讀取head標(biāo)簽:<meta name="description" content="PHP弱類型的實現(xiàn)原理分析" />
image : '', // 圖片, 默認取網(wǎng)頁中第一個img標(biāo)簽
sites : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點
disabled : ['google', 'facebook', 'twitter'], // 禁用的站點
wechatQrcodeTitle : '微信掃一掃:分享', // 微信二維碼提示文字
wechatQrcodeHelper : '<p>微信里點“發(fā)現(xiàn)”,掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'
以上選項均可通過標(biāo)簽 data-xxx 來設(shè)置:
駝峰轉(zhuǎn)為中橫線,如wechatQrcodeHelper 的data標(biāo)簽為data-wechat-qrcode-helper
禁用 google、twitter、facebook 并設(shè)置分享的描述
<div class="share-component" data-disabled="google,twitter,facebook" data-description="Share.js - 一鍵分享到微博,QQ空間,騰訊微博,人人,豆瓣"></div>
設(shè)置微信二維碼標(biāo)題
<div class="social-share" data-wechat-qrcode-title="請打開微信掃一掃"></div>
針對特定站點使用不同的屬性(title, url, description,image...)
<div class="social-share" data-weibo-title="這個標(biāo)題只有的分享到微博時有用,其它標(biāo)題為全局標(biāo)題" data-qq-title="分享到QQ時用此標(biāo)題"></div>
你也可以自定義圖標(biāo)
使用: data-initialized="true" 標(biāo)簽或者 initialized 配置項來禁用自動生成icon功能。
以上a標(biāo)題會自動加上分享鏈接(a 標(biāo)簽必須帶 icon-NAME 屬性,不然分享鏈接不會自動加上)。
如果你想在分享icon列表中內(nèi)置一些元素,比如放一個收藏按鈕在分享按鈕的后面:
這樣并沒有實現(xiàn),因為結(jié)果是所有的分享按鈕都創(chuàng)建在了收藏按鈕的后面了,這時候你就可以用 data-mode="prepend" 來確定分享按鈕創(chuàng)建的方式。
這樣,所有的分享圖標(biāo)就會創(chuàng)建在容器的內(nèi)容前面,反之可以用 append 創(chuàng)建在容器內(nèi)容后面,當(dāng)然這是默認的,也不需要這么做。
指定移動設(shè)備上顯示的圖標(biāo)
<div class="share-component" data-mobile-sites="weibo,qq,qzone,tencent"></div>
當(dāng)在手機上打開該頁面的時候就只會顯示這4個圖標(biāo)了。
