rawshare

A simple jQuery social sharing plugin, styled with sass for easy customization

Installation

NPM / Yarn

npm install rawshare --save
yarn add rawshare

Usage

HTML

rawshare makes use of the default OpenGraph meta tags to construct it's URLs:

<meta property="og:title" content="Title for your page" />
<meta property="og:description" content="Description for your page" />
<meta property="og:url" content="http://url/of/your/page" />
<meta property="og:image" content="https://path/to/the/main/image/for/your/page" />

You then just need a container somewhere in your body:

<div class="rawshare"></div>

You can overwrite the above options with custom data attributes on our rawshare container like so:

<div class="rawshare" data-url="http://customurl" data-title="Custom title" data-description="Custom Description"></div>

You can also define a completely custom tweet like so:

<div class="rawshare" data-tweet="Custom tweet text"></div>

Imports

@import '../../node_modules/rawshare/dist/rawshare.sass'
import rawshare from 'rawshare'

JS

$('.rawshare').rawshare();

Options

There are a few options you can pass when you initialize rawshare, these are:

| Option | Description | Default | |--------------------|-------------------------------------------------------------------------------------------|-------------------| | sprite | Path to sprite | "rawshare.svg" | | popup | Makes links open in a popup window | true | | services | Object of services, you can add custom ones or overwrite elements of the default services | |

Example

  {
    sprite: "rawshare.svg",
    popup: true,
    services: {
      facebook: {
        order: 0,
        name: 'Facebook',
        href: 'http://facebook.com',
        icon: {
          width: 10,
          height: 19,
          id: 'rawshare-facebook'
        }
      }
    }
  }

To disable a service, simply set it to false:

  {
    services: {
      facebook: false
    }
  }

Sharer links are auto generated for available services by default, however you can overwrite these if you wish to use rawshare simply for social links. Current available services are:

• Facebook
• Instagram (Disabled by default, Required Param: href. To be used as social link only.)
• Twitter
• Pinterest
• LinkedIn
• Google Plus
• Tumblr
• Flickr (Disabled by default, Required Param: href. To be used as social link only.)
• Email
• WhatsApp
• Print

rawshare, ajax's in the sprite and caches it in localStorage, if you make amends to the sprite during development, you'll have to clear your localStorage.

Themes

There are four themes for rawshare, default simple reversed and text. To use a theme other than the default one, simply add it's modifier class like so:

<div class="rawshare rawshare--simple"></div>

<div class="rawshare rawshare--reversed"></div>

<div class="rawshare rawshare--text"></div>

Or use a combination

<div class="rawshare rawshare--text rawshare--simple"></div>

Adding a label

If you wish to add a label to rawshare, simply place it inside your rawshare container like so, I suggest giving it a BEM class which follows the rawshare naming convention:

<div class="rawshare">
  <span class="rawshare__label">Share this:</span>
</div>

Customization

rawshare has been written to be easily customized using Sass variables. To overwrite the defaults simply define your variables before the inclusion of rawshare.sass.

Available variables

$rawshare-font-size: 13px !default
$rawshare-font-color: #ccc !default
$rawshare-font: sans-serif !default
$rawshare-text-transform: capitalize !default

$rawshare-alignment: center !default
$rawshare-gutter: 4px !default
$rawshare-size: 32px !default
$rawshare-padding: 5px 10px !default
$rawshare-icon-margin: 0px !default
$rawshare-border-radius: 50% !default
$rawshare-icon-fill: #fff !default

$rawshare-facebook: #3a5795 !default
$rawshare-facebook-hover: darken($rawshare-facebook, 10%) !default
$rawshare-instagram: #e1306c !default
$rawshare-instagram-hover: darken($rawshare-instagram, 10%) !default
$rawshare-twitter: #1da1f2 !default
$rawshare-twitter-hover: darken($rawshare-twitter, 10%) !default
$rawshare-pinterest: #bd081c !default
$rawshare-pinterest-hover: darken($rawshare-pinterest, 10%) !default
$rawshare-linkedin: #0077b5 !default
$rawshare-linkedin-hover: darken($rawshare-linkedin, 10%) !default
$rawshare-googleplus: #c53929 !default
$rawshare-googleplus-hover: darken($rawshare-googleplus, 10%) !default
$rawshare-tumblr: #35465c !default
$rawshare-tumblr-hover: darken($rawshare-tumblr, 10%) !default
$rawshare-flickr: #ff0084 !default
$rawshare-flickr-hover: darken($rawshare-flickr, 10%) !default
$rawshare-email: #b8213b !default
$rawshare-email-hover: darken($rawshare-email, 10%) !default
$rawshare-whatsapp: #25D366 !default
$rawshare-whatsapp-hover: darken($rawshare-whatsapp, 10%) !default
$rawshare-print: #0058a1 !default
$rawshare-print-hover: darken($rawshare-print, 10%) !default

License

Copyright (c) 2018 Rawnet

Licensed under the MIT license.