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)
| Option | Default value | Comments |
|---|---|---|
| orientation | right (String) | 2 values currently possible, left or right |
| googleAPIKey | none (String) | Get you own google api shortner. https://developers.google.com/url-shortener/v1/getting_started you can get your own key here (scroll down and find a button (GET A KEY)). This will be used to shorten your url for twitter |
| distanceFromTop | 30 (String) | this would be 30vh from the top |
| buttonMobileSize | 20 (Integer) | size of the button for Mobiles in pixels ( height: 20px, width: 20px) |
| buttonDesktopSize | 25 (Integer) | size of the button for Desktop in pixels ( height: 20px, width: 20px) |
| buttonRoundness | 0 (Integer) | border radius on top and bottom |
| buttonGreyscale | false (Boolean) | Grayscale buttons? |
| closeBtn | false (Boolean) | Add a button that has an ability to hide social buttons (animate them away from the view) |
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
- googleplus
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent