Joomla Social Connect Link

Social Connect Link — Documentation

Social Connect Link is a lightweight Joomla 6 module by
LogicHunt
that displays your social media profile icons with hover effects and tooltips.
Version 5 adds a Custom Links system so you can add any social
network beyond the built-in list — with your own icons and URLs — without touching code.

Module name mod_social_connect_link
Version 5.0.0
Joomla compatibility Joomla 6.x
PHP compatibility PHP 8.2+
License GNU/GPL v3
Author LogicHunt
Support logichunt.com/support

Requirements

  • Joomla 6.0 or later
  • PHP 8.2 or later
  • A Joomla administrator account with Extension Manager access

Installation

Fresh Installation

  1. Download the module ZIP file from the
    product page.
  2. Log in to your Joomla Administrator panel
    (e.g. https://yoursite.com/administrator).
  3. Go to System → Install → Extensions.
  4. Click the Upload Package File tab, then drag and drop
    the ZIP file or click Browse for file and select it.
  5. Click Upload & Install. You should see a green
    success message: “Installation of the module was successful.”

Upgrading from a Previous Version

⚠ Important — Upgrading to version 5: If you are upgrading
from version 2.x or earlier, we strongly recommend a clean reinstall
to avoid stale cached files causing missing styles.

  1. Go to Extensions → Manage → Installed and uninstall the old version.
  2. Go to System → Clear Cache and click Delete All.
  3. Delete the module folder from disk: modules/mod_social_connect_link/
  4. Install the new ZIP as a fresh installation (steps above).

Publishing the Module

  1. Go to Content → Site Modules (or Extensions → Modules).
  2. Find Social Connect Link in the list. If it is not visible,
    check that the Status filter is set to All.
  3. Click the module title to open its settings.
  4. Under the Module tab on the right side, set:

    • Status → Published
    • Position → choose the position that suits your template
      (e.g. sidebar-right, footer).
  5. Configure all options (see the Options Reference below),
    then click Save & Close.
💡 Tip: You can publish the module multiple times in different
positions with different settings by using
Save as Copy after configuring the first instance.

How to Use — Quick Start

Step 1 — Choose your Social Link Mode

The first setting in the Basic tab is Social Link Mode.
This controls which links appear on your site:

  • Fixed Social Links — Only the built-in networks you enable in the Fixed Social Links tab are shown.
  • Custom Social Links — Only the custom links you add in the Custom Social Links tab are shown.
  • Combined (default) — Fixed and custom links are merged and displayed together.

Step 2a — Set up Fixed Social Networks

Click the Fixed Social Links tab. For each network you want to display:

  1. Toggle the Enable switcher to Yes.
  2. Paste your full profile URL into the URL field (e.g. https://www.facebook.com/yourpage).
  3. Repeat for every network you want to show.

The 15 built-in networks are:

FacebookYouTubeTwitter
LinkedInGitHubDribbble
BehanceFlickrVimeo
TumblrRedditSoundCloud
DiggMyspaceGoogle+

Step 2b — Add Custom Social Links New in v5

Use this for any network not in the built-in list — Instagram, TikTok, Threads,
Pinterest, Discord, or any custom URL.

  1. Click the Custom Social Links tab.
  2. Click Add Item to create a new row.
  3. Fill in each row:

    • Link Name — The label shown in the tooltip (e.g. Instagram).
    • Icon / Image — Click the media picker to upload or select your icon image (SVG, PNG, or JPG recommended).
    • Profile URL — The full URL of the profile page (must start with https://).
  4. Repeat for each additional custom network.
  5. Drag the handle on the left of each row to reorder.
  6. Click the red × button to remove a row.
ℹ Note: The URL is the only required field in each custom row.
If you leave the Name blank no tooltip will appear. If you leave the Icon blank
the link will still render — it just will not show an image.

Step 3 — Adjust Style Options

In the Basic tab, set the section title, icon size, hover effect,
background colour, tooltip settings, and spacing. All options are described in
full in the Options Reference below.

Step 4 — Save and check your site

Click Save & Close, then visit your site front-end to see
the module. If icons or styles do not appear, go to
System → Clear Cache → Delete All and reload.

Options Reference

Basic Tab

Option Default Description
Social Link Mode New Combined Controls which links are rendered on the front end.

  • Fixed Social Links — Only the built-in networks from the Fixed Social Links tab.
  • Custom Social Links — Only the custom entries from the Custom Social Links tab.
  • Combined — Fixed networks first, then custom links.
Section Title Connect With US! The heading text displayed above the social icons.
Leave blank if you do not want a heading.
Logo Width (px) 36 Width of each social icon image in pixels.
Height scales automatically to maintain the icon’s aspect ratio.
Increase this value for larger icons.
Hover Style Default The CSS animation applied when a visitor hovers over an icon.

  • Default — Icon is full colour; hover turns it greyscale.
  • Blur — Icon blurs softly on hover.
  • Zoom In — Icon starts small and zooms to full size on hover.
  • GrayScale — Icon is greyscale by default; hover restores full colour.
  • None — No hover animation.
Section Background Color #cccccc Background colour of the entire module section.
Click the colour swatch to open the colour picker.
Enable Tooltip Yes When enabled, a small label appears above each icon on hover,
showing the network name (e.g. Facebook, Instagram).
Set to No to hide all tooltips.
Tooltip Text Color #f1f1f1 The text colour inside the tooltip bubble.
Only visible when Enable Tooltip is Yes.
Tooltip Background Color #222222 The background colour of the tooltip bubble and its downward-pointing arrow.
Only visible when Enable Tooltip is Yes.
Social Button Margin 5 Space in pixels around each individual icon button.
Increasing this value adds more breathing room between icons.
Value must be an integer (no units needed).

Padding Settings

These four fields control the inner padding of the module section in pixels.

Option Default Description
Section Top Padding 15 Space in pixels between the top edge of the module and its content.
Section Right Padding 15 Space in pixels on the right side of the module content.
Section Bottom Padding 15 Space in pixels between the bottom edge of the module and its content.
Section Left Padding 15 Space in pixels on the left side of the module content.

Margin Settings

These four fields control the outer margin around the module section in pixels.

Option Default Description
Section Top Margin 0 Space in pixels above the module, pushing it away from the element above it.
Section Right Margin 0 Space in pixels to the right of the module.
Section Bottom Margin 0 Space in pixels below the module.
Section Left Margin 0 Space in pixels to the left of the module.

Custom Social Links Tab New in v5

This tab lets you define an unlimited number of social links beyond the 15
built-in networks. Each entry is a repeatable row with three fields.

Field Required Description
Link Name Optional Display name for this link, shown in the tooltip on hover (e.g. Instagram,
TikTok, Discord). If left blank, no tooltip appears for this entry.
Icon / Image Optional The icon image to display. Click the media button to open Joomla’s Media Manager
and select or upload your icon. SVG format is recommended for sharpness at all sizes.
If left blank the link is still output but no image is shown.
Profile URL Required The full URL of the social profile or page. Must begin with https://.
Rows with an empty URL are automatically skipped and not rendered.
💡 Reordering rows: Drag the handle (⠿) on the left of any row
up or down to change the display order of your custom links.

Fixed Social Links Tab

This tab contains the 15 built-in social networks. Each network has two fields:
an Enable toggle and a URL field.
The network only appears on the front end when Enable is set to Yes
and a valid URL has been entered.

ℹ Note: The Fixed Social Links tab is only active when Social Link Mode
is set to Fixed Social Links or Combined.
If the mode is set to Custom Social Links, this tab’s settings are ignored.
Network Enable Toggle Default URL Example
Twitter / X No https://twitter.com/yourhandle
Facebook No https://www.facebook.com/yourpage
LinkedIn No https://www.linkedin.com/in/yourprofile
YouTube No https://www.youtube.com/c/yourchannel
GitHub No https://github.com/yourusername
Dribbble No https://dribbble.com/yourname
Behance No https://www.behance.net/yourname
Flickr No https://www.flickr.com/photos/yourname
Vimeo No https://vimeo.com/yourname
Tumblr No https://yourname.tumblr.com
Reddit No https://www.reddit.com/user/yourname
SoundCloud No https://soundcloud.com/yourname
Digg No https://digg.com/yourname
Myspace No https://myspace.com/yourname
Google+ No https://plus.google.com/yourprofile

Advanced Tab

Option Default Description
Alternative Layout Default Select an alternative template layout if your template or another extension
provides one. Leave as Default unless you have a custom layout installed.
Module Class Suffix — A CSS class suffix added to the module’s wrapper element.
Useful for targeting this specific module instance with custom CSS.
Example: entering -red adds the class lgxmscl-red.
Caching Use Global Set to Use Global to follow your site’s global cache settings,
or No Caching to always render the module fresh on each page load.
Cache Time 900 Duration in seconds that the module output is cached. 900 = 15 minutes.
Only applies when Caching is set to Use Global.

Hover Effects Explained

The Hover Style option applies a CSS transition to all social icons
when a visitor moves their cursor over them. All transitions use a smooth
0.2-second ease-in-out animation.

Style Value Resting State Hover State
Default Full colour Converts to greyscale — draws attention to the icon being hovered
Blur Sharp Applies a 2px blur filter — creates a soft focus effect
Zoom In Scaled to 50% (small) Scales to 100% (full size) — icons appear to grow into place on hover
GrayScale Greyscale Restores full colour — opposite of Default, highlights on hover
None Full colour No change — icons are static with no animation

Template Override

You can override the module’s CSS or layout without modifying the core files,
so your changes survive module updates.

CSS Override

Create the file templates/YOUR_TEMPLATE/css/mod_social_connect_link.css
in your active template’s folder. The module will automatically detect and load
this file after the default stylesheet, so your rules take precedence.

Layout Override

  1. Go to System → Site Templates → YOUR_TEMPLATE → Create Overrides.
  2. Find mod_social_connect_link in the module list and click it.
  3. Joomla copies the layout to templates/YOUR_TEMPLATE/html/mod_social_connect_link/default.php.
  4. Edit that file to customise the HTML output. It will not be overwritten on module updates.

Troubleshooting

Icons or styles are not loading

  1. Go to System → Clear Cache and click Delete All.
  2. Reload the front end with a hard refresh (Ctrl + Shift + R / Cmd + Shift + R).
  3. Check that the module is set to Published and assigned to a visible position.
  4. If upgrading from a very old version, perform a clean reinstall:
    uninstall, clear cache, delete the module folder on disk, then reinstall from ZIP.

Custom links are not appearing

  • Check that Social Link Mode is set to Custom Social Links or Combined.
  • Ensure each custom row has a valid URL starting with https://.
  • Save the module and clear the Joomla cache.

Tooltips are not showing

  • Confirm Enable Tooltip is set to Yes in the Basic tab.
  • For custom links, make sure the Link Name field is filled in — an empty name means no tooltip.
  • Check that your template’s CSS is not hiding the .mscl-tooltip class.

Hover animation is not working

  • Verify Hover Style is not set to None.
  • Check your browser console for any JavaScript errors that might block CSS transitions.
  • Some heavy page builders may strip or override CSS — try testing with the default Joomla template (Cassiopeia).

PHP warnings appear on the page

If you see “Undefined variable” warnings after upgrading, it means a cached version
of an older template file is still being served. Follow the clean reinstall steps above.
Make sure to delete the module folder manually from disk before reinstalling.

Changelog

Version 5.0.0

  • Added Custom Social Links — unlimited repeatable subform entries with custom Name, Icon, and URL per row.
  • Added Social Link Mode dropdown: Fixed Social Links / Custom Social Links / Combined.
  • Full Joomla 6 PSR-4 architecture: Dispatcher, HelperFactory, ServiceProvider.
  • Replaced legacy JFactory and JUri with modern Joomla 6 equivalents.
  • All type="radio" toggle fields updated to layout="joomla.form.field.radio.switcher".
  • Full XSS protection on all template output via htmlspecialchars().
  • PHP 8.2 compatibility — typed properties, #[\Override] attribute, union types.

Version 2.0.0

  • Joomla 4/5 compatibility update.
  • Migrated asset loading to WebAssetManager.
  • Added hover styles: Blur, Zoom In, GrayScale.
  • Added tooltip colour and background colour pickers.
  • Added margin and padding controls per side.

Support

If you need help with this module, please visit the LogicHunt support portal:

Copyright © 2014–2026 LogicHunt.
All rights reserved. Licensed under GNU/GPL v3.