DEV Community

SATO, Yoshiyuki
SATO, Yoshiyuki

Posted on • Updated on

Special icons for social accounts on GitHub

You can have up to 4 social account links on your GitHub profile.

Follow the steps below for the settings.
Your avatar on the top right of GitHub → settings → "Public profile" → "Social accounts"

https://github.blog/changelog/2023-02-02-add-more-social-links-to-your-user-profile/

You can now add up to 4 links to any social accounts to your user profile, with special support for popular platforms.

It states that it has "special support for popular platforms".
For example, if you register a Twitter URL, the chain icon will replace the Twitter icon.

Specifically, I checked what platforms are supported.
The checking method is simply looking at the HTML source.

If you have any of the following social accounts, I recommend registering them on GitHub (up to 4).

As of 2023-05-06, 9 social accounts seem to be supported.

Added on 2023-10-14: The npm account logo has been added and it seems to be compatible with 10 types of social accounts.

images

Below are images from social accounts other than twitter.

social1

social2

social3

twitter

Regex:

^https://(?:www\.)?twitter\.com/([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://twitter.com/test
Enter fullscreen mode Exit fullscreen mode

facebook

Regex:

^https://(?:[^.]+\.)?facebook\.com/(?:[^/?]+/?|profile\.php\?id=\d+)$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://facebook.com/test
Enter fullscreen mode Exit fullscreen mode

instagram

Regex:

^https://(www\.)?instagram\.com/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://instagram.com/test
Enter fullscreen mode Exit fullscreen mode

linkedin

Regex:

^https://(?:www\.)?linkedin\.com/(?:in|company)/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://linkedin.com/in/test
Enter fullscreen mode Exit fullscreen mode

reddit

Regex:

^https://(?:www\.)?reddit\.com/u(?:ser)?/([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://reddit.com/u/test
Enter fullscreen mode Exit fullscreen mode

twitch

Regex:

^https://(?:www\.)?twitch\.tv/[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://twitch.tv/test
Enter fullscreen mode Exit fullscreen mode

youtube

Regex:

^https://(?:www\.)?youtube\.com/(user|c)/[^/?]+/?$
^https://(?:www\.)?youtube\.com/channel/[a-zA-Z0-9_-]{24}/?$
^https://(?:www\.)?youtube\.com/@[^/?]+/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://youtube.com/user/test
Enter fullscreen mode Exit fullscreen mode

mastodon

I don't know the specific pattern, but Mastodon seems to be supported.

Test URL:

https://mastodon.social/@test
Enter fullscreen mode Exit fullscreen mode

hometown

hometown seems to be a SNS that forked mastodon.

Test URL:

https://rage.love/@test
Enter fullscreen mode Exit fullscreen mode

I created a test URL from the server list on the following site.

https://github.com/hometown-fork/hometown/wiki/Hometown-servers

The icon looks the same as the mastodon.

npm

Added on 2023-10-14.

Regex:

^https://(?:www\.)?npmjs\.com/~([^/?]+)/?$
Enter fullscreen mode Exit fullscreen mode

Test URL:

https://npmjs.com/~test
Enter fullscreen mode Exit fullscreen mode

social3

Top comments (0)