vsocial
v1.0.21
Published
Plugin to easy create customizable media social panel with share buttons (share panel) that does not cache the pages of your site when you publish them for example on Facebook.
Downloads
15
Maintainers
tstudioReadme
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:
- VKontakte
- 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
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
Icons credit
Icons made by Freepik from www.flaticon.com
Browser support
VSocial works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
License
Copyright (c) 2018 tstudio
Licensed under the MIT license.