From 89de966e7aed0fb0251554d90d15b429664eecde Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Thu, 22 Jan 2026 13:57:40 +0100
Subject: [PATCH] Support social accounts customization option (#3916)

---
 .changeset/fluffy-lines-type.md               |   5 +
 .../gitbook/src/components/Footer/Footer.tsx  |  18 +++
 .../src/components/Footer/SocialLink.tsx      | 104 ++++++++++++++++++
 .../components/SpaceLayout/SpaceLayout.tsx    |   2 +
 4 files changed, 129 insertions(+)
 create mode 100644 .changeset/fluffy-lines-type.md
 create mode 100644 packages/gitbook/src/components/Footer/SocialLink.tsx

diff --git a/.changeset/fluffy-lines-type.md b/.changeset/fluffy-lines-type.md
new file mode 100644
index 000000000..b7985bf74
--- /dev/null
+++ b/.changeset/fluffy-lines-type.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Support social links
diff --git a/packages/gitbook/src/components/Footer/Footer.tsx b/packages/gitbook/src/components/Footer/Footer.tsx
index e909bba3d..ab551ec54 100644
--- a/packages/gitbook/src/components/Footer/Footer.tsx
+++ b/packages/gitbook/src/components/Footer/Footer.tsx
@@ -8,6 +8,7 @@ import { tcls } from '@/lib/tailwind';
 import { ThemeToggler } from '../ThemeToggler';
 import { CONTAINER_STYLE } from '../layout';
 import { FooterLinksGroup } from './FooterLinksGroup';
+import { SocialLink } from './SocialLink';
 
 const FOOTER_COLUMNS = 4;
 
@@ -23,6 +24,8 @@ export function Footer(props: { context: GitBookSiteContext }) {
 
     const mobileOnly = !hasLogo && !hasGroups && !hasCopyright && hasThemeToggle;
 
+    const socialLinks = customization.socialAccounts.filter((account) => account.display?.footer);
+
     return (
         <footer
             id="site-footer"
@@ -137,6 +140,21 @@ export function Footer(props: { context: GitBookSiteContext }) {
                             ) : null
                         }
 
+                        {
+                            // Social Links
+                            socialLinks.length > 0 ? (
+                                <div className="col-span-full flex w-full grow items-center justify-center gap-2">
+                                    {socialLinks.map((account) => (
+                                        <SocialLink
+                                            key={`${account.platform}-${account.handle}`}
+                                            account={account}
+                                            target={customization.externalLinks.target}
+                                        />
+                                    ))}
+                                </div>
+                            ) : null
+                        }
+
                         {
                             // Legal
                             customization.footer.copyright ? (
diff --git a/packages/gitbook/src/components/Footer/SocialLink.tsx b/packages/gitbook/src/components/Footer/SocialLink.tsx
new file mode 100644
index 000000000..c64258141
--- /dev/null
+++ b/packages/gitbook/src/components/Footer/SocialLink.tsx
@@ -0,0 +1,104 @@
+import {
+    type SiteExternalLinksTarget,
+    type SiteSocialAccount,
+    SiteSocialAccountPlatform,
+} from '@gitbook/api';
+import type { IconName } from '@gitbook/icons';
+import { Button } from '../primitives';
+
+type SocialPlatformData = {
+    label: string;
+    icon: IconName;
+    /** The href to the social platform. `$handle` will be replaced with the account handle. */
+    href: string;
+};
+
+const SOCIAL_PLATFORMS: Record<SiteSocialAccountPlatform, SocialPlatformData> = {
+    [SiteSocialAccountPlatform.Twitter]: {
+        label: 'X/Twitter',
+        icon: 'x-twitter',
+        href: 'https://x.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Instagram]: {
+        label: 'Instagram',
+        icon: 'instagram',
+        href: 'https://instagram.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Facebook]: {
+        label: 'Facebook',
+        icon: 'facebook',
+        href: 'https://facebook.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Linkedin]: {
+        label: 'LinkedIn',
+        icon: 'linkedin',
+        href: 'https://linkedin.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Github]: {
+        label: 'GitHub',
+        icon: 'github',
+        href: 'https://github.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Discord]: {
+        label: 'Discord',
+        icon: 'discord',
+        href: 'https://discord.com/$handle',
+    },
+    [SiteSocialAccountPlatform.Slack]: {
+        label: 'Slack',
+        icon: 'slack',
+        href: 'https://join.slack.com/t/$handle',
+    },
+    [SiteSocialAccountPlatform.Youtube]: {
+        label: 'YouTube',
+        icon: 'youtube',
+        href: 'https://youtube.com/@$handle',
+    },
+    [SiteSocialAccountPlatform.Tiktok]: {
+        label: 'TikTok',
+        icon: 'tiktok',
+        href: 'https://tiktok.com/@$handle',
+    },
+    [SiteSocialAccountPlatform.Reddit]: {
+        label: 'Reddit',
+        icon: 'reddit',
+        href: 'https://reddit.com/@$handle',
+    },
+    [SiteSocialAccountPlatform.Bluesky]: {
+        label: 'Bluesky',
+        icon: 'bluesky',
+        href: 'https://bsky.app/profile/$handle',
+    },
+    [SiteSocialAccountPlatform.Mastodon]: {
+        label: 'Mastodon',
+        icon: 'mastodon',
+        href: 'https://mastodon.social/@$handle',
+    },
+    [SiteSocialAccountPlatform.Threads]: {
+        label: 'Threads',
+        icon: 'threads',
+        href: 'https://threads.net/@$handle',
+    },
+    [SiteSocialAccountPlatform.Medium]: {
+        label: 'Medium',
+        icon: 'medium',
+        href: 'https://medium.com/@$handle',
+    },
+};
+
+export function SocialLink(props: { account: SiteSocialAccount; target: SiteExternalLinksTarget }) {
+    const { account, target } = props;
+    const platform = SOCIAL_PLATFORMS[account.platform];
+
+    return (
+        <Button
+            iconOnly
+            label={platform.label}
+            href={platform.href.replace('$handle', account.handle)}
+            icon={platform.icon}
+            variant="blank"
+            size="large"
+            target={target}
+        />
+    );
+}
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index 5a2abb59c..19d8cd2c5 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -105,11 +105,13 @@ export function SpaceLayout(props: SpaceLayoutProps) {
 
     const withSections = Boolean(visibleSections && visibleSections.list.length > 1);
     const variants = categorizeVariants(context);
+    const socialLinks = customization.socialAccounts.filter((account) => account.display?.footer);
 
     const withFooter =
         customization.themes.toggeable ||
         customization.footer.copyright ||
         customization.footer.logo ||
+        socialLinks.length > 0 ||
         customization.footer.groups?.length;
 
     return (