https://github.com/plonegovbr/volto-network-block

Volto Social Networks blocks and components
https://github.com/plonegovbr/volto-network-block

plone plone6 volto volto-addon

Last synced: 3 months ago
JSON representation

Volto Social Networks blocks and components

• Host: GitHub
• URL: https://github.com/plonegovbr/volto-network-block
• Owner: plonegovbr
• Created: 2023-07-31T14:30:32.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-03T19:18:23.000Z (5 months ago)
• Last Synced: 2024-11-02T08:06:34.273Z (4 months ago)
• Topics: plone, plone6, volto, volto-addon
• Language: JavaScript
• Homepage:
• Size: 1000 KB
• Stars: 2
• Watchers: 7
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

• awesome-volto - volto-network-block - Volto Social Networks blocks and components. (Addons)

README

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




[![NPM](https://img.shields.io/npm/v/@plonegovbr/volto-network-block.svg)](https://www.npmjs.com/package/@plonegovbr/volto-network-block)

[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/code.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)

[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/unit.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)

[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/acceptance.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)



## 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:

```shell

yarn install

yarn start

```

### Existing Volto Project

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

```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:

```javascript

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:

```javascript

{

    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

  

    Social actions

    

      Facebook

      

      string:https://www.facebook.com/Plone-Brasil-101606785972720

      

      string:facebook

      

      

        

      

      True

    

    

      GitHub

      

      string:https://github.com/plonegovbr

      

      string:github

      

      

        

      

      True

    

    

      Instagram

      

      string:https://www.instagram.com/plonebr/

      

      string:instagram

      

      

        

      

      True

    

    

      Twitter

      

      string:https://twitter.com/ploneorgbr/

      

      string:twitter

      

      

        

      

      True

    

    

      Youtube

      

      string:https://www.youtube.com/playlist?list=PLGN9BI-OAQkTbVIJRPYpAs1K4hBdkLl10

      

      string:youtube

      

      

        

      

      True

    

  

```

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:

```xml

    

      Facebook

      

      string:https://www.facebook.com/Plone-Brasil-101606785972720

      

      string:facebook

      

      

        

      

      True

    

```

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](https://plone.org.br/gov): Initial development.

* [Font Awesome](https://fontawesome.com/): Icons for social networks.

# License

The project is licensed under the MIT license.