Volto social sharing integration addon.

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

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 '@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

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
      • 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 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

// 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

// 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