Clickable Social Icon Links on Profile

Theme component
83

Tiktok needs @ and Youtube uses url of forum :man_shrugging:

84

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

85

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

86

Fixed - added to the pull request

2 Likes
87

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

1 Like
88

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.

1 Like
89

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

2 Likes
90

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.

2 Likes
91

I think it should

3 Likes
92

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

3 Likes
93

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

2 Likes
94

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

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

2 Likes
95

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

96

Like this?

image
image214×201 8.06 KB

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.

97

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.