(Retired) Link username to external profile

[Discourse]

Let’s say you want to add a link of User’s main profile page on Discourse user profile page and user card, clicking on that link will take user to main (external) website.

The link of main website user profile page will be like:

http://site.com/username

Where username is the Discourse username of that user. (It should be same on both main site and Discourse forum)

Let’s get started!

Add custom CSS

Paste this CSS code in Admin > Customize > CSS/HTML > CSS section:

#user-card .metadata h3 {
  float: left;
}

h3.user-card-public-field {
 clear: both;   
}

Add custom JS

Paste this JS code in Admin > Customize > CSS/HTML > </head> section:

<script type="text/discourse-plugin" version="0.8.7">
    api.registerConnectorClass('user-profile-primary', 'site-link', {
      setupComponent(args, component) {
        component.set('siteLink', args.model.get('siteLink'));
      }
    });

    api.registerConnectorClass('user-card-metadata', 'site-link', {
      setupComponent(args, component) {
        component.set('siteLink', args.user.get('siteLink'));
      }
    });

    api.modifyClass('model:user', {
      siteLink: function() {
          const username = this.get('username');

          if (username) {
              const url = `http://site.com/${username}`;
              const link = `<a href=${url} target='_blank'>${url}</a>`;

              return Ember.Object.create({ link, name: "User Profile" });
          } else {
              return null;
          }
      }.property('username')
    });
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-profile-primary/site-link'>
  {{#if siteLink}}
    <div class="public-user-fields">
      <div class="public-user-field">
        <span class="user-field-name">{{siteLink.name}}</span>:
        <span class="user-field-value">{{{siteLink.link}}}</span>
      </div>
    </div>
  {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='/connectors/user-card-metadata/site-link'>
  {{#if siteLink}}
    <h3 class="user-card-public-field">
      <span class="user-field-name">{{siteLink.name}}</span>:
      <span class="user-field-value">{{{siteLink.link}}}</span>
    </h3>
  {{/if}}
</script>

Update:

const url = `http://site.com/${username}`;

with your website user profile link.

Voilà

That’s it, you will now see user Profile link on user profile page:

and user card:

---

Related: (Retired) Use an ID in a custom user field to link to a user's external profile

[pblog (Mike Sider)]

Works like a charm. Thanks for adding this guide @techAPJ

[SidV]

@pblog, (or someone) could you please add an screenshot for final result?

[techAPJ (Arpit Jalan)]

Okay, added images in OP.

[Denis_Didkovsky (DenisD)]

Dear Arpit, does this approach really update userfield siteLink?
We used it “as is” and siteLink in empty under user/preferences siteLink although it is visible over user card
thx

[techAPJ (Arpit Jalan)]

@Denis_Didkovsky

does this approach really update userfield siteLink?

You mean user “Web Site”, right?

No, the code in first post does not update user Website field. It just adds a link of main/external user profile on user page and user card.

[sunnyt7 (Sunny T)]

Sorry for the newbie question, but could someone post example code for if external_id was used as opposed to username?

I have single sign on enabled, and it shows the proper External ID at the bottom of the admin interface of the user account.

[daath (Lars)]

Any chance this example could get an update? Apparently it will not work, since api.container.lookupFactory is a private API and will break stuff

@sunnyt7

Sorry for the newbie question, but could someone post example code for if external_id was used as opposed to username?

I have single sign on enabled, and it shows the proper External ID at the bottom of the admin interface of the user account.

I asked the same a long time ago. You’d have to write a plugin that exposes external_id - I asked recently if it had become enabled, since they changed a lot of stuff, but haven’t received an answer, so I guess it still requires a plugin…

[techAPJ (Arpit Jalan)]

Okay, I updated the code in first post to use api.modifyClass instead of api.container.lookupFactory.

[pnoeric (Eric)]

@techAPJ

디스코urs 사용자 프로필 페이지와 사용자 카드에 사용자의 메인 프로필 페이지 링크를 추가하고 싶다고 가정해 보겠습니다. 해당 링크를 클릭하면 사용자는 메인(외부) 웹사이트로 이동하게 됩니다.

@techAPJ, 이 코드는 훌륭합니다. 작은 수정을 하나 하고 싶은데 혹시 아시는 분이 있을까요… URL 끝에 있는 external_id(예: const url = 'http://site.com/${external_id}')를 어떻게 가져올 수 있을까요? 사용자 객체에서 external_id를 가져오도록 코드를 변경해 보았지만 해당 속성이 정의되지 않았다고 합니다.

[Shauny (Shaun Robinson)]

이 코드는 비추천(deprecated) 상태입니다. 업데이트해 주시겠어요? 직접 수정을 시도해 봤지만 작동하지 않았습니다.

[관리자 공지] 플러그인 또는 테마 컴포넌트 중 하나가 Discourse 3.2와 호환되지 않아 업데이트가 필요합니다.
자세한 내용은 Communiteq 지식 베이스에서 확인할 수 있습니다.
상세 정보: [THEME 1 ‘Default’] 함수 프로토타입 확장 기능이 비추천(deprecated)되었으므로, function(){}.property(‘bar’)에서 computed(‘bar’, function() {})로 마이그레이션해 주세요.

[david (David Taylor)]

이것은 다른 가이드와 매우 유사해 보입니다. 해당 가이드와 마찬가지로, OP에서 제안된 전략들은 매우 오래되었습니다. 앞으로의 최선의 방법은 기능을 git 관리되는 테마 컴포넌트에 통합하여 사람들이 코드를 복사/붙여넣을 필요가 없도록 하는 것입니다.

(Retired) Use an ID in a custom user field to link to a user's external profile

Hmm yeah, the techniques suggested in the OP are pretty outdated (which makes sense, given it was written in 2016 ). Nowadays this kind of thing should be packaged up in a git repository and published as a Customization > Theme component for people to install and configure via the settings.

두 사용 사례를 모두 포괄하는 공식 #customization:theme-component를 만들 수 있는지 검토 중이며, 준비가 되면 해당 주제들을 업데이트하겠습니다.