怎么快速在網站上創建分享按鈕？推薦一個JavaScript組件

villainhr 發布于2019-08-29 13:29 / 1159人閱讀

摘要：記得以前做網站的時候遇到前端分享按鈕會去百度分享或者在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發現沒有特別合適的于是便想著自己做一款組件。

記得以前做網站的時候遇到前端分享按鈕會去百度分享或者jiathis在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發現沒有特別合適的于是便想著自己做一款組件。
先附上地址 https://github.com/slince/social-share.js

主題樣式

考慮到大眾需求，預先做了五款樣式主題；最后兩個暗色樣式比較適用比較酷酷的或者冷色系為主的網站；當然你也可以自定義主題，不過自定義主題需要你自己寫css樣式了。

默認樣式

方形樣式

圓形樣式

暗色方形

暗色圓形

安裝

接下來我們再說一說安裝的事情，考慮到大眾的需求支持以下幾種安裝方式：

通過npm和yarn安裝:

推薦這種方式，現在前端工程化已經很流行了，不在以前那種比較混亂的拿來即用的時代，使用npm可以很方便的管理你的前端代碼。

npm用戶執行：

$ npm install social-share-button.js --save

yarn用戶執行

$ yarn add social-share-button.js

通過script引入：

當然也支持傳統的script標簽引入的功能，到https://github.com/slince/social-share.js/releases界面下載最新的版本，拷貝dist目錄下的文件到你的項目中，然后通過script和link標簽分別引入js和css文件即可

用法

最簡單的用法

import SocialShare from "social-share-button.js"; //如果你是通過script標簽引入則不需要此步驟

new SocialShare(".social-share-container");

定制主題

new SocialShare(".social-share-container", {
    theme: "square"
});

定制分享參數

new SocialShare(".social-share-container", {

    // 定義通用的分享參數
    title: "百度搜索",
    url: "http://www.baidu.com",
    summary: "一個中文搜索網站",
    image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",

    // 多帶帶定義微博的分享參數,其它的同
    weibo: {
        title: "網易",
        url: "http://www.qq.com",
        summary: "網易門戶",
        image: "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
    }
});

關閉指定按鈕

new SocialShare(".social-share-container", {
    facebook: false,
    twitter: false
});

一些案例展示可以查看example目錄下的例子：希望這款組件可以幫到你，歡迎大家pr，歡迎star

GPU云服務器云服務器怎么創建一個視頻網站怎么在云服務器上創建數據庫怎么在網站上更新內容怎么在服務器上搭建網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112630.html

怎么快速在網站上創建分享按鈕？推薦一個JavaScript組件

摘要：記得以前做網站的時候遇到前端分享按鈕會去百度分享或者在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發現沒有特別合適的于是便想著自己做一款組件。記得以前做網站的時候遇到前端分享按鈕會去百度分享或者jiathis在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發現沒有特別合適的于是...

DataPipeline 2019-08-01 17:39 評論0 收藏0
怎么快速在網站上創建分享按鈕？推薦一個JavaScript組件

摘要：記得以前做網站的時候遇到前端分享按鈕會去百度分享或者在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉在上找了很久發現沒有特別合適的于是便想著自己做一款組件。記得以前做網站的時候遇到前端分享按鈕會去百度分享或者jiathis在線生成一個分享代碼，當時不懂現在看起來它們做了不少信息收集工作，于是便想著替換掉；在github上找了很久發現沒有特別合適的于是...

孫淑建 2019-08-21 16:40 評論0 收藏0
JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0
前端基礎入門

摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...

shinezejian 2019-08-22 13:51 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0