❤
npm
Sign UpSign In

social-sharing

0.2.2 • Public • Published

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.

Readme

Keywords

Package Sidebar

Install

npm i social-sharing

Repository

github.com/caliberi/social-sharing

Homepage

github.com/caliberi/social-sharing#readme

Weekly Downloads

1

Version

0.2.2

License

MIT

Last publish

Collaborators

  • caliberi
Try on RunKit
Report malware