Volto Network Block (@plonegovbr/volto-network-block)

About

The @plonegovbr/volto-network-block package provides components and blocks to connect your Volto site to existing social network profiles.

Blocks

• Follow Us: Block with links pointing to social network profiles.

Screenshots

Follow Us Block

Installation

New Volto Project

Create a Volto project, install the new add-on and restart Volto:

yarn install
yarn start

Existing Volto Project

If you already have a Volto project, just update package.json:

"addons": [
    "@plonegovbr/volto-network-block"
],

"dependencies": {
    "@plonegovbr/volto-network-block": "*"
}

Configuration

This addon is configured either via backend (the preferred way) or via the Volto registry in the frontend.

Frontend codebase

On your Volto project configuration, update config.settings with a socialNetworks array:

const applyConfig = (config) => {
  config.settings = {
    ...config.settings,
    socialNetworks: [
      {
        id: 'twitter',
        title: 'Twitter',
        icon: 'twitter',
        url: 'https://twitter.com/ploneorgbr/',
      },
      {
        id: 'instagram',
        title: 'Instagram',
        icon: 'instagram',
        url: 'https://www.instagram.com/plonebr/',
      },
    ],
  };
  return config;
};

Each entry in socialNetworks should have the following structure:

{
    id: 'twitter',
    title: 'Twitter',
    icon: 'twitter',
    url: 'https://twitter.com/ploneorgbr/',
},

Backend (via Generic Setup)

On your Python package, add (or edit) the actions.xml file on the default profile to add the networks:

<?xml version="1.0" encoding="utf-8"?>
<object xmlns:i18n="http://xml.zope.org/namespaces/i18n"
        meta_type="Plone Actions Tool"
        name="portal_actions"
>
  <object meta_type="CMF Action Category"
          name="social_actions"
  >
    <property name="title">Social actions</property>
    <object meta_type="CMF Action"
            name="facebook"
    >
      <property name="title"
      >Facebook</property>
      <property name="description"
      />
      <property name="url_expr">string:https://www.facebook.com/Plone-Brasil-101606785972720</property>
      <property name="link_target" />
      <property name="icon_expr">string:facebook</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>
    <object meta_type="CMF Action"
            name="github"
    >
      <property name="title"
      >GitHub</property>
      <property name="description"
      />
      <property name="url_expr">string:https://github.com/plonegovbr</property>
      <property name="link_target" />
      <property name="icon_expr">string:github</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>
    <object meta_type="CMF Action"
            name="instagram"
    >
      <property name="title"
      >Instagram</property>
      <property name="description"
      />
      <property name="url_expr">string:https://www.instagram.com/plonebr/</property>
      <property name="link_target" />
      <property name="icon_expr">string:instagram</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>
    <object meta_type="CMF Action"
            name="twitter"
    >
      <property name="title"
      >Twitter</property>
      <property name="description"
      />
      <property name="url_expr">string:https://twitter.com/ploneorgbr/</property>
      <property name="link_target" />
      <property name="icon_expr">string:twitter</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>
    <object meta_type="CMF Action"
            name="youtube"
    >
      <property name="title"
      >Youtube</property>
      <property name="description"
      />
      <property name="url_expr">string:https://www.youtube.com/playlist?list=PLGN9BI-OAQkTbVIJRPYpAs1K4hBdkLl10</property>
      <property name="link_target" />
      <property name="icon_expr">string:youtube</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>

  </object>

</object>

In the code above, a new category is created in portal_actions

An entry for a Facebook social network configuration looks like the code below:

    <object meta_type="CMF Action" name="facebook">
      <property name="title">Facebook</property>
      <property name="description" />
      <property name="url_expr">string:https://www.facebook.com/Plone-Brasil-101606785972720</property>
      <property name="link_target" />
      <property name="icon_expr">string:facebook</property>
      <property name="available_expr" />
      <property name="permissions">
        <element value="View" />
      </property>
      <property name="visible">True</property>
    </object>

The name attribute should be unique. This is important if you have more than one profile in a social network.

Also, the important properties are:

• title: Friendly name to be used for the social network
• url_expr: URL to the social network profile. Always prefix it with string:
• icon_expr: Icon to be used for this social network. Always prefix it with string:
• visible: Should this network be visible on the frontend?

Credits

• PloneGov-BR: Initial development.
• Font Awesome: Icons for social networks.

License

The project is licensed under the MIT license.