social-sharing
v0.2.2
Published
social share button add-on
Downloads
17
Readme
Social Buttons
Installation
npm install --save-dev social-sharingUsage
1. Add .css and .js files of socialSharing.
<head>
...
<link rel="stylesheet" href="node_modules/social-sharing/dist/css/socialSharing.min.css">
...
</head>
<body>
<script type="text/javascript" src="node_modules/social-sharing/dist/js/socialSharing.min.js"></script>
</body>2. Initialise app and pass a configuration object to it:
<script>
var options = {
orientation: 'left',
buttonDesktopSize: 30,
buttonRoundness: 5,
buttonGreyscale: false,
googleAPIKey: 'AIzaSyDqNnYEKDxzsuwsP56eMrndC0lN8k6k3Kw',
distanceFromTop: 20,
closeBtn: true,
socials: {
facebook: {
enabled: true,
url: 'https://caliberi.com',
name: 'Social Sharing Plugin Add-on',
caption: 'This is a caption text',
description: 'This is a description text'
},
twitter: {
enabled: true,
text: 'Social Sharing Plugin Add-on',
url: 'https://caliberi.com',
screenName: 'Caliberi',
hashtag: 'SocialShare'
},
pinterest: {
enabled: true,
url: 'https://caliberi.com'
},
googleplus: {
enabled: true,
url: 'https://caliberi.com'
},
linkedin: {
enabled: true,
url: 'https://caliberi.com'
}
}
};
SocialSharing.init(options);
</script>Or Using webpack
let SocialSharing = require('social-sharing');
SocialSharing.init();Table of options (High level)
List of social settings (part of socials object)
For example
var options = {
socials: {
facebook: {
enabled: true,
url: 'https://example.com'
}
twitter {
enabled: true
}
}
}Whole list of social networks
all social netowork have at least 2 params, its enabled: true or false and url: 'someurl.com'
Facebooks and twitter have more than two and below is example of both.
var options = {
socials: {
facebook: {
enabled: true,
url: 'https://caliberi.com',
name: 'Social Sharing Plugin Add-on',
caption: 'This is a caption text',
description: 'This is a description text'
},
twitter: {
enabled: true,
text: 'Social Sharing Plugin Add-on',
url: 'https://caliberi.com',
screenName: 'Caliberi',
hashtag: 'SocialShare'
}
}
}
Examples
In order to view how the output looks like, open examples/example-1.html in your browser.