Contents
Description:
vuepress-plugin-social-share is a minimal social sharing buttons for VuePress, which is easy to use and fully configurable plugin for VuePress.
You may also like:
A simple and clean social sharing component for Vue.js version 2A lightweight and customizable social sharing component for Vue.js
Supported social buttons:
FacebookTwitterTelegramLineRedditSkypeWeiboQQDoubanWhatsAppEmailcustom social buttons
How to install and use it?
1. Install the component with NPM or YARN.
#npm
npm install vuepress-plugin-social-share -D
#yarn
yarn add vuepress-plugin-social-share -D
2. Config in your .vuepress/config.js.
module.exports = {
plugins: [‘social-share’],
}
3. Setup the social network buttons.
const extendsNetworks = {
pinterest: {
sharer: ‘https://pinterest.com/pin/create/button/[email protected]&[email protected]&[email protected]’,
type: ‘popup’,
icon: ‘/pinterest.png’,
},
linkedin: {
sharer:
‘https://www.linkedin.com/shareArticle?mini=true&[email protected]&[email protected]&[email protected]’,
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>’,
},
}
4. You can also customize the social sharing plugin.
module.exports = {
plugins: [
[
‘social-share’,
{
networks: [‘twitter’, ‘facebook’, ‘reddit’, ‘telegram’, ’email’],
email: ‘[email protected]’,
twitterUser: ‘ntnyq’,
fallbackImage: ‘/social-share.png’,
autoQuote: true,
isPlain: true,
extendsNetworks,
},
],
],
}
The post A simple and lightweight social sharing buttons for VuePress – vuepress-plugin-social-share appeared first on Lipku.com.