国产视频app應CMS主題用戶的建議,給CMS主題的增強插件加個了 Share.js社會化分享的JS插件,此插件可以將你網頁的內容一鍵分享到微博、QQ空間、QQ好友、微信、騰訊微博、豆瓣、Facebook、Twitter、Linkedin、Google+、點點等社交網站,給你網站帶來更多的訪問量。

Share.js的文件引用

Share.js的文件引用分為兩種,一種是頁面已經引用了JQuery插件的方式,一種為頁面未引用JQuery插件的方式

頁面引用JQuery插件引用方法

代碼

<link rel="stylesheet" href="../dist/css/share.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.js"></script>
<script src="../dist/js/jquery.share.min.js"></script>

国产视频app在你網頁的頭部head代碼中引用以上代碼即可,其中jquery.js,如果頁面已引用過就不要再引用了。

頁面未引用JQuery插件的引用方法

代碼

<link rel="stylesheet" href="../dist/css/share.min.css">
<script src="../src/js/social-share.js"></script>
<script src="../src/js/qrcode.js"></script>

同樣,將上面的代碼加入到你網頁的頭部head標簽內就可以

Share.js的頁面調用方法

国产视频appShare.js分享代碼在網頁中的調用分為兩種方法,一種為HTML+js調用方式,一種為HTML元素加入屬性的調用方式

Share.js頁面中HTML的調用方式

1、自定義顯示要分享的圖標


QQ截圖20181214104510.png

示意圖

代碼:

<div class="social-share" data-sites="weibo, qq, qzone"></div>

注:DIV中data-sites屬性的值為要顯示的分享圖標,你可以自定義,但每一項要用英文逗號分開

2、自定義屏蔽不需要的分享圖標

QQ截圖20181214104652.png

示意圖

代碼:

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

注:DIV中的data-disabled屬性中的值,為屏蔽不想顯示的分享圖標,

3、顯示所有的分享圖標

QQ截圖20181214104950.png

示意圖

代碼

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

4、自定義圖標

国产视频app自定義圖標一般很少用到,不過Share.js也提供了方法

使用: data-initialized="true" 標簽或者 initialized 配置項來禁用自動生成icon功能。

QQ截圖20181214104652.png

示意圖

代碼:

<div class="social-share" data-initialized="true">
    <a href="#" class="social-share-icon icon-weibo"></a>
    <a href="#" class="social-share-icon icon-qq"></a>
    <a href="#" class="social-share-icon icon-qzone"></a>
</div>

注:以上a標題會自動加上分享鏈接(a 標簽必須帶 icon-NAME 屬性,不然分享鏈接不會自動加上)。

5、加入自定義的圖標,比如收藏按鈕

加入自定義的的按鈕前,必須要先加載Share.js的分享圖標,不然前臺不會顯示得

QQ截圖20181214105718.png

示意圖

代碼

<div class="social-share" data-mode="prepend">
    <a href="javascript:" class="social-share-icon icon-heart"></a>
</div>

Share.js頁面中HTML加JS的調用方法

国产视频app1、調用share.js全部的分享圖標

QQ截圖20181214110129.png

示意圖

HTML代碼:

<div id="share-1"></div>

JS代碼:

socialShare('#share-1');

2、自定義Share.js的分享圖標調用

国产视频app這里分為兩種方法的調用,但調用的效果都是一樣的。

QQ截圖20181214110623.png

示意圖

方法一:

HTML代碼

<div id="share-2"></div>

JS代碼

socialShare('#share-2', {sites: ['qzone', 'qq', 'weibo','wechat']});

方法二:

HTML代碼:

 <div id="share-2" data-sites="qzone, qq, weibo,wechat"></div>

JS代碼

socialShare('#share-2');

3、自定義屏蔽Share.js分享圖標調用

QQ截圖20181214110846.png

示意圖

HTML代碼

<div id="share-4" data-disabled="wechat , facebook, twitter, google"></div>

JS代碼

socialShare('#share-4');

Share.js自定義配置

Share.js提供了一些配置的接口,但是一般情況下默認的設置就可以滿足我們網站的日常需求

可用的配置項目如下:

url                 : '', // 網址,默認使用 window.location.href
source              : '', // 來源(QQ空間會用到), 默認讀取head標簽:<meta name="site" content="http://overtrue" />
title               : '', // 標題,默認讀取 document.title 或者 <meta name="title" content="share.js" />
origin              : '', // 分享 @ 相關 twitter 賬號
description         : '', // 描述, 默認讀取head標簽:<meta name="description" content="PHP弱類型的實現原理分析" />
image               : '', // 圖片, 默認取網頁中第一個img標簽
sites               : ['qzone', 'qq', 'weibo','wechat', 'douban'], // 啟用的站點
disabled            : ['google', 'facebook', 'twitter'], // 禁用的站點
wechatQrcodeTitle   : '微信掃一掃:分享', // 微信二維碼提示文字
wechatQrcodeHelper  : '<p>微信里點“發現”,掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>'

国产视频appShare.js配置項示例代碼(JS代碼)

var $config = {
    title               : '234',
    description         : '123',
    wechatQrcodeTitle   : "微信掃一掃:分享", // 微信二維碼提示文字
    wechatQrcodeHelper  : '<p>微信里點“發現”,掃一下</p><p>二維碼便可將本文分享至朋友圈。</p>',
};
socialShare('.social-share-cs', $config);

以上選項均可通過標簽 data-xxx 來設置:

駝峰轉為中橫線,如wechatQrcodeHelper 的data標簽為data-wechat-qrcode-helper

Share.js社會化分享插件平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.1 MB