# (متقاعد) استخدم معرفاً في حقل مستخدم مخصص للربط بملف تعريف خارجي للمستخدم

**URL:** https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218
**Category:** Site Management
**Created:** [17 مارس 2016، 5:43م UTC](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218 "2016-03-17T17:43:28Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![techAPJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/techapj/32/342990_2.png) [@techAPJ](https://meta.discourse.org/u/techAPJ)
#### Post date: [17 مارس 2016، 6:14م UTC](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218/2 "2016-03-17T18:14:04Z")

</div>

Let’s say you want to add link on user field that contains **Twitter** username, clicking on username should take user to Twitter profile. Let’s do it!

### Create a custom user field

Create a new user field with name _Twitter_ that will store user’s Twitter username.

Make sure “Show on public profile?” option is enabled.

### Add custom CSS

Paste this CSS code in _Admin_ \> _Customize_ \> _CSS/HTML_ \> `CSS` section:

```plaintext
.public-user-field.twitter {
  display: none;
}

#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:

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

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

    api.modifyClass('model:user', {
      twitterLink: function() {
          const siteUserFields = Discourse.Site.currentProp('user_fields');
          if (!Ember.isEmpty(siteUserFields)) {
            const twitterUsernameField = siteUserFields.filterBy('name', 'Twitter')[0]
            if (!twitterUsernameField) {
              return null;
            }
            const userFieldId = twitterUsernameField.get('id');
            const userFields = this.get('user_fields');
            if (userFields && userFields[userFieldId]) {
              const url = "https://twitter.com/" + userFields[userFieldId];
              const link = "<a href='"+url+"' target='_blank'>@"+userFields[userFieldId]+"</a>";
              return Ember.Object.create({ link, name: twitterUsernameField.get('name') });
            } else {
              return null;
            }
          }
      }.property('user_fields.@each.value')
    });
</script>

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

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

```

### Voilà 🎉

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

 ![](https://global.discourse-cdn.com/meta/original/3X/9/5/957591598df6b07f9f6fe9c8ae41039ffdf5e744.png)

and user card:

 ![](https://global.discourse-cdn.com/meta/original/3X/c/1/c1d31168fbb329c01442209bcd0843b5118e4256.png)

---

_[View the full topic](https://meta.discourse.org/t/retired-use-an-id-in-a-custom-user-field-to-link-to-a-users-external-profile/41218)._