Nutella Peanut-Butter Marshmallow

    @globocom/share-bar

    3.1.5 • Public • Published

    Travis Build Status Dependencies Status Dev Dependencies Status Coverage Status

    share-bar

    A pure JS plugin to generate a share bar for social media, used by Globo.com.

    Table of Contents

    Browser Support

    All 3.6+ 9+ 29+ 5+

    How to Install

    Install through NPM:

    npm install @globocom/share-bar
    

    How to Use

    Once you added the CSS and JS from the plugin on the page, you can simply do:

    new ShareBar({'facebookAppId': 'APP_ID'});

    APP_ID can be automatically pulled from the page if you're using Facebook meta tags (meta tag open graph), but we strongly recommend you to pass it manually.

    Also, place the following markup where you want the share-bar to be:

    <div class="share-bar" 
        data-title="Content Title" 
        data-url="Content URL" 
        data-image-url="http://lorempixel.com/1080/700/" 
        data-hashtags="#example #sharebar">
    </div>

    Take a look at our demo.

    Options

    The plugin also offer a few options for customization.

    Selector

    Allows to alter the default selector.

    Default: .share-bar

    new ShareBar({selector: '.meu-seletor'});

    Theme

    Allows to alter the default theme, using these options: natural, dark, minimal and minimal light.

    Default: 'natural'

    new ShareBar({theme: 'dark'});

    classPopup

    Allows to alter the CSS class when opening the share popup windows. This is only necessary when the default class is already in use.

    Default: 'share-popup'

    new ShareBar({classPopup: 'class-popup'});

    buttonWidth

    Allows to alter the reserved width for small buttons. This property does not change the actual button width, it only uses it to calculate how many buttons can fit in the share bar.

    Default: 34

    new ShareBar({buttonWidth: 50});

    buttonFullWidth

    Allows to alter the reserved width for expanded buttons. This property does not change the actual button width, it only uses it to calculate how many buttons can fit in the share bar.

    Default: 110

    new ShareBar({buttonFullWidth: 150});

    buttonPadding

    Allows to alter the reserved left padding for buttons. This property does not change the actual button width, it only uses it to calculate how many buttons can fit in the share bar.

    Default: 4

    new ShareBar({buttonPadding: 4});

    maxSocialButtons

    Allows to alter the maximum quantity of social networks visible in the share bar. This is only necessary if you want to show more than 6 social networks in the bar.

    Default: 6

    new ShareBar({maxSocialButtons: 10});

    networks

    Allows to alter the visible social networks in the share bar. This is the property you use to show or hide social network buttons in the share bar.

    Default:

    [
      'facebook',
      'twitter',
      'whatsapp',
      'google',
      'pinterest',
      'email'
    ]

    Customize it like this:

    new ShareBar({
      'networks': [
        'facebook',
        'twitter',
        function createSampleButton(container, buttonClass) {
          var data = this.getMetadataFromElement(container);
          buttonClass = buttonClass || '';
    
          this.createButton(
            container, 'sample', buttonClass,
            'http://www.sample.com/sample-sharer.php?u=' + data['url']
          );
        }
      ]
    });

    Note: The WhatsApp icon is only visible on screens with less than 768px of width and are touch capable.

    context

    Allows to alter the render context of the bar. This information is sent via utm_medium in the URL. This is useful when you have more than one sharebar on the page and you want to filter the actions on Google Analytics.

    Default: 'desktop'

    new ShareBar({context: 'mobile'});

    campaign

    Allows to alter the campaign metadata of the bar. This information is sent via utm_campaign in the URL. This is useful when you have more than one sharebar on the page and you want to filter the actions on Google Analytics.

    Default: 'share-bar'

    new ShareBar({campaign: 'custom-campaign'});

    onCreateBar

    A callback that fires when you create the bar. It receives the created bar as a parameter.

    Default: function (bar) { return false; }

    new ShareBar({
      onCreateBar: function (bar) { 
        alert(bar.innerHTML); 
      }
    });

    onCreateButton

    A callback that fires after a share button is created. It receives the created button as a parameter.

    Default: function (button) { return false; }

    new ShareBar({
      onCreateBar: function (button) { 
        alert(button.innerHTML); 
      }
    });

    onShare

    A callback that fires after a share button is clicked. It receives the clicked button as a parameter.

    Default: function (button) { return false; }

    new ShareBar({
      onShare: function (button) { 
        alert(button.innerHTML); 
      }
    });

    createBar

    It's possible to call createBar to create the bar manually anytime you want.

    const sharebar = new ShareBar({maxSocialButtons: 10});
    sharebar.createBar(document.querySelector('.minha-barra'));

    Note: For this to work, you need to have the HTML element shown above with the data-attributes already set.

    Contributing

    This project depends on NodeJS and NPM.

    To install the project dependencies use:

    $ make setup
    

    To run the tests:

    $ make test
    

    To run a local server for local development use:

    $ make run
    

    Icons

    The icones used in this project are SVGs embbededs in the JavaScript.

    Adding more icons to the project:

    1 - Add your SVG to the image path

    $ mv ~/caminho/da/imagem.svg caminho/do/share/src/img/
    

    2 - Generate the SVG icons again with Grunt

    $ grunt icon
    

    3 - Alter the CSS and Fonts to accomplish the desired look

    4 - If you want, add a callback function to the button

    Version

    To generate a new tag version, use this:

    $ grunt bump
    

    License

    The MIT License (MIT)

    Copyright (c) 2016 globo.com

    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    Install

    npm i @globocom/share-bar

    DownloadsWeekly Downloads

    0

    Version

    3.1.5

    License

    none

    Last publish

    Collaborators

    • markiing
    • igorgiusti
    • metal
    • vierno
    • wpjunior
    • mdionisio
    • sergiojorge
    • allanassis
    • jeanpinzon
    • chavao
    • lousander
    • andre.gavino