Vsocial NPM | npm.io

vsocial

"V Social" creates social media panels (share panels) using only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks.

Description

VSocial creates customizable Share panel. You can easily change form, size and color of buttons.
The tool adds an argument with date and time to the url each time you post it to Facebook, Twitter etc. So you will never have a problem when you occasionally post a page to FB with "not correct" image, than change the image on your website, than post again - and every time - the same old pic. With this solution it will be fresh every time you post it.
VSocial panels provide the buttons to share at:

Facebook
VKontakte
LinkedIn
Pinterest
Twitter
Google Plus.

VSocial does not require jQuery. Easy to use with webpack.
Opens a popup share-window
Loads no external script

Package Managers

NPM

npm install vsocial

#####Usage

Just import Class (for example in the js code that you bundle later with webpack):

import SocialClass from '../node_modules/vsocial/SocialClass';

Add a link to two css files in your <head> (one of them is the main css file, the second - is theme css (or SCSS!!!) file for your panel:

<link rel="stylesheet" type="text/css" href="<PATH TO FILE>/vsocial/style.css" media="all">
<link rel="stylesheet" type="text/css" href="<PATH TO FILE>/vsocial/simple_small_theme.css" media="all">

Add empty div with custom class in any place of your html code, for example in footer of the page.

<div class="sharepanel"></div>

Finally "tell" VSocial in what element it should be used and add options if necessary

import SocialClass from '../node_modules/vsocial/SocialClass';
let panel = new SocialClass('v-social');

Customize the panel if you want to:

import SocialClass from '../node_modules/vsocial/SocialClass';
let mediaPanel = new SocialClass('v-social', {
    buttons: {
         vkontakte: false
    },
    pinterestImageSelector: [
        '.first__image-class',
        '.second__image-class'
    ],
    twitterHash: 'web, develop',
    title: 'Share this page',
    titleFontSize: 20,
    titleColor: '#777',
    customStyle: {
        background: '#204b72',
        borderColor: '#831111'
    }
});

Themes

Here you`ll see the examples

Meta properties

For proper work of VSocial it is highly recommended to use proper og and twitter (including twitter:card) properties in head block of he website

Settings

Option	Type	Default	Description
buttons	object	true	Enables and disables different social networks
pinterestImageSelector	array	[]	Defines the classes of images to be used for Pinterest (). You can specify several classes - in this case the system will choose the first image that matches the selector
twitterHash	string	''	Hashtags to be added to twitter
title	string	''	Title of the share panel
titleFontSize	integer	24	Font-size of title of the panel
customStyle	Object with 2 possible items: background (value is string), borderColor (value is String)	-	css parameters of the buttons to be used with white_custom_theme.css and dark_custom_theme.css