(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

Discourse のユーザープロフィールページやユーザーカードに、ユーザーのメインプロフィールページへのリンクを追加したいとします。そのリンクをクリックすると、ユーザーはメイン（外部）ウェブサイトへ移動します。

@techAPJ、このコードは素晴らしいです。少しだけ調整を加えたいのですが、URL の末尾にある external_id を取得する方法をご存知でしょうか（例：const url = 'http://site.com/${external_id}'）？ユーザーオブジェクトから external_id を取得するようにコードを変更してみましたが、そのプロパティが未定義であるとエラーが出てしまいます。

[Shauny (Shaun Robinson)]

このコードは非推奨です。更新していただけますか？調整してみましたが、うまくいきませんでした。

[管理者通知] プラグインまたはテーマコンポーネントの 1 つ以上が、Discourse 3.2 と互換性がないため更新が必要です。
詳細については、Communiteq ナレッジベース を参照してください。
詳細: [THEME 1 ‘Default’] Function prototype extensions は非推奨になりました。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 theme-component for people to install and configure via the settings.

両方のユースケースをカバーする公式の#theme-componentを作成できるかどうかを検討しており、準備ができ次第、両方のトピックを更新します。