Home
Social Media
Minimal Social Buttons For Vuepress

Minimal Social Buttons For Vuepress

ntnyq First listed on August 6, 2023
Live Demo Download Source Code

Install & Download:

# Yarn
$ yarn add vuepress-plugin-social-share
# NPM
$ npm i vuepress-plugin-social-share --save

Description:

An easy-to-use yet fully configurable social sharing plugin For Vuepress.

Supported Social Buttons:

  • Facebook
  • Line
  • Reddit
  • Email
  • Skype
  • Telegram
  • Twitter
  • Weibo
  • QQ
  • Douban
  • WhatsApp
  • WeChat
  • QR Code
  • Or custom social buttons.

Basic Usage:

1. Import and register the plugin in the Vuepress.

import { defineUserConfig } from 'vuepress'
import { socialSharePlugin } from 'vuepress-plugin-social-share'
export default defineUserConfig({
  plugins: [socialSharePlugin()],
})

2. Customize the social sharing plugin.

export default defineUserConfig({
  plugins: [
    socialSharePlugin({
      networks: ['twitter', 'facebook', 'reddit'],
      twitterUser: 'jqueryscript',
      fallbackImage: '/social-share.png',
      autoQuote: true,
      useCustomStyle: false,
      isPlain: true,
      hideWhenPrint: false,
      qrcodeOptions: { 
        errorCorrectionLevel: 'H', 
        width: 250, 
        scale: 1, 
        margin: 1.5 
      },
      noGlobalSocialShare: false,
    }),
  ],
})

3. Add more social networks.

import type { SocialShareNetworkData } from 'vuepress-plugin-social-share'
const extendsNetworks: SocialShareNetworkData = {
  pinterest: {
    sharer: 'https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title',
    type: 'popup',
    icon: '/pinterest.png',
  },
  linkedin: {
    sharer:
      'https://www.linkedin.com/shareArticle?mini=true&url=@url&title=@title&summary=@description',
    type: 'popup',
    color: '#1786b1',
    icon: '<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M910.336 0H113.664A114.005333 114.005333 0 0 0 0 113.664v796.672A114.005333 114.005333 0 0 0 113.664 1024h796.672A114.005333 114.005333 0 0 0 1024 910.336V113.664A114.005333 114.005333 0 0 0 910.336 0zM352.256 796.330667H207.189333V375.466667h145.066667z m-72.021333-477.866667a77.824 77.824 0 0 1-81.237334-74.069333A77.824 77.824 0 0 1 280.234667 170.666667a77.824 77.824 0 0 1 81.237333 73.728 77.824 77.824 0 0 1-81.237333 73.386666z m582.314666 477.866667H716.8v-227.669334c0-46.762667-18.432-93.525333-73.045333-93.525333a84.992 84.992 0 0 0-81.237334 94.549333v226.304h-140.629333V375.466667h141.653333v60.757333a155.989333 155.989333 0 0 1 136.533334-71.338667c60.416 0 163.498667 30.378667 163.498666 194.901334z" /></svg>',
  },
  twitter: {
    color: '#f00',
  },
}
export default defineUserConfig({
  plugins: [
    socialSharePlugin({
      networks: ['twitter', 'facebook', 'email', 'pinterest', 'linkedin'],
      extendsNetworks,
    }),
  ],
})

Preview:

Minimal Social Buttons For Vuepress

Changelog:

v2.0.0beta16 (08/06/2022)

  • update

Add Comment