Social Links Widget Widget

List your social profiles once - one Platform | URL per line - and get a tidy row of neutral, accessible profile badges for a footer, About page or author box. Facebook, Instagram, X, LinkedIn, YouTube, TikTok, Pinterest, GitHub, Threads, Bluesky, Mastodon, Reddit, Discord, Telegram, WhatsApp and Spotify are recognised automatically.

Business & Contact Tool Runs in your browser Free · no ads

Customize your widget

Theme
Auto follows the visitor's light/dark setting.
Style
Attribution on your page
Optional and entirely your choice. The exact line is shown in the code below; it links to the tool with rel="nofollow".
More options
Starting values
One item per line. Long content is carried after the # in the embed code, so it never reaches a server.
Leave blank to use the widget's defaults. Visitors can still change every value.

Live preview

Exactly what your visitors will see

Embed code

<iframe src="https://a2z.tools/embed/w/social-links-widget" title="Social Links Widget by A2Z Tools" width="100%" height="200" style="border:0;width:100%" loading="lazy" allow="clipboard-write"></iframe>

A plain iframe. Works everywhere, including site builders that strip scripts. Adjust height if your content needs more room.

Works with

How it works

Each line is a platform name and a link separated by a pipe; a line holding only a link works too, as does the reversed order. The platform is decided by the link's host name, not the label: www.instagram.com, instagr.am and their subdomains map to Instagram, twitter.com and x.com to X, any pinterest country domain to Pinterest, while a look-alike such as instagram.com.evil.example is treated as an ordinary website. A self-hosted Mastodon server is recognised when you label it Mastodon and the path is /@name. The handle comes from the path - /company/acme on LinkedIn gives acme, /profile/acme.bsky.social on Bluesky gives @acme.bsky.social - and gains an @ on platforms that use one. A bare email address becomes a mailto: link and an unknown domain becomes a Website link with a globe. Every badge is a monochrome circle, rounded square or square with a two-letter abbreviation drawn as text - no brand artwork - and its accessible name reads like Instagram: @riversidecafe. Duplicates and unsafe links are skipped; twelve profiles at most.

Method

  • Platform = first match of the URL host (after removing www., m., mobile.) against each platform's domains, exact or as a subdomain
  • Handle = first path segment (second after in/, company/, c/, channel/, profile/, r/), with @ added for Instagram, X, TikTok, Threads, Bluesky and Mastodon

Worked examples

Mixed list

Inputs: Instagram | https://www.instagram.com/example; https://twitter.com/acme; [email protected]

Result: Instagram: @example; X: @acme; Email: [email protected]

twitter.com is shown as X; the bare email address becomes a mailto: link.

Look-alike domain

Inputs: Instagram | https://instagram.com.evil.example/u

Result: Website: instagram.com.evil.example (labelled Website, not Instagram)

The host name decides the platform, so a look-alike cannot borrow the Instagram badge.

Too many lines

Inputs: 240 lines, every third a valid GitHub link

Result: 12 badges

The runtime reads at most 200 lines and the widget shows at most 12 profiles; the builder preview reports the rest as skipped.

Limitations

  • Shows links only - no follower counts, latest posts or follow buttons, which would need each platform's own scripts and cookies.
  • Platforms outside the recognised list appear as a generic Website badge with the host name.
  • Abbreviation badges are deliberately not brand logos; if you must use official artwork, follow each platform's brand guidelines on your own page.

Where publishers use it

  • A website footer on Squarespace, Wix or Webflow that needs profile links without an icon-font plugin
  • An author or speaker bio box on a blog or conference site
  • A newsletter landing page that points readers to the same creator on several networks
  • A shop's Contact page listing Instagram, TikTok, WhatsApp and email side by side
  • Open-source project pages linking GitHub, Discord, Mastodon and Bluesky

Questions

Why letters in a circle instead of the official logos?

Platform logos are trademarks with their own usage rules, and icon fonts add weight and requests. The widget draws neutral badges - Ig, Fb, Li, Yt and so on - in your theme colours, and gives each link a full spoken name such as YouTube: @acme. The icons-plus-labels and buttons styles show the platform name in words for anyone who does not recognise an abbreviation.

Which link formats does it understand?

Full profile links (https://www.linkedin.com/company/acme), short domains (youtu.be, lnkd.in, pin.it, fb.me, t.me, wa.me, redd.it, discord.gg), bare domains without https:// and bare email addresses. Mobile links on m.facebook.com and mobile.twitter.com are treated like the desktop ones.

Can I label a link differently, for example 'Our menu on Instagram'?

Yes. If the label is not just the platform's own name it is shown as written, and the spoken name becomes Our menu on Instagram - Instagram: @acme. A label can never change which platform a link belongs to: Instagram | https://example.com still shows a Website badge.

What do the style, size and shape options do?

style=icons shows badges only (best in footers), labels adds the platform name beside each badge, buttons gives bordered tiles with the handle underneath in a grid. size is small (36 px), medium (44 px) or large (54 px); shape is round, rounded or square. Even the small badge sits inside a 40 px tall link for touch.

Do the links pass SEO value or verify my Mastodon account?

No. Search engines and Mastodon's rel=me verification read links on your own page, and these live in an A2Z iframe. For Mastodon verification add a plain <a rel="me" href="https://server/@you"> to your page template as well. The widget's links open in a new tab with rel=noopener nofollow.

Cite or recommend this tool

If you reference this tool in an article, course or documentation, these formats are ready to copy. They are optional - nothing is added to your site unless you paste it.

A2Z Tools Social Links Widget
https://a2z.tools/embed/social-links-widget

Related widgets

More Business & Contact widgets →

  • Link in Bio Page

    Business & Contact Tool New

    A mobile-first profile with avatar, bio, featured link buttons and social badges in soft, bold or outline style.

    Get code

  • Business Card Widget

    Business & Contact Tool New

    A digital business card with call, email, website and directions buttons plus a .vcf contact download.

    Get code

  • Contact Buttons

    Business & Contact Tool New

    Large Call, Text, Email, WhatsApp and custom-link tap targets in a stack, row or pill bar.

    Get code

  • Social Card Preview

    SEO & Content Tool

    Preview Facebook, LinkedIn and X link cards and generate the Open Graph meta tags.

    Get code

  • Donation Tiers Card

    Business & Contact Tool New

    A giving card with suggested amounts, an optional monthly switch and a Donate link to your own page.

    Get code

  • Team Cards

    Business & Contact Tool New

    Staff profiles with photo or initials, role, short bio and an email or LinkedIn button, grouped by department.

    Get code

Preview

CustomizeGet code