Pro This module comes in the Pro package only.
Webal Social links shows links to your social media pages. It can also show buttons that share the page the visitor is looking at. The links can be icons, words, or both.
Use it in a header, a footer or a contact band. Every link has a name that screen readers say, for example "Webal on Instagram". Every link is at least 44 pixels across, and the colours are checked so they are easy to read in light and dark mode.
Add it to a page
- Log in to the Joomla administrator, and in the menu on the left choose Content, then Site Modules.
- Press New, and a list of module types opens so that you can choose from it.
- Choose Webal Social links from the list of module types, which starts a new module of that kind.
- Type a Title for the module, using a name that tells you what the module is for.
- On the Module tab, press Add under Links to add a row for each link.
- In each row, choose the Platform and type the Address, which is the full address of your profile, for example
https://www.facebook.com/yourpage. For Email give the email address, and for Phone give the number. - If you want a heading above the links, type the Title text in the Title group.
- Open the Look tab and choose the Design, Style, Size and What is shown.
- Go back to the Module tab, then open the Position list in the right-hand column and choose a position. A position is a named place in your template where a module can go.
- Under Title in the same column, choose Hide if you typed a Title text above, because that heading is the title. Otherwise choose Show or Hide as you like.
- Press Save, and wait until the message "Module saved." appears.
- Open the Menu Assignment tab. In Module Assignment, choose Only on the pages selected, so that the module appears only on the pages that you pick.
- Beside Assign to Menu Items, press None, because every page stays ticked until you do this.
- Type the name of the page in the search box, then tick that page so that the module appears there.
- Press Save & Close, which saves the module once more and closes the editing screen.
- Open that page on your site and look for the module in the position that you chose.
Options
Module tab
| Option | What it does | Default |
|---|---|---|
| Title | An optional heading above the links. It has the usual Title options, explained in Options shared by many modules. If you leave the title text empty, no heading shows and screen readers call the block "Social links" (or "Share this page"). | No title |
| What the links do | Link to your profiles uses the addresses you type. Share this page shows buttons that share the page the visitor is on. | Link to your profiles |
| Links | One row for each link, up to 40. A row with no address is not shown. | No rows |
Options in each link row
| Option | What it does | Default |
|---|---|---|
| Platform | The site or kind of link. The icon, the brand colour and the spoken name come from this choice. There are 32 choices, including Email, Phone, RSS feed, Website and Other link. | |
| Address | The full address of your profile. For Email, the email address. For Phone, the number. Share buttons do not use it. An address that does not suit the platform is refused when you save. | Empty |
| Name | Optional. The words shown next to the icon, and spoken by screen readers, instead of the platform name. Give an Other link a name such as Yelp. | Empty |
| Open in a new tab | Yes opens the link in a new tab and tells screen reader users. Email and phone links ignore it. | Yes |
| Icon (Other link only) | Choose an icon for the Other link platform. Empty uses a link icon. | Empty |
| Own picture (Other link only) | Upload your own SVG icon, or choose a small picture. It is used instead of the icon. | Empty |
Tip. Share this page works only for X, Facebook, LinkedIn, Threads, Bluesky, WhatsApp, Telegram, Pinterest, Reddit and Email. Other platforms, such as Instagram, only have profile links, so in this mode a row for another platform is refused when you save. Use Link to your profiles for those.
Look tab
| Option | What it does | Default |
|---|---|---|
| Design | Separate buttons gives each link its own shape. Squared tiles joins the links into one bar of square tiles. Chevron tiles joins them into a bar of pointed tiles, like a process bar. | Separate buttons |
| Style | Brand colours fills a shape in each platform's colour. Outline draws a ring and icon. Monochrome shows plain icons in the text colour. Every choice is checked to be readable in light and dark mode. | Brand colours |
| Shape | Circle, Rounded square or Square. Shown for Brand colours and Outline with Separate buttons only. | Circle |
| Size | Standard (about 44 pixels), Large (about 52) or Extra large (about 60). Links are never smaller than 44 pixels. | Standard |
| What is shown | Icons only (the name is read out by screen readers), Icons and text, or Text only. | Icons only |
| Direction | In a row (it wraps onto more lines on a narrow screen) or One under another. | In a row |
| Space between links | From None (0) to Very large (5). Shown with Separate buttons only. The joined designs ignore it. | Small (2) |
Layout, Animation and Advanced tabs
The shared groups General, Spacing, Width, Colour scheme and Animation are explained once, in Options shared by many modules. Animation can move the whole block, or each link in turn. The Advanced tab holds Joomla's own settings. A new Social module is made with Caching set to No caching.
Result
Accessibility
- Every link has a name, and icons are hidden from screen readers so that they are not read twice.
- A link that opens a new tab says so to screen reader users.
- Every link is at least 44 pixels across, and the focus ring is thick and easy to see.
- Two links that would have the same name, such as two Facebook pages, are told apart in what screen readers say.
- In Windows high contrast, each link shows a ring in the system link colour.
Other languages
The names a screen reader says, for example "on Instagram", come from language files. Names and titles that you type stay as you typed them. For another language, make a copy of the module and set its Language on the Module tab. Share buttons use each platform's own share page.
Tips
- Share buttons are plain links to each platform, and nothing is sent anywhere until the visitor follows one.
- Social links are not kept in Joomla's module cache, because share buttons carry the address of the current page. They build quickly, so this costs nothing you would notice.
- Switching from Share this page back to Link to your profiles loses nothing, because the rows are kept.
- If an Webal Offcanvas module has Caching turned on, social links in its panel are left out. Choose No caching on that module to show them.