jekyll-social-share

August 22, 2026 · View on GitHub

A Jekyll plugin that renders social share buttons for 18 platforms: Bluesky, Mastodon, Facebook, Reddit, LinkedIn, X, Threads, WhatsApp, Telegram, Hacker News, Pinterest, Pocket, Tumblr, Flipboard, LINE, email, copy-link, and print. Icons are inline SVGs from Simple Icons (CC0) — no external icon library required.

Installation

Add to your Gemfile:

gem "jekyll-social-share"

Add to _config.yml:

plugins:
  - jekyll-social-share

Usage

Add the tag anywhere in your layout or post:

{% social_share %}

Override per-use

{% social_share services="bluesky,linkedin,email" %}
{% social_share title="Custom share text" %}
{% social_share label="Spread the word" %}
{% social_share icon_only="true" %}

Suppress on a specific page

Add to frontmatter:

share: false

Configuration

All options go under social_share: in _config.yml:

social_share:
  services:
    - linkedin
    - facebook
    - reddit
    - threads
    - x
    - bluesky
    - mastodon
    - whatsapp
    - telegram
    - email
    - copy
    - hackernews
    - pinterest
    - pocket
    - tumblr
    - flipboard
    - line
    - print
  mastodon_instance: "https://toot.kytta.dev"  # relay or your own instance
  label: "Share"       # section heading; set to false to hide
  icon_only: false     # show icons only, text in sr-only span
  text_only: false     # show text labels only, no SVG icons

Sort Order

The order of services in the services: array determines the order buttons appear on your site. Rearrange them to match your preference:

social_share:
  services:
    - linkedin
    - facebook
    - x
    - bluesky
    - email
    - copy

This displays buttons in exactly that order: LinkedIn, Facebook, X, Bluesky, Email, Copy.

Available services

Key	Platform	Share method
`linkedin`	LinkedIn	Share offsite
`facebook`	Facebook	Share dialog
`reddit`	Reddit	Submit link
`threads`	Threads	Post intent
`x`	X (Twitter)	Tweet intent
`bluesky`	Bluesky	Compose intent
`mastodon`	Mastodon	Via configurable relay
`whatsapp`	WhatsApp	Send to contact
`telegram`	Telegram	Send to chat
`email`	Email	mailto link
`copy`	—	Copy to clipboard
`hackernews`	Hacker News	Submit link
`pinterest`	Pinterest	Pin it
`pocket`	Pocket	Save for later
`tumblr`	Tumblr	Share to blog
`flipboard`	Flipboard	Add to Flipboard
`line`	LINE	Send message
`print`	—	Print page

Mastodon

Mastodon has no universal share URL. By default the plugin uses the toot.kytta.dev relay which prompts the user to enter their instance. Set mastodon_instance to your own instance URL to skip the picker.

Styling

The plugin outputs unstyled semantic HTML. Use the BEM classes to style it:

.social-share              — wrapper div
.social-share__label       — "Share" heading span
.social-share__list        — <ul> of buttons
.social-share__item        — <li> for each service
.social-share__item--{svc} — per-service modifier (e.g. --bluesky)
.social-share__link        — <a> or <button> element
.social-share__icon        — SVG icon wrapper
.social-share__text        — text label span
.social-share__copy        — copy-link button
.social-share__copy--copied — added briefly after successful copy

Stylesheet

The gem ships _social-share.scss — copy it to your CSS directory and import it:

@import "social-share"; // or @use, or @include_relative depending on your setup

It includes:

Full brand colors for all 18 services (light mode)
prefers-color-scheme: dark block — X, Threads, and other near-black services automatically lighten in dark mode
CSS custom properties for every color so you can override without touching the file

Customizing Colors

Every color is a CSS custom property with the brand color as its default. Override any of them on :root or a scoped selector:

:root {
  --ss-x: #444;           // lighten X in light mode
  --ss-x-dark: #f0f0f0;   // change X dark mode color
  --ss-linkedin: #005582; // use a different LinkedIn blue
}

All custom properties follow the pattern --ss-{service} (light) and --ss-{service}-dark (dark mode override).

Minimal Custom Stylesheet

If you prefer to write your own from scratch:

.social-share__list { display: flex; gap: 0.5rem; list-style: none; padding: 0; }
.social-share__link { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.75rem; border-radius: 4px; text-decoration: none; border: 1px solid #ccc; }
.social-share__icon svg { width: 1em; height: 1em; fill: currentColor; }
.social-share__link:hover { background: #f5f5f5; }

Requirements

Ruby >= 2.7
Jekyll >= 4.0