{"id":13568147,"url":"https://github.com/codesyntax/volto-social-sharing","last_synced_at":"2025-06-16T06:03:48.442Z","repository":{"id":43468995,"uuid":"334132243","full_name":"codesyntax/volto-social-sharing","owner":"codesyntax","description":"Volto social sharing integration addon.","archived":false,"fork":false,"pushed_at":"2024-10-30T11:57:56.000Z","size":1550,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-28T10:12:31.559Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/codesyntax.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-01-29T12:00:56.000Z","updated_at":"2024-10-30T11:58:00.000Z","dependencies_parsed_at":"2024-02-09T06:24:33.778Z","dependency_job_id":"f2db61df-d87d-4764-b45b-252ad74d451b","html_url":"https://github.com/codesyntax/volto-social-sharing","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/codesyntax/volto-social-sharing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-social-sharing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-social-sharing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-social-sharing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-social-sharing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codesyntax","download_url":"https://codeload.github.com/codesyntax/volto-social-sharing/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codesyntax%2Fvolto-social-sharing/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260109458,"owners_count":22960025,"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":[],"created_at":"2024-08-01T14:00:20.690Z","updated_at":"2025-06-16T06:03:48.416Z","avatar_url":"https://github.com/codesyntax.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003cimg alt=\"logo\" src=\"./examples/volto-social-sharing.png\" width=\"40\" /\u003e\u003c/div\u003e\n\n\u003ch1 align=\"center\"\u003eVolto Social Sharing\u003c/h1\u003e\n\nVolto social sharing integration addon.\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/@codesyntax/volto-social-sharing)](https://www.npmjs.com/package/@codesyntax/volto-social-sharing)\n\n[![GitHub contributors](https://img.shields.io/github/contributors/codesyntax/volto-social-sharing)](https://github.com/codesyntax/volto-social-sharing)\n[![GitHub Repo stars](https://img.shields.io/github/stars/codesyntax/volto-social-sharing?style=social)](https://github.com/codesyntax/volto-social-sharing)\n\n\u003c/div\u003e\n\nTo be used with mrs-developer, see [Volto docs](https://6.dev-docs.plone.org/volto/addons/index.html) for further usage informations.\n\n\n![Desktop](./examples/desktop.png)\n![Mobile](./examples/mobile.png)\n\n\u003cbr\u003e\n\n# Table of Contents\n\n1. [Usage](#usage)\n2. [Paths config](#paths)\n3. [Customization](#customization)\n4. [New social item](#new_social_item)\n5. [Edit social item](#edit_social_item)\n6. [Remove social item](#remove_social_item)\n\n\u003cbr\u003e\n\n## Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\nTo inject the component in the project add the appextras configuration in the config.js file.\n\nA suggested way is to use `appExtras` from settings object ([docs](https://docs.voltocms.com/recipes/appextras/)):\n\n```jsx\nimport '@plone/volto/config';\nimport SocialSharing from '@codesyntax/volto-social-sharing/SocialSharing';\n\nexport default function applyConfig(config) {\n  config.settings.appExtras = [\n      ...config.settings.appExtras,\n      {\n        match: '',\n        component: SocialSharing,\n      },\n  ];\n  return config;\n}\n\n```\n\n\n\n\n\u003cbr\u003e\n\n\n## To determine which paths will be displayed \u003ca name=\"paths\"\u003e\u003c/a\u003e\n\nYou can determine in which views the component will be displayed\n\n```js\nexport default function applyConfig(config) {\n  config.settings.appExtras = [\n    ...config.settings.appExtras,\n    {\n      match: {\n        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],\n        exact: true,\n      },\n      component: SocialSharing\n    },\n  ]\n\n  return config\n}\n\n```\n\n\u003cbr\u003e\n\n## Customization \u003ca name=\"customization\"\u003e\u003c/a\u003e\nThere are several parameters that can be customized\n\n* **socialElements**: List of social items.\n    * By default:\n        * Facebook\n        * Twitter\n        * Whatsapp (Only on mobile)\n        * Telegram (Only on mobile)\n    * Options:\n        * **name** (string): Social name\n        * **fa_name** (array): Font awesome icon name. (It is necessary to add it in array format to determine the type of icon. Example: [\"fab\", \"facebook-f\"])\n          * [Docs](https://fontawesome.com/how-to-use/on-the-web/using-with/react#features)\n          * [Icon Gallery](https://fontawesome.com/icons?d=gallery)\n        * **color** (string): CSS color value.\n        * **sharing_url** (string): Link of the social network to share. ([Examples](https://github.com/bradvin/social-share-urls/blob/0c6d81fc950144e18ada062e0aba90d738b70d90/code/javascript/javascript/social-share-media.js#L151))\n        * **only_mobile** (bool) *optional: Set to true if it will only be displayed in the mobile view.\n* **bannerPosition**: Position of social items banner.\n    * By default:\n        * In the **desktop** view centered on the right.\n        * In the **mobile** view centered on the bottom.\n    * Options:\n        * defaultPositions[\"desktop\"] = {[React DOM Style](https://reactjs.org/docs/dom-elements.html#style)}\n        * defaultPositions[\"mobile\"] = {[React DOM Style](https://reactjs.org/docs/dom-elements.html#style)}\n* **logoSize**: Font Awesome logo size. ([Doc](https://fontawesome.com/how-to-use/on-the-web/using-with/react#features))\n    * By default: \"lg\".\n    * [Options](https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons#scale): \"lg\" | \"xs\" | \"sm\" | \"2x\" | \"3x\" | \"4x\" | \"5x\" | \"6x\" | \"7x\" | \"8x\" | \"9x\" | \"10x\"\n* **buttonSize**: Button with and height.\n    * By default: \"30px\"\n\n\n\u003cbr\u003e\n\n## Add new social item \u003ca name=\"new_social_item\"\u003e\u003c/a\u003e\n\n```js\n// import default social list\nimport {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';\n\n// Push new item\nDEFAULT_SOCIAL.push({\n  name: \"Pinterest\",\n  fa_name: [\"fab\", \"pinterest-p\"],\n  color: \"#c8232c\",\n  sharing_url: \"http://pinterest.com/pin/create/link/?url=\",\n  id: \"pt\"\n});\n\n\nexport default function applyConfig(config) {\n  config.settings.appExtras = [\n    ...config.settings.appExtras,\n    {\n      match: {\n        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],\n        exact: true,\n      },\n      component: SocialSharing,\n      props:{\n           socialElements: DEFAULT_SOCIAL\n      }\n    },\n  ]\n  return config;\n}\n\n```\n\n#### Example\n\n![pinterest_desktop](./examples/pinterest_desktop.png)\n![pinterest_mobile](./examples/pinterest_mobile.png)\n\n\n\u003cbr\u003e\n\n## Change existing social item value \u003ca name=\"edit_social_item\"\u003e\u003c/a\u003e\n\n```js\n// import default social list\nimport {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';\n\n// Find social item by id\nlet facebook = DEFAULT_SOCIAL.find(social =\u003e social.id == \"fb\");\nif (facebook) {\n  facebook.color = \"red\";\n}\n\nexport default function applyConfig(config) {\n  config.settings.appExtras = [\n    ...config.settings.appExtras,\n    {\n      match: {\n        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],\n        exact: true,\n      },\n      component: SocialSharing,\n      props:{\n        socialElements: DEFAULT_SOCIAL\n      }\n    },\n  ]\n\n  return config;\n}\n\n```\n\n#### Example\n\n![change_value_desktop](./examples/change_value_desktop.png)\n![change_value_mobile](./examples/change_value_mobile.png)\n\n\n\n\u003cbr\u003e\n\n## Remove existing social item \u003ca name=\"remove_social_item\"\u003e\u003c/a\u003e\n\n```js\n// import default social list\nimport {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';\n\n// Remove social item by id\nconst index = DEFAULT_SOCIAL.findIndex(social =\u003e social.id === \"fb\");\nif (index !== undefined) DEFAULT_SOCIAL.splice(index, 1);\n\n\nexport default function applyConfig(config) {\n  config.settings.appExtras = [\n    ...config.settings.appExtras,\n  {\n    match: {\n      path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],\n      exact: true,\n    },\n    component: SocialSharing,\n    props:{\n      socialElements: DEFAULT_SOCIAL\n    }\n  },\n\n  ];\n\n  return config;\n\n}\n\n```\n\n\u003cbr\u003e\n\n---\n\n\u003cbr\u003e\n\n## Contributing\n\nFeel free to send PRs.\n\n## Icon Author\nBy Throwaway icons - https://thenounproject.com/search/?q=share\u0026amp;i=1343423, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=89416553\n\n## License\n\nMIT © [CodeSyntax](https://github.com/codesyntax)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fvolto-social-sharing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodesyntax%2Fvolto-social-sharing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodesyntax%2Fvolto-social-sharing/lists"}