→ Anonymous
→ Social Sharing Component with Blog Post ...

Social Sharing Component with Blog Post Details

This Example is contributed by Anonymous, on 24-Mar-2025. It is responsive.

Social Links

<div class="blog-sharing-container">
  <div class="blog-details">
    <div class="blog-stats">
      <div class="stat-item">
        <span class="stat-icon">👁️</span>
        <span class="stat-value">1.2k</span>
        <span class="stat-label">Views</span>
      </div>
      <div class="stat-item">
        <span class="stat-icon">💬</span>
        <span class="stat-value">24</span>
        <span class="stat-label">Comments</span>
      </div>
      <div class="stat-item">
        <span class="stat-icon">⏱️</span>
        <span class="stat-value">5 min</span>
        <span class="stat-label">Read</span>
      </div>
    </div>
    <div class="blog-meta">
      <span class="publish-date">Published: May 12, 2023</span>
      <span class="category">Web Development</span>
    </div>
  </div>
  
  <div class="sharing-section">
    <p class="share-text">Share this article:</p>
    <div class="share-buttons">
      <button class="share-btn twitter">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
        </svg>
      </button>
      <button class="share-btn facebook">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
        </svg>
      </button>
      <button class="share-btn linkedin">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
        </svg>
      </button>
      <button class="share-btn pinterest">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 0c-6.627 0-12 5.372-12 12 0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738.098.119.112.224.083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146 1.124.347 2.317.535 3.554.535 6.627 0 12-5.373 12-12 0-6.628-5.373-12-12-12z" />
        </svg>
      </button>
      <button class="share-btn email">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z" />
        </svg>
      </button>
    </div>
  </div>
  
  <div class="copy-link-section">
    <input type="text" readonly class="link-input" value="https://yourblog.com/post-title-slug" />
    <button class="copy-link-btn">Copy Link</button>
  </div>
</div>

Related Examples

Social Media Share Buttons
A collection of social media share buttons allowing visitors to easily share your content across major platforms like Facebook, Twitter, LinkedIn, and Pinterest.

Author:
Marcus Thornton

2 months ago
Article Card

Author:
Anonymous

2 months ago
Social Share Icons for Websites
A collection of social media share buttons to help visitors share your content across popular platforms including Facebook, Twitter, LinkedIn, and more.

Author:
Maya Johnson

2 months ago
Elegant Dark Mode Blog Card Component

Author:
Jorrit

3 months ago
Social Media Icons Design

Author:
Anonymous

2 months ago
Modern Flexible User Profile Card
A clean and flexible user profile card with avatar, user information, and social stats designed with a modern aesthetic and responsive layout.

Author:
Anonymous

3 months ago
Social Media Showcase with Counters
A modern social media sharing component featuring animated buttons, engagement metrics, and responsive design for easy integration into any website.

Author:
Alex Morgan

3 months ago
Profile Card with Social Media Links

Author:
Anonymous

3 months ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

4 months ago
Social Media Icon Buttons with Animated Tooltips
A set of social media icon buttons for Facebook, Twitter, and Instagram with platform name tooltips that appear on hover. Features smooth transitions, scale effects, and rounded corners for a polished look.

Author:
Marcus Hendricks

2 months ago
Social Media Icon Links

Author:
Eliza Stone

4 months ago
Interactive Hover Effect Navigation Links
A modern, animated list of links with smooth hover effects perfect for navigation menus, resource pages, or sidebar components.

Author:
Alexandra Sinclair

3 months ago

Didn't find component you were looking for?

Search from 500+ components