Social Media Follow Buttons Widget
Point visitors to your Instagram, Facebook, TikTok, YouTube, LinkedIn, Bluesky, Mastodon and 40 other profiles with crisp brand-coloured follow buttons. Paste one link per line and pick a look - a row of round icons, named pills, buttons that show your @handle, a Follow us card, a list or a grid of tiles - and the buttons draw on your page in your own font without loading any network's code.
Live preview
Under the widget on your page: Powered by A2Z Tools
Embed code
<div data-a2z-kit="social-links-widget" data-profiles="instagram | https://www.instagram.com/example facebook | https://www.facebook.com/example tiktok | https://www.tiktok.com/@example youtube | https://www.youtube.com/@example pinterest | https://www.pinterest.com/example website | https://riverside-cafe.example email | [email protected]"></div> <script async src="https://a2z.tools/embed/kit.js" referrerpolicy="no-referrer"></script>
One small script from A2Z draws the component on your page inside its own Shadow DOM. It loads no social-network or tracking scripts and sets no cookies. How the A2Z kit works.
Works with
How it works
Each line is a profile: instagram | https://www.instagram.com/riverside, a label and a link such as Our menu | https://instagram.com/riverside_menu, the older reversed form https://x.com/riverside | X, or just the address. The network is decided by the address's host name alone - www., m. and country domains are understood, instagram.com.evil.example or evil-instagram.com stay plain websites with a globe, and a label can never borrow another network's logo. Bare domains gain https://, an email address becomes a mailto: link and a phone number a tel: link. Up to 20 profiles are kept, duplicates and unsafe schemes (javascript:, data:, protocol-relative) are dropped, and the builder preview tells you how many lines were skipped. The kit then draws the buttons inside a Shadow DOM on your page: brand glyphs in each network's colour (or monochrome, soft, outline, A2Z gradient or your accent), a spoken name like Riverside Cafe on Instagram (opens in a new tab) on every icon-only button, and rel="noopener me" on outbound links. Existing iframe embeds of the old Social Links widget keep working: style=icons, labels and buttons, size small/medium/large and shape round are read as the matching new options.
Method
- Network = first registry entry whose host list matches the URL host (after dropping www., m., mobile., open.) exactly or as a subdomain; otherwise website
- Mastodon (no single host) only for an /@name path on a mastodon/mstdn host, or when the line's label says mastodon
- Line formats: network | URL, Label | URL, URL | Label, URL; email -> mailto:, phone digits -> tel:, max 200 lines read, 20 profiles kept
- Links: target=_blank rel="noopener me" (rel=me can be switched off; nofollow is opt-in); mailto: and tel: open in place
Worked examples
A label that tries to borrow a logo
Inputs: instagram | https://instagram.com.evil.example/u
Result: A Website button with a globe, spoken as Website: instagram.com.evil.example
Only the host name chooses the network, so the instagram label is ignored for the icon.
Old iframe preset
Inputs: ?v_style=buttons&v_size=large&v_shape=round
Result: Buttons layout, large size, circular icon chips
Legacy values are mapped to the new layout, size and shape options, so existing embeds keep their intent.
Email, phone and a custom label
Inputs: [email protected]; +1 555 010 0123; Our menu | https://www.instagram.com/riverside_menu
Result: mailto:[email protected]; tel:+15550100123; Instagram button labelled Our menu
Email and phone open in place; the custom label is shown and the real network is announced after it.
Too many lines
Inputs: 240 lines of GitHub links
Result: 20 buttons; the preview reports 180 lines skipped
Only the first 200 lines are read and 20 profiles kept, so a pasted export cannot flood the page.
Limitations
- Links only - no follower counts, follow-in-place buttons or latest posts, which would need each network's scripts, keys or cookies.
- rel=me inside a script-drawn component is not seen by Mastodon's verifier; add a plain rel=me link to your page template for the verified tick.
- Networks outside the registry appear as a Website button with the host name.
- Brand glyphs follow each network's mark; check a network's brand rules if you restyle them heavily with your accent colour.
Where publishers use it
- A cafe or salon home page showing Instagram, TikTok and Facebook as a centred row of brand-coloured icons under the opening hours
- A freelancer's About page using the Buttons layout so visitors see each @handle before they click
- A podcast site with a Follow us card listing YouTube, Spotify, Apple Podcasts and an RSS feed
- An open-source project linking GitHub, Discord, Mastodon and Bluesky with rel=me on the profiles it owns
- A site that already embedded the old Social Links iframe and wants the new look without changing its code
Questions
Do follow buttons slow down my site or track visitors?
No network code runs. The kit script, the network list and only the icon pack your profiles need come from A2Z, and each button is an ordinary link. Instagram or TikTok learn about a visitor only after the visitor clicks through to them, exactly as if they had typed the address.
Why can a label not change the icon?
Because a label is just text you typed. If Instagram | https://example.com could show the Instagram logo, anyone editing your embed code - or a copied snippet - could dress a phishing page as a trusted network. The icon follows the host name, and a label that is not a network's own name (Our menu) is shown as written, with the real network spoken after it.
What does rel="me" do, and why is nofollow off?
rel=me says the linked profile belongs to the same person or business as this page; it is the IndieWeb convention Mastodon uses for its green verified-link tick. Mastodon's checker reads the HTML your server sends, not links drawn later by a script, so for verification add one plain <a rel="me"> link to your template as well - the attribute here keeps the rendered page consistent. nofollow is meant for links you do not vouch for (paid or user-generated); these are your own profiles, so it is off unless you switch it on.
Can it show my follower counts or latest posts?
No. Live counts need each network's API keys, quotas and review, or scraping that breaks their terms, and a number that could not be checked would be guesswork. The widget links to your profiles and leaves the counting to the networks.
Will my old Social Links iframe change?
It keeps its address and height and now renders with the new brand icons. The old options are translated: icons becomes the icon row, labels the named pills, buttons the handle buttons; small, medium and large map to the new sizes and round to circle. Profiles, heading and alignment are read as before.
Which link formats are recognised?
Full profile links, short domains (youtu.be, lnkd.in, pin.it, fb.me, t.me, wa.me, redd.it, discord.gg), bare domains without https://, email addresses, phone numbers with a country code, Mastodon /@name pages and feed addresses ending in rss, feed, atom or .xml. Anything else becomes a Website button with a globe.
Sources
- rel-me - microformats.org . rel="me" marks a link to another representation of the same person or organisation
- Profile verification - Mastodon documentation . Verification looks for a rel="me" link back to the profile in the page's HTML
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 Media Follow Buttons https://a2z.tools/embed/social-links-widget
<a href="https://a2z.tools/embed/social-links-widget">A2Z Tools Social Media Follow Buttons</a>
[A2Z Tools Social Media Follow Buttons](https://a2z.tools/embed/social-links-widget)
Social Media Follow Buttons by A2Z Tools - https://a2z.tools/embed/social-links-widget
Related widgets
-
Social icons for your site footer that take on the footer's own colours and light up in brand colour on hover.
-
A slim strip of profile icons pinned to the side of the screen that becomes a bottom row on phones.
-
A polished profile card - photo, name, role, short bio, social icons and one call to action.
-
Share buttons for 26 networks - inline, floating, mobile bar or one Share button. No social scripts or cookies.
-
A mobile-first profile with avatar, bio, featured link buttons and social badges in soft, bold or outline style.
-
A digital business card with call, email, website and directions buttons plus a .vcf contact download.
