{"id":25667102,"url":"https://github.com/terstudio/vsocial","last_synced_at":"2026-05-07T14:32:06.798Z","repository":{"id":57394180,"uuid":"117330562","full_name":"TerStudio/vsocial","owner":"TerStudio","description":"\"V Social\" social media panels (share panels) use only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks.","archived":false,"fork":false,"pushed_at":"2018-01-14T17:46:46.000Z","size":33,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-19T09:42:12.567Z","etag":null,"topics":["ecmascript6","facebook","javascript","media-buttons","media-panel","share","share-buttons","share-panel","share-panels","social-buttons","social-media-panels","social-network","webpack"],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TerStudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-13T09:20:06.000Z","updated_at":"2018-01-15T17:55:11.000Z","dependencies_parsed_at":"2022-09-19T10:30:33.332Z","dependency_job_id":null,"html_url":"https://github.com/TerStudio/vsocial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerStudio%2Fvsocial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerStudio%2Fvsocial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerStudio%2Fvsocial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TerStudio%2Fvsocial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TerStudio","download_url":"https://codeload.github.com/TerStudio/vsocial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240449908,"owners_count":19803128,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ecmascript6","facebook","javascript","media-buttons","media-panel","share","share-buttons","share-panel","share-panels","social-buttons","social-media-panels","social-network","webpack"],"created_at":"2025-02-24T09:21:34.529Z","updated_at":"2026-05-07T14:32:06.747Z","avatar_url":"https://github.com/TerStudio.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"vsocial\r\n-------\r\n\r\n_\"V Social\" social media panels (share panels) use only the links provided by the social networks, without other external scripts. It provides NO cached pages in Facebook and other social networks._\r\n\r\n#### Description\r\n\r\n* VSocial creates customizable Share panel. You can easily change form, size and color of buttons.\r\n* 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.\r\n\r\n* VSocial panels provide the buttons to share at:\r\n\r\n- Facebook\r\n- VKontakte\r\n- LinkedIn\r\n- Pinterest\r\n- Twitter\r\n- Google Plus\r\n\r\n* VSocial does not require jQuery. Easy to use with webpack.\r\n* Opens a popup share-window\r\n* Loads no external script\r\n\r\n### Package Managers\r\n\r\n##### NPM\r\n\r\n```sh\r\nnpm install vsocial\r\n```\r\n\r\n### Usage\r\n\r\nJust import Class (for example in the js code that you bundle later with webpack):\r\n\r\n```html\r\nimport SocialClass from '../node_modules/vsocial/SocialClass';\r\n```\r\n\r\nAdd a link to two css files in your `\u003chead\u003e` (one of them is the main css file, the second - is theme css file for your panel:\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"\u003cPATH TO FILE\u003e/vsocial/style.css\" media=\"all\"\u003e\r\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"\u003cPATH TO FILE\u003e/vsocial/simple_small_theme.css\" media=\"all\"\u003e\r\n```\r\n\r\nAdd empty div with custom class in any place of your html code, for example in footer of the page.\r\n\r\n```html\r\n\u003cdiv class=\"sharepanel\"\u003e\u003c/div\u003e\r\n```\r\n\r\nFinally \"tell\" VSocial in what element it should be used and add options if necessary\r\n```html\r\nimport SocialClass from '../node_modules/vsocial/SocialClass';\r\nlet panel = new SocialClass('v-social');\r\n```\r\n\r\nCustomize the panel if you want to:\r\n```html\r\nimport SocialClass from '../node_modules/vsocial/SocialClass';\r\nlet mediaPanel = new SocialClass('v-social', {\r\n    buttons: {\r\n         vkontakte: false\r\n    },\r\n    pinterestImageSelector: [\r\n        '.first__image-class',\r\n        '.second__image-class'\r\n    ],\r\n    twitterHash: 'web, develop',\r\n    title: 'Share this page',\r\n    titleFontSize: 20,\r\n    titleColor: '#777',\r\n    customStyle: {\r\n        background: '#204b72',\r\n        borderColor: '#831111'\r\n    }\r\n});\r\n```\r\n\r\n### Themes\r\n\r\n##### Simple small theme\r\n\r\n\u003cimg src=\"https://terina-studio.com/sites/default/files/images/vsocial/simple_small.png\" alt=\"VSocial media panel Simple Small Theme example\" /\u003e\r\n\r\n##### Simple large theme\r\n\r\n\u003cimg src=\"https://terina-studio.com/sites/default/files/images/vsocial/simple_large.png\" alt=\"VSocial media panel Simple Large Theme example\" /\u003e\r\n\r\n##### Square small theme\r\n\r\n\u003cimg src=\"https://terina-studio.com/sites/default/files/images/vsocial/square_small.png\" alt=\"VSocial media panel Square small Theme example\" /\u003e\r\n\r\n##### Square large theme\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/square_large.png\" alt=\"VSocial media panel Square Large Theme example\" /\u003e\r\n\r\n##### Sand large theme\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/sand_large.png\" alt=\"VSocial media panel sand Large Theme example\" /\u003e\r\n\r\n##### Sand small theme\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/sand_small.png\" alt=\"VSocial media panel sand small Theme example\" /\u003e\r\n\r\n##### Gray large theme\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/gray_large.png\" alt=\"VSocial media panel Gray Large Theme example\" /\u003e\r\n\r\n##### Gray small theme\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/gray_small.png\" alt=\"VSocial media panel Gray small Theme example\" /\u003e\r\n\r\n##### White custom theme (example): here you choose your own colors\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/white_custom.png\" alt=\"VSocial media panel White Custom Theme example\" /\u003e\r\n\r\n##### Dark custom theme (example): here you choose your own colors\r\n\r\n\u003cimg src=\"http://terina-studio.com/sites/default/files/images/vsocial/dark_custom.png\" alt=\"VSocial media panel Dark Custom Theme example\" /\u003e\r\n\r\n\r\n### Meta properties\r\n\r\nFor proper work of VSocial it is highly recommended to use proper og and twitter (including twitter:card) properties in head block of he website\r\n\r\n### Settings\r\n\r\nOption | Type | Default | Description\r\n------ | ---- | ------- | -----------\r\nbuttons | object | true | Enables and disables different social networks\r\npinterestImageSelector | array | [] | Defines the classes of images to be used for Pinterest (img src=\"\" class=\"first__image-class\"). You can specify several classes - in this case the system will choose the first image that matches the selector\r\ntwitterHash | string | '' | Hashtags to be added to twitter\r\ntitle | string | '' | Title of the share panel\r\ntitleFontSize | integer | 24 | Font-size of title of the panel\r\ncustomStyle | 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\r\n\r\n#### Icons credit\r\n\r\nIcons made by Freepik from www.flaticon.com\r\n\r\n#### Browser support\r\n\r\nVSocial works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.\r\n\r\n#### License\r\n\r\nCopyright (c) 2018 tstudio\r\n\r\nLicensed under the MIT license.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterstudio%2Fvsocial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fterstudio%2Fvsocial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fterstudio%2Fvsocial/lists"}