# 프로필에서 클릭 가능한 소셜 아이콘 링크
**URL:** https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136
**Category:** Theme component
**Created:** [7월 18, 2020, 5:03오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136 "2020-07-18T17:03:21Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [7월 18, 2020, 5:03오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/1 "2020-07-18T17:03:21Z")
사용자 프로필 및 사용자 카드에서 소셜 아이콘을 클릭할 수 있도록 포함하는 테마 컴포넌트입니다. [사용자 카드 디렉터리 테마 컴포넌트](https://meta.discourse.org/t/user-card-directory/144479/29)를 사용하는 경우 적용됩니다.
이 코드는 @LeoMcA 님이 [Meta](https://meta.discourse.org/t/link-custom-user-field-to-external-website/41218)의 이 대화와 [Namati 사용자 카드 프로필 테마](https://github.com/LeoMcA/namati-user-card-profile-theme)에서 제공한 토론 및 코드 샘플에서 99% 복사한 것입니다. 다만, 해당 스레드에서 내용을 발췌하여 좀 더 범용적으로 수정해 공유하면 도움이 될 것 같아 올립니다.
**참고 사항**
- 항목 값이 없는 사용자의 경우, 해당 사용자 카드/프로필에 대응하는 아이콘이 표시되지 않습니다.
- Instagram 및 Twitter 커스텀 사용자 필드는 사용자 이름만 입력하도록 되어 있으며(“@” 기호 제외), 이름은 기본 URL에 추가됩니다.
- 아이콘이 표시될 커스텀 사용자 필드는 사용자 카드에 _표시되지 않도록_ 설정하는 것을 권장합니다. 텍스트와 클릭 가능한 아이콘이 동시에 나타나면 다소 중복되는 느낌을 줄 수 있기 때문입니다. 물론 이는 제 의견일 뿐이며, 테마가 자동으로 숨겨주지는 않습니다.
**사이트 설정**
각 커스텀 필드 이름 항목은 Discourse 인스턴스에서 해당 사용자 필드를 지칭하는 이름과 일치해야 합니다. 기본적으로 테마 컴포넌트는 아래에 표시된 이름들을 기대하지만, 물론 변경할 수 있습니다. 문자열은 대소문자를 구분합니다.
```plaintext
instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'
```
즐거우게 사용하세요!
| | | |
| --- | --- | --- |
| 🔗 | **GitHub 저장소** | [Discourse-Social-Links-Clickable](https://github.com/weallwegot/discourse-social-links-clickable) |
| 🛠 | **설치 가이드** | [테마 또는 테마 컴포넌트 설치 방법](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [7월 18, 2020, 9:11오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/2 "2020-07-18T21:11:54Z")
좋은 결과네요! 제가 발견한 유일한 문제는 이 때문에 아바타 플레어가 아래로 이동한다는 점입니다. 트리 아이콘은 제 아바타 위에 겹쳐져 있어야 합니다.
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [7월 20, 2020, 12:11오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/3 "2020-07-20T00:11:50Z")
아, 테스트해 주시고 이 문제를 찾아주셔서 감사합니다.
제 커뮤니티에는 플레어가 없는 것 같은데,
여러분의 커뮤니티를 확인해 봤더니 아이콘 크기가 카드 크기를 키우는 것 같아요. CSS에는 그다지 밝지 않지만, 아이콘이 있는 사용자의 아바타에 조건부로 margin을 적용해야 할 것 같아요.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [7월 21, 2020, 3:35오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/4 "2020-07-21T03:35:37Z")
메시지 버튼과 배경도 함께 이동한다는 점에 유의하세요. 이 방법으로 모든 것을 수정할 수 있었지만, 조건부로 적용해야 합니다.
```plaintext
#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;
}`
```
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [7월 28, 2020, 10:00오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/5 "2020-07-28T10:00:46Z")
[follow 플러그인](https://meta.discourse.org/t/follow-plugin/110579)과의 호환성 문제가 있습니다. 로그인한 상태에서는 이 TC가 정상적으로 작동하지만, 익명 사용자로 사이트에 접근하면 사용자 카드와 사용자 프로필 페이지가 깨집니다.
**업데이트: 이는 소셜 아이콘 링크 TC와 관련이 없습니다. Follow 플러그인 주제에서 보고하겠습니다.**
/logs에서 다음 내용을 확인했습니다:
> NoMethodError (undefined method `id' for nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’
@angus에게 공유합니다.
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [7월 29, 2020, 4:46오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/6 "2020-07-29T04:46:19Z")
좋아요! 다만 아이콘 외에 카드와 프로필에 필드 이름과 URL도 함께 표시되는 점이 유일한 문제입니다. 필드/URL 텍스트 부분을 숨길 수 있는 방법이 있을까요?
감사합니다,
Ray
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [7월 29, 2020, 4:54오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/7 "2020-07-29T04:54:46Z")
안녕, 테스트해줘서 고마워
커스텀 필드에서 “사용자 카드에 표시?” 옵션의 체크만 해제하면 돼
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [7월 29, 2020, 4:56오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/8 "2020-07-29T04:56:01Z")
네, 감사합니다. 저도 같은 결론에 도달했지만, 조건부 스타일 적용은 아직 완전히 파악하지 못했습니다. 죄송합니다. 이 부분에 대해 더 경험이 많은 사람을 찾아보겠습니다.
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [7월 29, 2020, 4:56오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/9 "2020-07-29T04:56:33Z")
아, 그게 효과적이었네요. 꽤 마음에 드네요, 코딩해 주셔서 감사합니다!
레이
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [8월 2, 2020, 9:07오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/10 "2020-08-02T09:07:47Z")
유튜브 지원도 추가해 주시겠어요?
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [8월 4, 2020, 5:42오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/11 "2020-08-04T17:42:18Z")
네, 이제 업데이트되었을 겁니다. 이름만 추가했습니다. 여기 확인하실 수 있어요:
>
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [8월 8, 2020, 6:59오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/12 "2020-08-08T06:59:06Z")
매끄럽게 작동하지만, YouTube 채널을 하드코딩으로 처리하고 있는 걸 확인했습니다. 일부 사용자는 사용자명을 입력하고 싶어 할 수 있습니다 (채널이 없는 사용자가 있거든요). 채널/사용자명 대신 YouTube **링크** 를 직접 입력할 수 있도록 하면 더 좋겠다는 생각이 듭니다.
Instagram/Twitter 필드에 대해 또 다른 생각이 있습니다. 프로필 필드에는 사용자명만 입력하라는 안내를 추가했지만, 여전히 많은 사용자가 전체 URL을 입력합니다 — 많은 사이트에서는 이것이 더 일반적인 방식이기 때문일 겁니다. 이걸 보고 이런 생각이 들었습니다: 값 안에 'https://'가 있는지 감지하고, 있으면 URL 기본값을 더 이상 붙이지 않는 것은 어떨까요? 그러면 입력에 대해 좀 더 관대하고 견고해질 것입니다.
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [8월 8, 2020, 8:37오전 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/13 "2020-08-08T08:37:26Z")
> [@bartv](#):
>
> 값 안에 ‘https://’가 있는지 감지해서, 있다면 URL 베이스를 더 이상 추가하지 않는 건 어떨까요? 그렇게 하면 좀 더 관대하고 견고해질 거예요.
훌륭합니다. 이제 그 제안을 추가했고, 두 가지 유형의 입력 모두에서 작동해야 합니다.
> [@bartv](#):
>
> 일부 사용자는 여기에 사용자 이름을 넣고 싶어 할 수도 있겠죠? (채널이 없는 사용자가 있습니다). 채널/사용자 이름 대신 유튜브 **링크** 를 직접 입력할 수 있게 하면 더 잘 작동할 것 같습니다.
불행히도 유튜브에서 채널과 사용자 프로필의 차이를 정확히 알지 못합니다. 유튜브의 기본 URL은 어떻게 설정하는 게 좋을까요? 그냥 `https://youtube.com/`으로 하면 될까요?
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [8월 12, 2020, 12:42오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/14 "2020-08-12T12:42:06Z")
채널과 사용자에 각각 /c/와 /u/ 링크가 있다고 생각합니다. 솔직히 여기서는 그냥 URL을 입력하도록 하고, 너무 예쁘게 만들려고 하지 않는 것이 가장 좋은 방법이라고 생각합니다.
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [8월 22, 2020, 3:27오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/15 "2020-08-22T15:27:20Z")
아 맞네, 유튜브 링크의 기본 URL 기능을 제거하고, 링크드인처럼 사용자가 전체 URL을 직접 입력할 수 있도록 할게요. 제안해 주셔서 감사합니다. 방금 업데이트했어요.
---
### Author:  [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [8월 23, 2020, 3:37오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/16 "2020-08-23T15:37:32Z")
훌륭해요, 감사합니다!
---
### Author:  [@Solari](https://meta.discourse.org/u/Solari)
#### Post date: [8월 23, 2020, 5:25오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/17 "2020-08-23T17:25:32Z")
초보자입니다. 다크 테마를 사용 중이라 아이콘의 글꼴 색상을 변경하기 위해 CSS를 커스터마이징해 보았는데, 어떻게 해도 작동이 안 됩니다.
클래스가 iconic-user-fields인 것 같은데, 해당 클래스의 색상을 변경해 보고 !important를 붙여 보기도 했는데 효과가 없었습니다.
어떤 방법이 있을까요?
감사합니다!
Ray
---
### Author:  [@weallwegot](https://meta.discourse.org/u/weallwegot)
#### Post date: [11월 22, 2020, 9:26오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/18 "2020-11-22T21:26:49Z")
대단히 늦은 답변을 드려 죄송합니다. 그동안 해결 방법을 찾으셨기를 바랍니다.
테마 설정 패널에서 아이콘 색상을 선택할 수 있는 새 설정을 추가했습니다.
이제 흰색이나 다크 테마와 더 잘 어울리는 다른 색상으로 변경할 수 있습니다. 지금 바로 사용 가능합니다!
---
### Author:  [@renato](https://meta.discourse.org/u/renato)
#### Post date: [11월 25, 2020, 2:18오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/19 "2020-11-25T14:18:14Z")
먼저 이 테마 컴포넌트를 공유해 주셔서 감사합니다 🙂 커뮤니티에 활성화했는데 깔끔하게 보입니다.
다른 분들도 같은 문제를 겪고 계신지 모르겠지만, 테마 컴포넌트를 활성화하면 모바일에서 사용자 카드에 겹침 현상이 발생합니다:
모바일에서는 소셜 링크가 제공되지 않을 때 카드가 이전과 동일한 모양으로 보이도록 아래 CSS를 임시 조치로 사용했습니다:
```css
.iconic-user-fields {
padding-bottom: 0 !important;
}
#user-card {
.usercard-controls {
margin-top: 1em !important;
}
}
```
일반적인 해결책은 아닐 수 있지만, 해당 시나리오에서 저희 커뮤니티에서는 잘 작동했습니다.
---
### Author:  [@renato](https://meta.discourse.org/u/renato)
#### Post date: [11월 28, 2020, 9:37오후 UTC](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136/21 "2020-11-28T21:37:46Z")
최근 코어 변경 사항과 관련이 있는지 확실하지 않습니다: 내 계정으로 로그인한 상태에서는 사용자 카드에 링크가 표시되지만, 로그아웃 상태(익명 탭으로 테스트 중)에서는 [이 라인](https://github.com/weallwegot/discourse-social-links-clickable/blob/master/common/head_tag.html#L56)에서 `userFields`가 정의되지 않아 콘솔에 오류가 출력됩니다. 이 경우 사용자 카드에는 아바타와 사용자명만 표시되고, 다른 내용은 표시되지 않습니다.
[여기서](https://github.com/renato/discourse-social-links-clickable/blob/master/common/head_tag.html#L51) 테스트했듯이 `userFields`의 존재 여부를 첫 사용 전에 확인하면 카드가 전체적으로 표시되지만, 소셜 아이콘 링크는 표시되지 않습니다.
이 문제를 겪고 있는 다른 분이 계신가요?
[Next page](https://meta.discourse.org/t/clickable-social-icon-links-on-profile/158136.md?page=2)