{"id":13568148,"url":"https://github.com/plonegovbr/volto-network-block","last_synced_at":"2025-04-04T04:30:44.972Z","repository":{"id":185121638,"uuid":"672951854","full_name":"plonegovbr/volto-network-block","owner":"plonegovbr","description":"Volto Social Networks blocks and components","archived":false,"fork":false,"pushed_at":"2024-09-03T19:18:23.000Z","size":1027,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-03-22T02:34:59.176Z","etag":null,"topics":["plone","plone6","volto","volto-addon"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/plonegovbr.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-31T14:30:32.000Z","updated_at":"2024-09-03T19:18:26.000Z","dependencies_parsed_at":"2024-01-14T03:47:42.258Z","dependency_job_id":"dbc9ef1c-6d2b-4b90-85f9-5148f215035e","html_url":"https://github.com/plonegovbr/volto-network-block","commit_stats":null,"previous_names":["plonegovbr/volto-network-block"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-network-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-network-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-network-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/plonegovbr%2Fvolto-network-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/plonegovbr","download_url":"https://codeload.github.com/plonegovbr/volto-network-block/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246709871,"owners_count":20821298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plone","plone6","volto","volto-addon"],"created_at":"2024-08-01T14:00:20.728Z","updated_at":"2025-04-04T04:30:43.597Z","avatar_url":"https://github.com/plonegovbr.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVolto Network Block (@plonegovbr/volto-network-block) \u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![NPM](https://img.shields.io/npm/v/@plonegovbr/volto-network-block.svg)](https://www.npmjs.com/package/@plonegovbr/volto-network-block)\n[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/code.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)\n[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/unit.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)\n[![Build Status](https://github.com/plonegovbr/volto-network-block/actions/workflows/acceptance.yml/badge.svg)](https://github.com/plonegovbr/volto-network-block/actions)\n\n\u003c/div\u003e\n\n## About\nThe @plonegovbr/volto-network-block package provides components and blocks to connect your Volto site to existing social network profiles.\n\n### Blocks\n\n* **Follow Us**: Block with links pointing to social network profiles.\n\n## Screenshots\n\n### Follow Us Block\n\n\u003cimg alt=\"Screenshot\" src=\"./docs/block-follow_us.png\" width=\"500\" /\u003e\n\n## Installation\n\n### New Volto Project\n\nCreate a Volto project, install the new add-on and restart Volto:\n\n```shell\nyarn install\nyarn start\n```\n\n### Existing Volto Project\n\nIf you already have a Volto project, just update `package.json`:\n\n```JSON\n\"addons\": [\n    \"@plonegovbr/volto-network-block\"\n],\n\n\"dependencies\": {\n    \"@plonegovbr/volto-network-block\": \"*\"\n}\n```\n\n\n## Configuration\n\nThis addon is configured either via backend (the preferred way) or via the Volto registry in the frontend.\n\n### Frontend codebase\n\nOn your Volto project configuration, update `config.settings` with a `socialNetworks` array:\n\n```javascript\nconst applyConfig = (config) =\u003e {\n  config.settings = {\n    ...config.settings,\n    socialNetworks: [\n      {\n        id: 'twitter',\n        title: 'Twitter',\n        icon: 'twitter',\n        url: 'https://twitter.com/ploneorgbr/',\n      },\n      {\n        id: 'instagram',\n        title: 'Instagram',\n        icon: 'instagram',\n        url: 'https://www.instagram.com/plonebr/',\n      },\n    ],\n  };\n  return config;\n};\n```\n\nEach entry in `socialNetworks` should have the following structure:\n\n```javascript\n{\n    id: 'twitter',\n    title: 'Twitter',\n    icon: 'twitter',\n    url: 'https://twitter.com/ploneorgbr/',\n},\n```\n\n### Backend (via Generic Setup)\n\nOn your Python package, add (or edit) the `actions.xml` file on the default profile to add the networks:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cobject xmlns:i18n=\"http://xml.zope.org/namespaces/i18n\"\n        meta_type=\"Plone Actions Tool\"\n        name=\"portal_actions\"\n\u003e\n  \u003cobject meta_type=\"CMF Action Category\"\n          name=\"social_actions\"\n  \u003e\n    \u003cproperty name=\"title\"\u003eSocial actions\u003c/property\u003e\n    \u003cobject meta_type=\"CMF Action\"\n            name=\"facebook\"\n    \u003e\n      \u003cproperty name=\"title\"\n      \u003eFacebook\u003c/property\u003e\n      \u003cproperty name=\"description\"\n      /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://www.facebook.com/Plone-Brasil-101606785972720\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:facebook\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n    \u003cobject meta_type=\"CMF Action\"\n            name=\"github\"\n    \u003e\n      \u003cproperty name=\"title\"\n      \u003eGitHub\u003c/property\u003e\n      \u003cproperty name=\"description\"\n      /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://github.com/plonegovbr\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:github\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n    \u003cobject meta_type=\"CMF Action\"\n            name=\"instagram\"\n    \u003e\n      \u003cproperty name=\"title\"\n      \u003eInstagram\u003c/property\u003e\n      \u003cproperty name=\"description\"\n      /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://www.instagram.com/plonebr/\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:instagram\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n    \u003cobject meta_type=\"CMF Action\"\n            name=\"twitter\"\n    \u003e\n      \u003cproperty name=\"title\"\n      \u003eTwitter\u003c/property\u003e\n      \u003cproperty name=\"description\"\n      /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://twitter.com/ploneorgbr/\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:twitter\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n    \u003cobject meta_type=\"CMF Action\"\n            name=\"youtube\"\n    \u003e\n      \u003cproperty name=\"title\"\n      \u003eYoutube\u003c/property\u003e\n      \u003cproperty name=\"description\"\n      /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://www.youtube.com/playlist?list=PLGN9BI-OAQkTbVIJRPYpAs1K4hBdkLl10\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:youtube\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n\n  \u003c/object\u003e\n\n\u003c/object\u003e\n\n```\n\nIn the code above, a new category is created in `portal_actions`\n\nAn entry for a Facebook social network configuration looks like the code below:\n\n```xml\n    \u003cobject meta_type=\"CMF Action\" name=\"facebook\"\u003e\n      \u003cproperty name=\"title\"\u003eFacebook\u003c/property\u003e\n      \u003cproperty name=\"description\" /\u003e\n      \u003cproperty name=\"url_expr\"\u003estring:https://www.facebook.com/Plone-Brasil-101606785972720\u003c/property\u003e\n      \u003cproperty name=\"link_target\" /\u003e\n      \u003cproperty name=\"icon_expr\"\u003estring:facebook\u003c/property\u003e\n      \u003cproperty name=\"available_expr\" /\u003e\n      \u003cproperty name=\"permissions\"\u003e\n        \u003celement value=\"View\" /\u003e\n      \u003c/property\u003e\n      \u003cproperty name=\"visible\"\u003eTrue\u003c/property\u003e\n    \u003c/object\u003e\n```\n\nThe **name** attribute should be unique. This is important if you have more than one profile in a social network.\n\nAlso, the important properties are:\n\n* **title**: Friendly name to be used for the social network\n* **url_expr**: URL to the social network profile. **Always prefix it with string:**\n* **icon_expr**: Icon to be used for this social network. **Always prefix it with string:**\n* **visible**: Should this network be visible on the frontend?\n\n\n# Credits\n\n* [PloneGov-BR](https://plone.org.br/gov): Initial development.\n* [Font Awesome](https://fontawesome.com/): Icons for social networks.\n\n# License\n\nThe project is licensed under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplonegovbr%2Fvolto-network-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplonegovbr%2Fvolto-network-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplonegovbr%2Fvolto-network-block/lists"}