Social Media support for Plone

Social media links, sharing settings, and meta tags for Plone sites, edited on content and shown by Volto.

📖 Read the documentation

An editor keeps the site's social media profiles in an ordered list on the site root. Every page shows them as icons, and carries the head tags that tell social networks how to render it when shared.

• Settings on the site root — the site's links, whether to share social data, and the Facebook App ID are fields of the plonegovbr.socialmedia.settings behavior, which installing the add-on enables on the Plone Site. They are edited in the site root's own form, and served with every page through plone.restapi's inherit expansion.
• Sections with their own links — enable the behavior on a folderish content type, and the content inside an item of that type reads the item's settings instead of the site's.
• Links edited as a table — one row per link, by network and title, with a handle to drag it into place and a dialog to edit it.
• Networks described in the frontend — 25 networks, from BlueSky to YouTube, each a socialNetwork utility with a title and an icon. A project adds a network, or replaces an icon, in its own configuration, and no content is migrated.
• Icons wherever you need them — a Follow Us block that can show some of the networks in its own order, a footer slot that Volto Light Theme renders, a view widget, and components for anywhere else.
• Head tags from the same data — twitter:site and og:article:publisher follow the X and Facebook links, so no username is typed twice.
• Links on any content type — a second behavior, plonegovbr.socialmedia.links, gives items such as speakers a list of profiles of their own.

Full documentation lives in docs/ and is published at plonegovbr.github.io/social-media.

• Start here: Add social links to a site — run the development site, and change what every page shows.
• How-to guides: installing the backend and the frontend, setting the site's links, giving a section its own, adding a network.
• Concepts: settings that live on content, links and networks.
• Reference: behaviors, REST API, profiles, Volto add-on.

Both packages are installed separately, and a site needs both: the backend stores the settings, and the frontend edits and shows them.

Requires Plone 6.1 or 6.2, and Python 3.11 or later.

uv add plonegovbr.socialmedia

Then install Social Media support for Plone: Install from the add-ons control panel. It enables the settings behavior on the site root, and hides Plone's own Social Media control panel.

The add-on is developed against Volto 19.4.1.

Add @plonegovbr/volto-social-media to your package.json.

"addons": [
    "@plonegovbr/volto-social-media"
],
"dependencies": {
    "@plonegovbr/volto-social-media": "*"
}

• An operating system that runs all the requirements mentioned.
• uv
• nvm
• Node.js and pnpm 24
• Make
• Git
• Docker (optional)

1. Clone this repository, then change your working directory.

   git clone git@github.com:plonegovbr/social-media.git
   cd social-media

2. Install this code base. It also creates a Plone site with example content.

   make install

1. Start the backend at http://localhost:8080/.

   make backend-start

2. In a new shell session, start the frontend at http://localhost:3000/.

   make frontend-start

Voila! Your Plone site should be live and kicking! 🎉 Log in with the username admin and the password admin.

To create the site again from scratch, run the following command.

DELETE_EXISTING=1 make backend-create-site

Deploy a local Docker Compose environment that includes the following.

• Docker images for Backend and Frontend 🖼️
• A stack with a Traefik router and a PostgreSQL database 🗃️
• Accessible at http://social-media.localhost 🌐

Run the following commands in a shell session.

make stack-start
make stack-create-site

And... you're all set! Your Plone site is up and running locally! 🚀

This monorepo consists of the following distinct sections:

• backend: The Plone add-on plonegovbr.socialmedia, installed with uv, plus its test suite and example content.
• frontend: The Volto add-on @plonegovbr/volto-social-media, plus its tests and Storybook stories.
• docs: The Sphinx and MyST documentation published at plonegovbr.github.io/social-media.

• Both halves of the add-on live together, so a change to a field and the change to the widget that edits it are one commit.
• GitHub Workflows are triggered per section, so a documentation change does not rebuild the frontend (refer to .github/workflows).
• The documentation is built from the same checkout as the code it describes, so a reference page and the source it documents cannot drift between repositories.

To check your code against quality standards, run the following shell command.

make check

To format and rewrite the code base, ensuring it adheres to quality standards, run the following shell command.

make format

Formatters can also be run within the backend or frontend folders.

To check the code base without rewriting it, run the following shell command.

make lint

Linters can be run individually within the backend or frontend folders.

Generate translation files for Plone and Volto with ease:

make i18n

This repository holds two packages, released separately and each under its own license.

The frontend package requires the backend, because everything it renders comes from what the backend serves. The backend package stores the settings on its own, but ships no Classic UI integration, so nothing shows them without the frontend.

Generated using cookieplone-templates (a83957d) on 2025-04-16. Maintained by the PloneGov-Br Community 🇧🇷❤️.