Awesome

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 <a name="usage"></a>

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 <a name="paths"></a>

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 <a name="customization"></a>

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 <a name="new_social_item"></a>

// 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 <a name="edit_social_item"></a>

// 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 <a name="remove_social_item"></a>

// 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&amp;i=1343423, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=89416553

License

MIT © CodeSyntax