Clickable Social Icon Links on Profile

[weallwegot (juicecounty.prodigy)]

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.

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!

	Github Repo	Discourse-Social-Links-Clickable
	Install Guide	How to install a theme or theme component

[davidkingham]

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.

[weallwegot (juicecounty.prodigy)]

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

[davidkingham]

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;
}

[bartv (Bart)]

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

[Solari]

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

[weallwegot (juicecounty.prodigy)]

Hey yea thanks for trying it out

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

[weallwegot (juicecounty.prodigy)]

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

[Solari]

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

Ray

[bartv (Bart)]

Could you add support for YouTube as well please?

[weallwegot (juicecounty.prodigy)]

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

https://github.com/weallwegot/discourse-social-links-clickable/commit/33bfb6f5fce3d6ffbddb68178a90df5b86d3388c

[bartv (Bart)]

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.

[weallwegot (juicecounty.prodigy)]

@bartv

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.

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

@bartv

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

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/ ?

[bartv (Bart)]

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?

[weallwegot (juicecounty.prodigy)]

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

[bartv (Bart)]

Brilliant, thank you!

[Solari]

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

[weallwegot (juicecounty.prodigy)]

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!

[renato (Renato Atilio)]

First, thanks for this theme component 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.

[renato (Renato Atilio)]

I don’t know if this is related to some recent core change: if logged in on my account the links show up on user cards, but if logged out (I’m testing with an anon tab) it outputs an error to console because on this row userFields is undefined. In this case, the user card shows only the avatar and username, nothing else.

If I check for userFields presence before its first use as I tested here the card is shown entirely, but no social icon links.

Anyone else having this issue?