1.0.1 • Published 3 years ago
vue-social-sharing2 v1.0.1
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 |
---|---|
title, description, url, hashtag | |
text, url, hashtags(Array) | |
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",
},
],