README

Social Buttons

Installation

npm install --save-dev social-sharing

Usage

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

facebook
twitter
googleplus
pinterest
linkedin

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.

Usage no npm install needed!

README

Social Buttons