Vue Social Share2

Based on Web Share API https://www.w3.org/TR/web-share/

Installation

npm install vue-social-sharing2

Loading the library in components/pages

Browserify / Webpack / Nuxt.js

import VueSocialShare2 from "vue-social-sharing2"

Using the sharer component

<VueSocialShare2
	:styleConfig="{
		backgroundColor: 'none',
		color: '#fff',
		top: '50%',
		right: '-10px',
		transform: 'translateY(-50%)',
		backgroundImage: 'BUTTON BACKGROUND IMAGE URL OR MENTION THE BUTTON TEXT BELOW',
		backgroundRepeat: none,
		height: '100px',
	}"
	:networks="networks"
	buttonText=""
	:webShareData="{
		title: 'Arju S Moon',
		text: 'Demo Text',
		url: 'https://schbang.com',
		image: 'https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80',
	}"
/>

• styleConfig prop overrides all the default styles of the sharer button.

• webShareData prop is specifically to use with the Web Share API on mobile devices

Available Networks

| Network | Properties | | ------ | ------ | | facebook | title, description, url, hashtag | | twitter | text, url, hashtags(Array) | | whatsapp | text |

Defining Network Array

networks: [
	{
		network: "facebook",
		title: "Arju S Moon",
		description: "Arju Desc",
		url: "https://saffola.in/oodles",
		hashtag: "#arjusmoon",
	},
	{
		network: "twitter",
		text: "Saffola Oodles",
		url: "https://saffola.in/oodles",
		hashtags: ["hashtag", "test", "saffola"],
	},
	{
		network: "whatsapp",
		text: "Test Post https://schbang.com",
	},
],