Volto Social Sharing

Volto social sharing integration addon.

To be used with mrs-developer, see Volto docs for further usage information.

Table of Contents

1. Usage
2. Paths config
3. Customization
4. New social item
5. Edit social item
6. 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):

import SocialSharing from '@codesyntax/volto-social-sharing/SocialSharing';

export const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: '',
      component: SocialSharing,
    },
  ],
};

To determine which paths will be displayed

You can determine in which views the component will be displayed

export const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: {
        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
        exact: true,
      },
      component: SocialSharing
    },
  ],
};

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
      • Icon Gallery
    • color (string): CSS color value.
    • sharing_url (string): Link of the social network to share. (Examples)
    • 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}
    • defaultPositions["mobile"] = {React DOM Style}
• logoSize: Font Awesome logo size. (Doc)
  • By default: "lg".
  • Options: "lg" | "xs" | "sm" | "2x" | "3x" | "4x" | "5x" | "6x" | "7x" | "8x" | "9x" | "10x"
• buttonSize: Button with and height.
  • By default: "30px"

Add new social item

// 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 const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: {
        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
        exact: true,
      },
      component: SocialSharing,
      props:{
           socialElements: DEFAULT_SOCIAL
      }
    },
  ],
};

Example

Change existing social item value

// 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 const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: {
        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
        exact: true,
      },
      component: SocialSharing,
      props:{
        socialElements: DEFAULT_SOCIAL
      }
    },
  ],
};

Example

Remove existing social item

// 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 const settings = {
  ...defaultSettings,
  appExtras: [
    ...defaultSettings.appExtras,
    {
      match: {
        path: ['**/ekitaldiak/**', '**/eventos/**', '/eu/albisteak/**', '/es/noticias/**'],
        exact: true,
      },
      component: SocialSharing,
      props:{
        socialElements: DEFAULT_SOCIAL
      }
    },
  ],
};

---

Contributing

See DEVELOP.md.

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

See LICENSE.md for details.