28 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/social-patterns.json.
A horizontal row of social platform icons rendered as plain anchor links. Each icon is an inline SVG linking to the corresponding social profile. No third-party JavaScript is loaded — the browser only navigates when the user clicks. Commonly placed in the site footer, about page, or contact section. Popularized by every modern SaaS marketing site, from Stripe to Linear.
Larger cards displaying the platform name, handle/username, and icon for each social account. Used in "Connect with us" or "Follow us" sections where more context than a bare icon is needed. Optionally shows a follower count fetched at build time (never client-side). Each card is a single anchor link to the profile page.
Social profile links displayed in article or blog post bylines. Links the author name or avatar to their social profile. Used to establish authorship and allow readers to follow the author. Commonly paired with Schema.org Person markup and rel="author" for search engine attribution.
A fixed-position vertical strip of social icons along the left or right edge of the viewport. Stays visible while scrolling long content pages. Desktop only — hidden on mobile to preserve screen real estate. Icons are plain anchor links with no tracking scripts. Common on blogs, documentation sites, and content-heavy marketing pages.
A team member or founder card displaying photo, name, role, short bio, and a row of social icon links. Used on about/team pages and speaker profiles. Each social icon is a plain anchor link. No third-party widgets or embeds — entirely static HTML.
Uses the browser's built-in navigator.share() API to trigger the OS-native share sheet. Supports sharing to any installed app (social media, messaging, email, notes). Progressive enhancement: the share button only renders if the API is available, with a fallback to manual share links. Zero third-party code — the browser handles everything.
Plain anchor links using each platform's share URL scheme. No JavaScript or third-party SDK required. The link navigates the user to the platform's share page with pre-populated title and URL. Works for Twitter/X, LinkedIn, Facebook, Reddit, Hacker News, WhatsApp, Telegram, and email. The simplest and most privacy-respecting share pattern.
A privacy-first share pattern developed by the German tech publisher c't/Heise. Shows a static, non-tracking preview button as the first click (consent). Only loads the actual platform share widget or navigates to the share URL on the second click (action). No third-party scripts are loaded until the user explicitly opts in. Compliant with strict European privacy regulations.
A "Copy link" button that copies the current page URL to the clipboard using the Clipboard API. Shows a brief confirmation (checkmark icon or "Copied!" text). Platform-independent, works everywhere, and is the most privacy-respecting share option since no data leaves the browser. Should be included as the first or fallback option in any share button group.
A mailto: link that opens the user's default email client with the page title as subject and URL + excerpt as body. Zero tracking, universal compatibility, works on all devices. Often overlooked but remains one of the most-used sharing methods, especially in professional and B2B contexts.
Shows a visual preview of how the shared post will appear on social platforms before the user clicks share. Displays the OG image, title, and description as a mock social card. Builds user confidence by showing exactly what recipients will see. Data is sourced entirely from the page's own meta tags — no external API calls.
Shows a static screenshot or placeholder image of the social content instead of the actual embed. The real iframe or embed script loads only when the user explicitly clicks. Massively improves page load performance (embeds can add 500KB-2MB of JS) and blocks all tracking until consent. Works for Twitter/X posts, YouTube videos, Instagram posts, TikTok, and any iframe-based embed.
Uses privacy-enhanced embed URLs that strip tracking cookies and scripts. YouTube's youtube-nocookie.com domain is the canonical example — it serves video without setting cookies until the user plays. For Twitter/X, use a static screenshot + link instead of the widget JS. For other platforms, self-hosted proxies or server-rendered snapshots replace tracking-heavy embeds.
Renders social media content as a styled HTML <blockquote> with attribution, instead of using an iframe or embed script. Zero JavaScript, zero tracking, zero external requests. The content is static text with a link to the original post. Accessible, fast, and works everywhere. This is the ideal fallback for any social embed and the default for content that does not require interactivity (tweets, quotes, text posts).
For pages with multiple social embeds, shows a single consent banner instead of individual click-to-load buttons on each embed. The user grants consent once, and all embeds on the page load simultaneously. Respects cookie/consent preferences and integrates with the site's cookie consent manager. Reduces friction for content-heavy pages with many embeds while maintaining privacy compliance.
Fetches social media post data at build time (via API or scraping) and renders it as static HTML. The card looks like a social media post (avatar, name, text, images, timestamp) but is entirely self-hosted with zero runtime external requests. Ideal for documentation, case studies, and testimonial pages where embed content is known ahead of time and does not need to be live.
Fetches the latest N posts from a social media API at build time and renders them as static HTML cards. The feed only refreshes when the site is rebuilt/deployed. No client-side API calls, no real-time updates, no tracking scripts. Fast, private, and reliable. Ideal for homepages, sidebars, and marketing pages where freshness within hours is acceptable.
Consumes an RSS or Atom feed instead of a proprietary platform API. Platform-agnostic — works with Mastodon, Bluesky, WordPress, Ghost, Medium, Substack, YouTube channels, and any service that publishes RSS. Rendered server-side at build time. No API keys required for most feeds, making this the most maintainable feed pattern.
Combines a build-time static snapshot with an optional client-side "Load latest" button. The page loads instantly with pre-rendered content (no loading spinners). Users who want fresher data can explicitly request it. No auto-polling, no background fetches. The client refresh is user-initiated only, keeping the pattern privacy-respecting.
A curated collection of social media mentions, reviews, or endorsements displayed as testimonial cards. Content is manually curated or semi-automatically fetched and approved. No live connection to any platform. Attribution links point to the original post. Used on landing pages, about pages, and case study sections for social proof.
Displays follower counts, GitHub stars, download numbers, or user counts as formatted static numbers. Values are fetched at build time and baked into the HTML. No real-time counter widgets, no client-side API calls, no animated counting. Stale-while-revalidate is acceptable — exact real-time counts add complexity without meaningful UX benefit.
A compact badge showing the GitHub star count for a repository. Links to the repo. Uses either a shields.io badge image (build-time snapshot) or a static count rendered in HTML. Avoids the official GitHub star button widget which loads external JS and tracks users.
A rotating display of customer testimonials or social media endorsements. Content is stored in a local data file — never fetched from social platforms at runtime. Shows one testimonial at a time with prev/next navigation and auto-rotation (with pause on hover/focus). Used in hero sections and above-the-fold social proof areas where space is limited.
"Join 5,000+ developers" — a simple banner or inline element displaying the user/customer count. Placed above the fold, near primary CTAs, or in the site header. The count is updated manually or at build time. No live counter widget. Combined with a call-to-action, this is one of the highest-impact social proof patterns for conversion.
Bidirectional identity verification between your website and social profiles using the rel="me" HTML attribute. When your site links to a social profile with rel="me" AND that profile links back to your site, platforms like Mastodon display a verified checkmark. This is the IndieWeb standard for decentralized identity verification — no central authority required.
Lists all official social media profile URLs in the site's structured data (JSON-LD) using the Schema.org sameAs property. Search engines use this to connect your website identity with your social accounts, enabling Knowledge Panel population and entity disambiguation. AI agents also parse sameAs to identify official channels.
Specialized Open Graph meta tags for personal or team profile pages. Uses og:type="profile" with additional profile-specific properties: profile:first_name, profile:last_name, profile:username, and profile:gender. When a profile page is shared on social media, platforms display it with a person-specific card format rather than a generic article card.
A .well-known/webfinger endpoint that enables ActivityPub/fediverse discovery from your domain. Users on Mastodon, Pixelfed, or other fediverse platforms can follow @you@yourdomain.com, which resolves to your actual fediverse account via the Webfinger protocol. Establishes your domain as your decentralized identity anchor.