Social Buttons
Installation
npm install --save-dev social-sharing
Usage
1. Add .css and .js files of socialSharing.
... ...
2. Initialise app and pass a configuration object to it:
Or Using webpack
let SocialSharing = ;SocialSharing;
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.