iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

30天學習30套前端技術(2018年)系列 第 52

[十分鐘學習] goodshare.js - 社群分享按鈕大補帖

example1

快速建立像FacebookTwitter等社群分享按鈕,安裝容易、有廣泛文件和開發者支援,對SEO友善,許多自訂選項,新版本透過ES6打造簡潔原始碼以及高速度,並不再對jQuery有任何相依性,同時也放棄IE11以下版的支援。

GitHub Star: 268
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE11+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

    <!-- goodshare.js v4.1.2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/goodshare.js/4.1.2/goodshare.min.js"></script>
    
  • npm

    $ npm install goodshare.js --save
    

《範例》

  • 分享至Twitter、Favebook、LinkedIn和Google+

    <!--
    	屬性設定[註1]
    	data-social: 設定分享平台
    	data-url: 設定連結位置`document.location.href`
    	data-title: 設定標題`document.title`
    	data-description: 設定描述`[name="description"]`
    	data-image: 設定ICON圖案`[rel="apple-touch-icon"]`
    -->
    <button data-social="twitter">Share this to Twitter</button>
    <button data-social="facebook">Share this to Facebook</button>
    <button data-social="linkedin">Share this to LinkedIn</button>
    <button data-social="googleplus">Google+</button>
    <!-- goodshare.js v4.1.2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/goodshare.js/4.1.2/goodshare.min.js"></script>
    

    [註1]

    屬性 描述
    data-social 設定分享平台(列表[註2])
    data-url 設定連結位置document.location.href
    data-title 設定標題document.title
    data-description 設定描述[name="description"]
    data-image 設定ICON圖案[rel="apple-touch-icon"]

    [註2]

    參數 描述
    vkontakte Вконтакте
    facebook Facebook
    odnoklassniki Одноклассники
    moimir Мой Мир@Mail.Ru
    googleplus Google Plus
    linkedin LinkedIn
    twitter Twitter
    livejournal LiveJournal
    tumblr Tumblr
    blogger Blogger
    pinterest Pinterest
    digg Digg
    evernote Evernote
    reddit Reddit
    delicious Delicious
    stumbleupon StumbleUpon
    pocket Pocket
    surfingbird Surfingbird
    liveinternet LiveInternet
    buffer Buffer
    instapaper Instapaper
    xing Xing
    wordpress WordPress
    baidu Baidu
    renren RenRen
    weibo Weibo

《延伸》

  1. Choose a language · goodshare.js — Useful modern JavaScript solution for share a link from your website to social networks or mobile messengers
  2. goodshare.js/README.md at master · koddr/goodshare.js

上一篇
[十分鐘學習] toastr - 簡易提示訊息
下一篇
2018鐵人賽索引和心得(圖多慎入)
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言