プロフィールのクリック可能なソーシャルアイコンリンク

weallwegot · 2020 年 7 月 18 日午後 5:03

ユーザープロフィールおよびユーザーカード（User Cards Directory Theme Component を使用している場合）内に、クリック可能なソーシャルアイコンを含むテーマコンポーネントです。

これは、@LeoMcA 氏によって提供された議論とコードサンプルをほぼそのまま（99%）引用したもので、Meta での会話や Namati User Card Profile Theme に含まれていますが、スレッドから取り出して少し汎用性を持たせ、整理して共有することにしました。

注意事項

特定の項目に値を入力していないユーザーには、対応するアイコンはユーザーカード/プロフィールに表示されません。
Instagram と Twitter のカスタムユーザーフィールドには、ユーザー名のみ（「@」は含めない）を入力してください。ベース URL に自動的に付加されます。
アイコンが表示されるカスタムユーザーフィールドは、ユーザーカードからは表示しないことをお勧めします。テキストとクリック可能なアイコンの両方があるのは少し冗長に感じるためです。これはあくまで個人的な意見ですが、テーマ側では自動的に非表示にはなりません。

サイト設定

各カスタムフィールド名のエントリは、Discourse インスタンスで設定しているカスタマイズされたユーザーフィールドの名前と一致させる必要があります。デフォルトでは、以下のように名前が設定されていますが、必要に応じて変更可能です。文字列は大文字・小文字を区別します。

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'LinkedIn Profile'

お楽しみください！


	Github リポジトリ	Discourse-Social-Links-Clickable
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法

davidkingham · 2020 年 7 月 18 日午後 9:11

お疲れ様です！私が指摘する唯一の問題は、これによりアバターのフレアが下に移動してしまうことです。ツリーのアイコンはアバターの上に重なるべきです。

weallwegot · 2020 年 7 月 20 日午前 12:11

あ、試してくれてありがとう、それに見つけてくれてありがとう
私のコミュニティにはフラワーがないと思うよ
あなたのところを見たけど、カードが大きくなっているのはアイコンのサイズが原因だと思うんだ。私はCSSの達人じゃないけど、アイコンを持っているユーザーにはアバターのマージンを条件付きで適用する必要があると思うな

davidkingham · 2020 年 7 月 21 日午前 3:35

メッセージボタンと背景も移動することに注意してください。これですべて修正できましたが、条件付きで適用する必要があります。

#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 · 2020 年 7 月 28 日午前 10:00

follow プラグインとの互換性の問題があります：ログイン状態ではこの TC は正常に動作しますが、匿名ユーザーとしてアクセスすると、ユーザーカードとユーザープロフィールページが破損します。

更新：これはソーシャルアイコンリンクの TC とは関係ありません。Follow プラグインのトピックで報告します。

/logs に以下が表示されています：

