{"id":16328526,"url":"https://github.com/globocom/share-bar","last_synced_at":"2025-07-01T16:09:24.967Z","repository":{"id":20835487,"uuid":"24121547","full_name":"globocom/share-bar","owner":"globocom","description":"A pure JS plugin to generate a share bar for social media, used by Globo.com.","archived":false,"fork":false,"pushed_at":"2020-01-15T02:08:33.000Z","size":604,"stargazers_count":158,"open_issues_count":2,"forks_count":32,"subscribers_count":90,"default_branch":"master","last_synced_at":"2025-05-21T11:08:34.617Z","etag":null,"topics":["javascript","share","social-media","social-network"],"latest_commit_sha":null,"homepage":"https://globocom.github.io/share-bar/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/globocom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-09-16T23:21:53.000Z","updated_at":"2025-05-01T16:51:49.000Z","dependencies_parsed_at":"2022-08-21T22:40:37.327Z","dependency_job_id":null,"html_url":"https://github.com/globocom/share-bar","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"purl":"pkg:github/globocom/share-bar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globocom%2Fshare-bar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globocom%2Fshare-bar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globocom%2Fshare-bar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globocom%2Fshare-bar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/globocom","download_url":"https://codeload.github.com/globocom/share-bar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/globocom%2Fshare-bar/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261119601,"owners_count":23112209,"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":["javascript","share","social-media","social-network"],"created_at":"2024-10-10T23:14:22.688Z","updated_at":"2025-07-01T16:09:24.942Z","avatar_url":"https://github.com/globocom.png","language":"JavaScript","readme":"[![Travis Build Status](https://travis-ci.org/globocom/share-bar.svg)](https://travis-ci.org/globocom/share-bar)\n[![Coverage Status](https://img.shields.io/coveralls/globocom/share-bar.svg)](https://coveralls.io/r/globocom/share-bar)\n\n# share-bar\n\n\u003e A pure JS plugin to generate a share bar for social media, used by Globo.com.\n\n## Table of Contents\n\n- [share-bar](#share-bar)\n  - [Table of Contents](#table-of-contents)\n  - [Browser Support](#browser-support)\n  - [How to Install](#how-to-install)\n  - [How to Use](#how-to-use)\n  - [Options](#options)\n    - [Selector](#selector)\n    - [Theme](#theme)\n    - [classPopup](#classpopup)\n    - [buttonWidth](#buttonwidth)\n    - [buttonFullWidth](#buttonfullwidth)\n    - [buttonPadding](#buttonpadding)\n    - [maxSocialButtons](#maxsocialbuttons)\n    - [networks](#networks)\n    - [context](#context)\n    - [campaign](#campaign)\n    - [onCreateBar](#oncreatebar)\n    - [onCreateButton](#oncreatebutton)\n    - [onShare](#onshare)\n    - [createBar](#createbar)\n  - [Contributing](#contributing)\n    - [Icons](#icons)\n  - [Version](#version)\n  - [License](#license)\n\n## Browser Support\n\n| ![](http://raphamorim.io/assets/images/browser-support/chrome.png) | ![](http://raphamorim.io/assets/images/browser-support/firefox.png) | ![](http://raphamorim.io/assets/images/browser-support/ie.png) | ![](http://raphamorim.io/assets/images/browser-support/opera.png) | ![](http://raphamorim.io/assets/images/browser-support/safari.png) |\n|:---:|:---:|:---:|:---:|:---:|\n| All ✔ | 3.6+ ✔ | 9+ ✔ | 29+ ✔ |  5+ ✔ |\n\n## How to Install\n\nInstall through NPM:\n\n```bash\nnpm install @globocom/share-bar\n```\n\n## How to Use\n\nOnce you added the CSS and JS from the plugin on the page, you can simply do:\n\n```javascript\nnew ShareBar({'facebookAppId': 'APP_ID'});\n```\n\n\u003e `APP_ID` can be automatically pulled from the page if you're using Facebook meta tags ([meta tag open graph](https://developers.facebook.com/docs/sharing/webmasters#basic)), but we strongly recommend you to pass it manually.\n\nAlso, place the following markup where you want the share-bar to be:\n\n```html\n\u003cdiv class=\"share-bar\"\n    data-title=\"Content Title\"\n    data-url=\"Content URL\"\n    data-image-url=\"http://lorempixel.com/1080/700/\"\n    data-hashtags=\"#example #sharebar\"\u003e\n\u003c/div\u003e\n```\n\nTake a look at our [demo](https://globocom.github.io/share-bar/).\n\n## Options\n\nThe plugin also offers a few options for customization.\n\n### Selector\n\nAllows to alter the default selector.\n\nDefault: `.share-bar`\n\n```javascript\nnew ShareBar({selector: '.meu-seletor'});\n```\n\n### Theme\n\nAllows to alter the default theme, using these options: `natural`, `dark`, `minimal` and `minimal light`.\n\nDefault: `'natural'`\n\n```javascript\nnew ShareBar({theme: 'dark'});\n```\n\n### classPopup\n\nAllows to alter the CSS class when opening the share popup windows. This is only necessary when the default class is already in use.\n\nDefault: `'share-popup'`\n\n```javascript\nnew ShareBar({classPopup: 'class-popup'});\n```\n\n### buttonWidth\n\nAllows 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.\n\nDefault: `34`\n\n```javascript\nnew ShareBar({buttonWidth: 50});\n```\n\n### buttonFullWidth\n\nAllows 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.\n\nDefault: `110`\n\n```javascript\nnew ShareBar({buttonFullWidth: 150});\n```\n\n### buttonPadding\n\nAllows 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.\n\nDefault: `4`\n\n```javascript\nnew ShareBar({buttonPadding: 4});\n```\n\n### maxSocialButtons\n\nAllows 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.\n\nDefault: `6`\n\n```javascript\nnew ShareBar({maxSocialButtons: 10});\n```\n\n### networks\n\nAllows 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.\n\nDefault:\n\n```javascript\n[\n  'facebook',\n  'twitter',\n  'whatsapp',\n  'google',\n  'linkedin',\n  'pinterest',\n  'email'\n]\n```\n\nCustomize it like this:\n\n```javascript\nnew ShareBar({\n  'networks': [\n    'facebook',\n    'twitter',\n    function createSampleButton(container, buttonClass) {\n      var data = this.getMetadataFromElement(container);\n      buttonClass = buttonClass || '';\n\n      this.createButton(\n        container, 'sample', buttonClass,\n        'http://www.sample.com/sample-sharer.php?u=' + data['url']\n      );\n    }\n  ]\n});\n```\n\n\u003e Note: The WhatsApp icon is only visible on screens with less than 768px of width and are touch capable.\n\n### context\n\nAllows 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.\n\nDefault: `'desktop'`\n\n```javascript\nnew ShareBar({context: 'mobile'});\n```\n\n### campaign\n\nAllows 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.\n\nDefault: `'share-bar'`\n\n```javascript\nnew ShareBar({campaign: 'custom-campaign'});\n```\n\n### onCreateBar\n\nA callback that fires when you create the bar. It receives the created bar as a parameter.\n\nDefault: `function (bar) { return false; }`\n\n```javascript\nnew ShareBar({\n  onCreateBar: function (bar) {\n    alert(bar.innerHTML);\n  }\n});\n```\n\n### onCreateButton\n\nA callback that fires after a share button is created. It receives the created button as a parameter.\n\nDefault: `function (button) { return false; }`\n\n```javascript\nnew ShareBar({\n  onCreateBar: function (button) {\n    alert(button.innerHTML);\n  }\n});\n```\n\n### onShare\n\nA callback that fires after a share button is clicked. It receives the clicked button as a parameter.\n\nDefault: `function (button) { return false; }`\n\n```javascript\nnew ShareBar({\n  onShare: function (button) {\n    alert(button.innerHTML);\n  }\n});\n```\n\n### createBar\n\nIt's possible to call `createBar` to create the bar manually anytime you want.\n\n```javascript\nconst sharebar = new ShareBar({maxSocialButtons: 10});\nsharebar.createBar(document.querySelector('.minha-barra'));\n```\n\n\u003e Note: For this to work, you need to have the HTML element shown above with the data-attributes already set.\n\n## Contributing\n\nThis project depends on NodeJS and NPM.\n\nTo install the project dependencies use:\n\n```bash\n$ make setup\n```\n\nTo run the tests:\n\n```bash\n$ make test\n```\n\nTo run a local server for local development use:\n\n```bash\n$ make run\n```\n\n### Icons\n\nThe icons used in this project are SVGs embedded in the JavaScript.\n\nAdding more icons to the project:\n\n1 - Add your SVG to the image path\n\n```bash\n$ mv ~/caminho/da/imagem.svg caminho/do/share/src/img/\n```\n\n2 - Generate the SVG icons again with Grunt\n\n```bash\n$ grunt icon\n```\n\n3 - Alter the CSS and Fonts to accomplish the desired look\n\n4 - If you want, add a callback function to the button\n\n\n## Version\n\nTo generate a new tag version, use this:\n\n```bash\n$ grunt bump\n```\n\n## License\n\nThe MIT License (MIT)\n\nCopyright (c) 2019 globo.com\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglobocom%2Fshare-bar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglobocom%2Fshare-bar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglobocom%2Fshare-bar/lists"}