How to Add Static Share Buttons to a Jekyll Blog

Jekyll does not need a plugin or a client-side library to add social sharing links to a post. You can build ordinary links to each service's share page with Liquid, then place them in your post layout. This keeps the page lightweight and avoids loading a share-count script.

These links are still requests to third-party services when a visitor clicks them. The example below opens the service in a new tab and does not load its scripts or send a share request just because the post was viewed.

Configure the site's public URL

Jekyll's absolute_url filter combines a page path with the site's configured URL and base path. Set url to the public origin in _config.yml; leave baseurl empty for a site hosted at the domain root, or set it to the project path when needed:

url: "https://example.com"
baseurl: ""

Replace example.com with your site's canonical host. Use the same HTTPS URL that appears in your published links. See Jekyll's configuration options for url and baseurl.

Create a Liquid include

Create _includes/share-buttons.html. Jekyll's absolute_url and uri_escape filters build a full page URL and encode the title and URL as query-parameter values before they are added to a service URL. This matters when a title contains spaces, punctuation, or characters such as &.

{% assign encoded_page_url = page.url | absolute_url | uri_escape %}
{% assign encoded_page_title = page.title | uri_escape %}

{% assign x_share_url = "https://twitter.com/intent/tweet?text=" | append: encoded_page_title | append: "&url=" | append: encoded_page_url %}
{% assign facebook_share_url = "https://www.facebook.com/sharer/sharer.php?u=" | append: encoded_page_url %}
{% assign linkedin_share_url = "https://www.linkedin.com/sharing/share-offsite/?url=" | append: encoded_page_url %}
{% assign reddit_share_url = "https://www.reddit.com/submit?url=" | append: encoded_page_url | append: "&title=" | append: encoded_page_title %}
{% assign tumblr_share_url = "https://www.tumblr.com/widgets/share/tool?canonicalUrl=" | append: encoded_page_url | append: "&title=" | append: encoded_page_title %}

{% if page.image %}
  {% assign encoded_image_url = page.image | absolute_url | uri_escape %}
  {% assign pinterest_share_url = "https://www.pinterest.com/pin/create/button/?url=" | append: encoded_page_url | append: "&media=" | append: encoded_image_url | append: "&description=" | append: encoded_page_title %}
{% endif %}

<nav class="share-page" aria-label="Share this post">
  <a href="{{ x_share_url }}" target="_blank" rel="noopener nofollow">Share on X</a>
  <a href="{{ facebook_share_url }}" target="_blank" rel="noopener nofollow">Share on Facebook</a>
  <a href="{{ linkedin_share_url }}" target="_blank" rel="noopener nofollow">Share on LinkedIn</a>
  <a href="{{ reddit_share_url }}" target="_blank" rel="noopener nofollow">Share on Reddit</a>
  <a href="{{ tumblr_share_url }}" target="_blank" rel="noopener nofollow">Share on Tumblr</a>
  {% if page.image %}
    <a href="{{ pinterest_share_url }}" target="_blank" rel="noopener nofollow">Save on Pinterest</a>
  {% endif %}
</nav>

The X intent URL still uses the twitter.com host and currently redirects to X. Pinterest needs a public image URL, so the button appears only when the page has an image value in its front matter. If your theme uses another image field, map that field to page.image or adjust the include. The other links need only the page URL and title.

The share destination controls what it displays and which fields it uses. Check the URL format against the service before adding another network; don't assume every service accepts the same parameters. If a service ignores the title, its own dialog may still use the page's metadata.

Add the include to the post layout

In the layout used for posts, render the include after the post content:

{{ content }}
{% include share-buttons.html %}

Use a post-specific layout so these links do not appear on pages where sharing is not useful. For example, if your post layout is _layouts/post.html, put the include there after {{ content }}.

Add simple, keyboard-visible styling

The links work without CSS. To make them easier to scan and activate, add a small rule to your stylesheet and retain a visible keyboard focus indicator:

.share-page {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.5rem;
}

.share-page a {
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.share-page a:hover {
  text-decoration: underline;
}

.share-page a:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

Check the final colors against your site's background and text. Keep the links usable at high zoom and on narrow screens; the flex container wraps instead of forcing a horizontal scroll.

Check the generated page

Build the site and inspect a post's generated HTML before deploying. Confirm that each href contains the complete HTTPS canonical page URL, that spaces and special characters in the title are encoded, and that the Pinterest link is absent when no image is configured. Test each share dialog in a browser and check the page's Open Graph metadata if a service shows an unexpected title or preview.

Because these are plain links, they do not display share counts. Avoid adding a count script unless you have a specific need and have reviewed its privacy and performance tradeoffs. You can also use a static share-button generator as a starting point, but review its generated markup and network requests before adding it to a site.

For more Jekyll setup context, see our guide to moving a site from WordPress to Jekyll, and browse these web development resources.