Clickable Social Icon Links on Profile

[Jagster (Jakke Flemming)]

Tiktok needs @ and Youtube uses url of forum

[martyn_thomas]

I don’t use tiktok - do you have an example username i can use to experiement with?

[Jagster (Jakke Flemming)]

Well, mine is jagster64 - that is quite safe to use because I don’t publish.

[martyn_thomas]

Fixed - added to the pull request

[martyn_thomas]

Pull request submitted to add Strava support - hopefully @weallwegot will tolerate my slightly mess pull request :-s

[Roi]

Hm, temporary-twitter-x was changed back to fab-twitter. Was this done by purpose or by mistake? Anyway, the old Twitter bird is there again instead of the new X logo.

[martyn_thomas]

Thanks for the spot - i’ve created a pull request to update it to twitter’s rebrand

[Roi]

Thank you! But unfortunately you need to change fa-x-twitter to temporary-twitter-x, as fa-x-twitter is Fontawesome 6, which does not work in Discourse, yet.

[Moin]

@Roi

Fontawesome 6, which does not work in Discourse, yet.

I think it should

We're upgrading our icons to Font Awesome 6!

What’s Font Awesome? Discourse uses a free set of icons from Font Awesome throughout its interface. You see these on toolbars, badges, buttons, etc… here’s our composer toolbar: [image] Since 2018 we’ve been using Font Awesome 5 (original announcement), and in the meantime Font Awesome 6 has been released. Version 6 includes new icons, some general style updates, and renames. As of today, Discourse will start using version 6 too! Specifically, version 6.6.0. This isn’t an enormous visual ch…

[martyn_thomas]

Updated with the right X icon…knowing that every Branding and Marketing expert just felt a cold shiver but can’t explain why

[martyn_thomas]

Done some testing - can confirm that FA6 icon works - pull request updated

[Roi]

Yeah interesting, Fontawesome 6 seems to work now with Discourse!

With the correct icon I can also see it. Cool! Thanks a lot!

[icaria36]

Hi, is it possible to add a custom SVG instead of one from FontAwesome, as Custom Header Links (icons) allows to do?

[icaria36]

@weallwegot

I’d recommend making the Custom User Fields that will have icons NOT show on the User Card since it will then feel a bit redundant to have the text & the clickable icons.

Like this?

I’ve just realized that deselecting “Show on public profile” removes the user field from the public profile (as expected) but the behavior of the icon provided by this theme component is more erratic:

• in my admin account, I still can see the icon
• in my test account (trust level 1) the icon disappears as well

In other words, for most logged in users and all anonymous users, the custom user field icon is only visible when the corresponding label and text value are visible as well. Hiding one, hides the other.

It’s strange but I have tried with different browsers, incognito window, and I can reproduce this reliably. Is anyone else able to reproduce this problem?

It’s one of those things that is easy to miss as an admin. I noticed only after a user reported a problem that made me realize this behavior.

In case it helps, I’m testing this with the Mastodon icon.

[jenmck (jen)]

Having an issue where the links are not properly navigating to the user’s social media profile. Looks like it just appends the url of whatever page you happen to be on with the custom user field.

So far I’ve noticed this for Steam and Discord.

Looking at the github repo in links-settings.js, there’s no base: or baseregex: lines for Steam and Discord…Bluesky and Twitter (sorry, X the everything app) work fine, and they have both of those lines, so perhaps that’s the issue?

{
        name: "Discord",
        icon: "fab-discord",
        link: {
          value: settings.discord_custom_field_name,
        },
      },
      {
        name: "Steam",
        icon: "fab-steam",
        link: {
          value: settings.steam_custom_field_name,
        },
      },

For Bluesky:

{
        name: "Bluesky",
        icon: "fab-bluesky",
        link: {
          value: settings.bluesky_custom_field_name,
          base: "https://bsky.app/profile/",
          baseregex: "^http(s)?://(www.)?bsky.app/profile/",
        },
      },

For Twitter:

{
        name: "X",
        icon: "fab-twitter",
        link: {
          value: settings.twitter_custom_field_name,
          base: "https://twitter.com/",
          baseregex: "^http(s)?://(www.)?twitter.com/",
        },
      },

Skimming through the rest of the entries and looks like these don’t have base: or baseregex: lines either, but I don’t have a live example of them to test out.

• email
• mastodon
• discord
• steam
• linkedin
• bandcamp

(edited to add) I went ahead and created a pull request:
09096b8: adding the base urls for email, steam, and linkedin
0ec40a0: added discord, bandcamp, and mastodon, and updated readme. I did this separately because bandcamp and mastodon will have different base URLs depending on the user, they’re not consistent; and for Discord, the user would enter their User ID and not their username, so it felt like it would need explaining in the readme.

[long]

Possible to update Facebook icon to: fab-facebook-f and rename Twitter to X and use this icon: fab-x-twitter and ….and add Snapchat with this icon: fab-snapchat

Need to get twitter changed to x.com (url and icon)

These would be great. Not sure if the actual component can be updated for this.

[Moin]

@weallwegot

I’d recommend making the Custom User Fields that will have icons NOT show on the User Card since it will then feel a bit redundant to have the text & the clickable icons.

Did you configure the user field to be shown on the user card?

[long]

Super helpful, thank you.

[long]

Ok, for those that want to update Twitter to X (both the icon and URL), follow these steps.

1. Go to Admin > Appearance > Themes & components > Components > Install > Create new

2. Add this code to the CSS tab (replace “XXXXX” with your @ username handle):

/* 1. Hide the original Twitter SVG icon */
a[href="https://twitter.com/XXXXX"] svg.d-icon-fab-twitter,
a[href="https://x.com/XXXXX"] svg.d-icon-fab-twitter {
    display: none;
}

/* 2. Inject the X icon using a pseudo-element and a CSS mask */
a[href="https://twitter.com/XXXXX"]::before,
a[href="https://x.com/XXXXX"]::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>') no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

3. Add this code to the < head > tab (replace “XXXXX” with your @ username handle):

<script>
// Create a function that finds and changes the link
function updateTwitterLinks() {
    const oldLinks = document.querySelectorAll('a[href="https://twitter.com/XXXXX"]');
    oldLinks.forEach(link => {
        link.href = 'https://x.com/XXXXX';
    });
}

// 1. Try running it immediately just in case
updateTwitterLinks();

// 2. Set up a "watcher" for dynamically loaded content (like Discourse posts)
const observer = new MutationObserver(function(mutations) {
    updateTwitterLinks();
});

// Start watching the entire body of the page for newly added elements
observer.observe(document.body, { childList: true, subtree: true });
</script>

Done.