Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codesyntax/volto-social-sharing
Volto social sharing integration addon.
https://github.com/codesyntax/volto-social-sharing
Last synced: about 2 months ago
JSON representation
Volto social sharing integration addon.
- Host: GitHub
- URL: https://github.com/codesyntax/volto-social-sharing
- Owner: codesyntax
- License: mit
- Created: 2021-01-29T12:00:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T11:57:56.000Z (2 months ago)
- Last Synced: 2024-10-30T12:28:13.553Z (2 months ago)
- Language: JavaScript
- Size: 1.47 MB
- Stars: 2
- Watchers: 9
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-volto - volto-social-sharing - Show "share in social networks" links in pages. (Addons)
README
Volto Social Sharing
Volto social sharing integration addon.
[](https://www.npmjs.com/package/@codesyntax/volto-social-sharing)
[](https://github.com/codesyntax/volto-social-sharing)
[](https://github.com/codesyntax/volto-social-sharing)
To be used with mrs-developer, see [Volto docs](https://6.dev-docs.plone.org/volto/addons/index.html) for further usage informations.
# Table of Contents
1. [Usage](#usage)
2. [Paths config](#paths)
3. [Customization](#customization)
4. [New social item](#new_social_item)
5. [Edit social item](#edit_social_item)
6. [Remove social item](#remove_social_item)
## Usage
To inject the component in the project add the appextras configuration in the config.js file.
A suggested way is to use `appExtras` from settings object ([docs](https://docs.voltocms.com/recipes/appextras/)):
```jsx
import '@plone/volto/config';
import SocialSharing from '@codesyntax/volto-social-sharing/SocialSharing';
export default function applyConfig(config) {
config.settings.appExtras = [
...config.settings.appExtras,
{
match: '',
component: SocialSharing,
},
];
return config;
}
```
## To determine which paths will be displayed
You can determine in which views the component will be displayed
```js
export default function applyConfig(config) {
config.settings.appExtras = [
...config.settings.appExtras,
{
match: {
path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
exact: true,
},
component: SocialSharing
},
]
return config
}
```
## Customization
There are several parameters that can be customized
* **socialElements**: List of social items.
* By default:
* Facebook
* Twitter
* Whatsapp (Only on mobile)
* Telegram (Only on mobile)
* Options:
* **name** (string): Social name
* **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"])
* [Docs](https://fontawesome.com/how-to-use/on-the-web/using-with/react#features)
* [Icon Gallery](https://fontawesome.com/icons?d=gallery)
* **color** (string): CSS color value.
* **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))
* **only_mobile** (bool) *optional: Set to true if it will only be displayed in the mobile view.
* **bannerPosition**: Position of social items banner.
* By default:
* In the **desktop** view centered on the right.
* In the **mobile** view centered on the bottom.
* Options:
* defaultPositions["desktop"] = {[React DOM Style](https://reactjs.org/docs/dom-elements.html#style)}
* defaultPositions["mobile"] = {[React DOM Style](https://reactjs.org/docs/dom-elements.html#style)}
* **logoSize**: Font Awesome logo size. ([Doc](https://fontawesome.com/how-to-use/on-the-web/using-with/react#features))
* By default: "lg".
* [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"
* **buttonSize**: Button with and height.
* By default: "30px"
```js
// import default social list
import {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';
// Push new item
DEFAULT_SOCIAL.push({
name: "Pinterest",
fa_name: ["fab", "pinterest-p"],
color: "#c8232c",
sharing_url: "http://pinterest.com/pin/create/link/?url=",
id: "pt"
});
export default function applyConfig(config) {
config.settings.appExtras = [
...config.settings.appExtras,
{
match: {
path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
exact: true,
},
component: SocialSharing,
props:{
socialElements: DEFAULT_SOCIAL
}
},
]
return config;
}
```
#### Example
## Change existing social item value
```js
// import default social list
import {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';
// Find social item by id
let facebook = DEFAULT_SOCIAL.find(social => social.id == "fb");
if (facebook) {
facebook.color = "red";
}
export default function applyConfig(config) {
config.settings.appExtras = [
...config.settings.appExtras,
{
match: {
path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
exact: true,
},
component: SocialSharing,
props:{
socialElements: DEFAULT_SOCIAL
}
},
]
return config;
}
```
#### Example
## Remove existing social item
```js
// import default social list
import {DEFAULT_SOCIAL} from '@codesyntax/volto-social-sharing/defaultSettings';
// Remove social item by id
const index = DEFAULT_SOCIAL.findIndex(social => social.id === "fb");
if (index !== undefined) DEFAULT_SOCIAL.splice(index, 1);
export default function applyConfig(config) {
config.settings.appExtras = [
...config.settings.appExtras,
{
match: {
path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
exact: true,
},
component: SocialSharing,
props:{
socialElements: DEFAULT_SOCIAL
}
},
];
return config;
}
```
---
## Contributing
Feel free to send PRs.
## Icon Author
By Throwaway icons - https://thenounproject.com/search/?q=share&i=1343423, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=89416553
## License
MIT © [CodeSyntax](https://github.com/codesyntax)