NoMethodError (nil:NilClass に対して id' メソッドが定義されていません) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in block (2 levels) in activate!’

cc @angus

Solari · 2020 年 7 月 29 日午前 4:46

これは素晴らしいですね！ただ一つ気になる点があります。アイコンに加えて、カードやプロフィールにフィールド名とURLも表示されてしまうことです。フィールド名やURLのテキスト部分を非表示にするにはどうすればよいでしょうか？

よろしくお願いいたします、
レイ

weallwegot · 2020 年 7 月 29 日午前 4:54

やあ、試してくれてありがとう

カスタムフィールドの「ユーザーカードに表示する？」オプションのチェックを外しました。

weallwegot · 2020 年 7 月 29 日午前 4:56

ありがとうございます、同じ結論に至りましたね。ただ、条件付きスタイルの適用についてはまだよくわかっていません、すみません。もっと詳しい方に相談してみます。

Solari · 2020 年 7 月 29 日午前 4:56

ああ、これでうまくいきました。とても素晴らしいですね、コーディングしてくださりありがとうございます！

レイ

bartv · 2020 年 8 月 2 日午前 9:07

YouTube のサポートも追加していただけますか？

weallwegot · 2020 年 8 月 4 日午後 5:42

はい、更新されました。名前のみを追加しました。こちらでご確認ください：

bartv · 2020 年 8 月 8 日午前 6:59

完璧に機能していますが、YouTube チャンネルの使用がハードコードされているようです。ユーザーによっては、チャンネル名ではなくユーザー名を入力したい場合もあるかもしれません（チャンネルを持っていないユーザーもいます）。チャンネル名やユーザー名ではなく、YouTube のリンクを入力できるようにすれば、より良い動作になると思います。

Instagram や Twitter のフィールドについての別の提案ですが、プロフィール欄にはユーザー名のみを入力するよう注記を追加しているにもかかわらず、多くの人が完全な URL を入力してしまいます。これは多くのサイトで一般的な入力方法のようです。そこで、値に ‘https://’ が含まれているかを検知し、含まれている場合は URL のベースを追加しないようにするのはどうでしょうか。これにより、より柔軟で堅牢な実装になるでしょう。

weallwegot · 2020 年 8 月 8 日午前 8:37

素晴らしいですね。その提案を実装しました。これで両方の入力タイプに対応できるはずです。

残念ながら、YouTubeにおける「チャンネル」と「ユーザープロフィール」の違いがよくわかりません。YouTubeのベースURLは何にすべきでしょうか？単にhttps://youtube.com/でよいでしょうか？

bartv · 2020 年 8 月 12 日午後 12:42

チャンネルとユーザーにはそれぞれ /c/ と /u/ のリンクがあると思います。正直なところ、ここでの最善のアプローチは、単に URL を入力させて、あまりきれいにしようとして手間取る必要はないのではないでしょうか？

weallwegot · 2020 年 8 月 22 日午後 3:27

ああ、確かに。YouTube リンクについてはベース URL 機能を削除し、LinkedIn のように完全な URL を入力できるようにします。ご提案ありがとうございます。更新しました。

bartv · 2020 年 8 月 23 日午後 3:37

素晴らしい、ありがとうございます！

Solari · 2020 年 8 月 23 日午後 5:25

Rank 初心者です – ダークテーマを使用しているため、アイコンのフォント色を変更するために CSS をカスタマイズしようとしたのですが、うまくいきません。

クラス名は iconic-user-fields だと思うのですが、その色を変更したり、!important を付けたりしても効果がありませんでした。

何かアドバイスはありますか？

ありがとう！
Ray

weallwegot · 2020 年 11 月 22 日午後 9:26

遅ればせながら大変申し訳ございません。その間に解決策を見つけていただけたことを願っております。

テーマ設定パネルでアイコンの色を選択できるよう、新しい設定を追加いたしました。
これで、白やダークテーマと相性の良い他の色に変更することが可能です。すでに利用可能です！

renato · 2020 年 11 月 25 日午後 2:18

まず、このテーマコンポーネントを提供してくださりありがとうございますコミュニティで有効にしましたが、見た目も素敵です。

他の誰かも同じ問題に直面しているかどうかわかりませんが、このテーマコンポーネントを有効にすると、モバイル版のユーザーカードが一部重なって表示されてしまいます：

ソーシャルリンクが提供されていない場合、カードが以前と同じように見えるように、モバイル向けのこの CSS を回避策として使用しました：

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

一般的な解決策ではないかもしれませんが、私たちのコミュニティでは関連するシナリオで機能しました。

renato · 2020 年 11 月 28 日午後 9:37

最近の核心部分の変更に関連しているかどうかはわかりませんが、自分のアカウントでログインしている場合はユーザーカードにリンクが表示されますが、ログアウト状態（匿名タブでテスト中）では、この行で userFields が未定義であるため、コンソールにエラーが出力されます。この場合、ユーザーカードにはアバターとユーザー名のみが表示され、その他は何も表示されません。

私がここでテストしたように、userFields の存在を最初に使用する前に確認すると、カード全体が表示されますが、ソーシャルアイコンリンクは表示されません。

この問題に直面している方は他にもいますか？

トピック		返信	表示
Custom Header Links (icons) Theme component official , custom-header-icons	119	31555	2025 年 8 月 4 日
Show Social Login Profiles on User Card Support	2	889	2021 年 2 月 12 日
Daemonite Material Theme Theme	94	29655	2024 年 2 月 1 日
Normalized Profile Links Theme component	5	234	2025 年 1 月 4 日
Social Share Theme component official , social-share	25	15868	2026 年 1 月 4 日

プロフィールのクリック可能なソーシャルアイコンリンク

関連トピック