Adding a Blog Post Sharing Overlay with Social Icons in Jekyll

Adding a blog post sharing overlay with social icons can significantly increase the visibility of your content. In Jekyll, a static site generator, you can implement this feature with a combination of HTML, CSS, and a little JavaScript. This guide will walk you through the process step-by-step.

Understanding the Sharing Overlay

The sharing overlay appears when users hover over or click a specific area of your blog post. It displays social media icons that link to sharing options, making it easy for readers to share your content across platforms like Facebook, Twitter, and LinkedIn.

Steps to Add the Sharing Overlay

1. Create the HTML Structure

Insert the following HTML snippet into your Jekyll post layout where you want the overlay to appear. Make sure to replace {{ page.url }} with your post URL if necessary.

<div class="share-overlay">
  <div class="share-trigger">Share</div>
  <div class="social-icons">
    <a href="https://facebook.com/sharer/sharer.php?u={{ page.url }}" target="_blank" aria-label="Share on Facebook">🌐</a>
    <a href="https://twitter.com/intent/tweet?url={{ page.url }}" target="_blank" aria-label="Share on Twitter">🐦</a>
    <a href="https://linkedin.com/shareArticle?url={{ page.url }}" target="_blank" aria-label="Share on LinkedIn">💼</a>
  </div>
</div>

2. Add CSS for Styling and Positioning

Include the following CSS in your stylesheet to style the overlay and make it appear on hover or click.

.share-overlay {
  position: relative;
  display: inline-block;
}

.share-trigger {
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.social-icons {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: #fff;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  gap: 8px;
  display: flex;
}

.share-overlay:hover .social-icons {
  display: flex;
}

3. Add JavaScript for Click Toggle (Optional)

If you prefer the overlay to toggle on click instead of hover, add this JavaScript snippet to your site:

<script>
document.querySelectorAll('.share-trigger').forEach(function(trigger) {
  trigger.addEventListener('click', function() {
    const icons = this.nextElementSibling;
    if (icons.style.display === 'flex') {
      icons.style.display = 'none';
    } else {
      icons.style.display = 'flex';
    }
  });
});
</script>

Final Tips

Customize the social icons with your preferred icons or images. You can also style the overlay to match your website’s theme. Remember to test the sharing links to ensure they work correctly.

Implementing a sharing overlay can boost engagement and help your content reach a wider audience. With a few simple steps, you can add an attractive and functional sharing feature to your Jekyll blog.