jekyll-social-share

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

Default Styling

The jasonchance.com site includes a complete SCSS stylesheet for all 18 services with brand colors. You can reference or customize it:

// Outline state (default)
.social-share__item--linkedin .social-share__link { color: #0a66c2; }
.social-share__item--facebook .social-share__link { color: #1877f2; }
.social-share__item--x .social-share__link { color: #000; }
.social-share__item--bluesky .social-share__link { color: #0085ff; }
.social-share__item--mastodon .social-share__link { color: #6364ff; }
.social-share__item--whatsapp .social-share__link { color: #25d366; }
.social-share__item--telegram .social-share__link { color: #0088cc; }
.social-share__item--email .social-share__link { color: #555; }
.social-share__item--copy .social-share__link { color: #888; }
.social-share__item--hackernews .social-share__link { color: #ff6600; }
.social-share__item--pinterest .social-share__link { color: #e60023; }
.social-share__item--pocket .social-share__link { color: #ef4056; }
.social-share__item--tumblr .social-share__link { color: #36465d; }
.social-share__item--flipboard .social-share__link { color: #e12828; }
.social-share__item--line .social-share__link { color: #00b900; }
.social-share__item--print .social-share__link { color: #666; }
.social-share__item--reddit .social-share__link { color: #ff4500; }
.social-share__item--threads .social-share__link { color: #000; }

// Filled state (hover/focus)
.social-share__item--linkedin .social-share__link:hover,
.social-share__item--linkedin .social-share__link:focus-visible {
  background: #0a66c2;
  color: #fff;
}
// ... (repeat for all 18 services)

Dark Mode

X and Threads use near-black brand colors (#000/#111) that are invisible in dark mode. Add a prefers-color-scheme: dark block to lighten them and any other low-contrast services:

@media (prefers-color-scheme: dark) {
  .social-share__item--x       .social-share__link { color: #e1e8ed; &:hover, &:focus-visible { background: #e1e8ed; color: #111 !important; } }
  .social-share__item--threads .social-share__link { color: #d0d0d0; &:hover, &:focus-visible { background: #d0d0d0; color: #111 !important; } }
  .social-share__item--email   .social-share__link { color: #ccc;    &:hover, &:focus-visible { background: #ccc;    color: #111 !important; } }
  .social-share__item--copy    .social-share__link { color: #999;    &:hover, &:focus-visible { background: #999;    color: #111 !important; } }
  .social-share__item--tumblr  .social-share__link { color: #8899aa; &:hover, &:focus-visible { background: #8899aa; color: #fff !important; } }
  .social-share__item--print   .social-share__link { color: #999;    &:hover, &:focus-visible { background: #999;    color: #111 !important; } }
}

Custom Styling

To customize colors, override the CSS per-service:

// Use your own colors
.social-share__item--linkedin .social-share__link { color: #my-blue; }
.social-share__item--linkedin .social-share__link:hover {
  background: #my-blue;
  color: #fff;
}

// Remove hover effect
.social-share__item--linkedin .social-share__link:hover { background: transparent; }

// Add border outline
.social-share__item--linkedin .social-share__link { border: 2px solid currentColor; }

Minimal example (simple flex layout with no colors):

.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