Clickable Social Icon Links on Profile

A Theme Component that includes social icons as clickable within User Profile & User Cards if you are using the User Cards Directory Theme Component

It’s 99% copied from the discussion & code samples provided by @LeoMcA included in this conversation on Meta and in Namati User Card Profile Theme, but thought it would be helpful to dig it out from the thread and make it slightly more general.

Repository Link
https://github.com/weallwegot/discourse-social-links-clickable

Sample

Notes

  • Any users that don’t include a value for an entry will not have the corresponding icon shown on their user card/profile
  • Instagram & Twitter custom user fields only expect the user names (no “@” included), the name gets appended to the base URL
  • 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. Just my opinion though, the theme does not automatically hide them.

Site Settings

Each custom field name entry should line up with what you call the customized user field in your discourse instance.
By default the theme-component will expect the names to be as shown below, but you can of course change them.
Strings are case-sensitive.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'

Enjoy!

19 Likes

Nice work! The only problem I see is the avatar flair gets moved down because of this. The tree icon should be overlapping my avatar.

image

5 Likes

Ah thanks for testing it out & finding this
i don’t think I have any flairs on my communities,
i looked on yours & i think its the size of the icons making the card bigger. im not much of a css guru but i think ill have to conditionally apply a margin to the avatar for users that have icons

4 Likes

Note that the message button and the background move as well, I was able to correct everything with this, but yeah it needs to be applied conditionally

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}
1 Like

There’s an incompatibility with the follow plugin: this TC works fine when I’m logged in, but when I access the site as an anonymous user, user cards and the user profile page are broken.

Update: this is not related to the social icon links TC. I’ll report it on the Follow plugin topic.

In /logs I see:

NoMethodError (undefined method id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’

cc @angus

I like this! My only issue is the field name and url show up on the card and profile in addition to the icon. How can I hide the field/url text portion?

Thanks,
Ray

Hey yea thanks for trying it out

I just uncheck the “show on user card?” option under the custom fields

1 Like

Thanks yep, reached the same conclusion haven’t quite figured out the conditional style application yet though, sorry. Will try and find someone with more experience with these things

1 Like

Ahhh, that did the trick. This is quite nice, thank you for coding it!

Ray

Could you add support for YouTube as well please?

1 Like

yep should be updated now. I added it as just the name. you can see here:

4 Likes

It works like a charm, but I see you’ve hardcoded the use of youtube channels. Some people may prefer to put their username in there? (Some users don’t have channels). I believe this would work better if you would let people just put a youtube link in there instead of a channel/username.

Another thought about the Instagram/Twitter fields: Despite adding a note about only entering usernames into these profile fields, plenty of people just enter the entire URL - I suppose that’s a more common way of doing this on many sites. This got me thinking: perhaps you could detect the presence of ‘https://’ in the value and, if so, don’t add the URL base to it anymore? That would make things a little more forgiving/robust.

1 Like

excellent, ive added that suggestion now and it should work for both types of inputs now

i’m not sure i know the difference between channels and user profiles in youtube unfortunately. what do you suggest the base url be for youtube? just https://youtube.com/ ?

I think there are /c/ and /u/ links to channels and users, respectively. Honestly, I think the best approach here is to just let people enter a URL and don’t bother to make it too nice?

2 Likes

Ah true, i’ll just get rid of the base url feature for youtube links, so people can enter in a full one, just like the linkedin. Thanks for the suggestion, just updated

2 Likes

Brilliant, thank you!

Rank newbie here – I tried customizing the CSS to change the font color of the icons since I use a dark theme but I can’t get it to work.

I see the class is iconic-user-fields, I think. I tried changing the color of that and also with !important but it didn’t go.

Any suggestions?

Thanks!
Ray

apologies for the egregiously late reply - hopefully you were able to find a fix in the meantime.

I added a new setting that allows you pick an icon color in the theme configuration panel.
so now you can just change it to white or some other color more compatible with the dark theme. should be available now!

1 Like

First, thanks for this theme component :slight_smile: I enabled on my community and it looks neat.

I don’t know if anyone else had this issue, but with the theme component enabled, the user card on mobile has some overlapping:

I used this CSS for mobile as workaround so the card looks the same as before when no social links are provided:

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

Probably not a general solution but it worked for our community on the relevant scenarios.

Could you add support for Discord as well please? I would like it to be possible if you can only allow users to set a specific social media account (in my case, Discord).

1 Like