Social Media Icons and Specific Code for Engagement

Elements
1

I was using simple links to the ‘homepage’ of the social media sites not getting much sharing…

Went through and customized every social media bar to submit my site to the specific social media platform - pretty cool! Customized the color for each and used font awesome icons…

You can edit this code, but recommend you take this - load it to chat GPT and customize for you..

Screenshot 2025-10-21 at 3.29.42 PM
Screenshot 2025-10-21 at 3.29.42 PM1540×1054 299 KB

<!-- BEGIN: Malubar.com Social Share Icons (Book CTA Version) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<div class="social-share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmalubar.com&quote=Enter%20the%20world%20of%20The%20Last%20Spark%20of%20Malubar%20%E2%80%93%20a%20sci-fi%20epic%20where%20memory%20is%20a%20weapon."
     aria-label="Share on Facebook" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-facebook-f" aria-hidden="true"></i>
  </a>

  <a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fmalubar.com&text=Discover%20The%20Last%20Spark%20of%20Malubar%20%E2%80%93%20Book%20I%20of%20The%20Last%20Spark%20Trilogy%20by%20Michael%20Droste."
     aria-label="Share on X" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-x-twitter" aria-hidden="true"></i>
  </a>

  <a href="https://www.instagram.com/thelastsparktrilogy"
     aria-label="Instagram" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-instagram" aria-hidden="true"></i>
  </a>

  <a href="https://www.threads.net/intent/post?text=Step%20into%20the%20Grid.%20Read%20The%20Last%20Spark%20of%20Malubar%20at%20https%3A%2F%2Fmalubar.com"
     aria-label="Share on Threads" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-threads" aria-hidden="true"></i>
  </a>

  <a href="https://api.whatsapp.com/send?text=Experience%20The%20Last%20Spark%20of%20Malubar%20%E2%80%93%20a%20haunting%20sci-fi%20novel%20by%20Michael%20Droste%20https%3A%2F%2Fmalubar.com"
     aria-label="Share on WhatsApp" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-whatsapp" aria-hidden="true"></i>
  </a>

  <a href="https://www.reddit.com/submit?url=https%3A%2F%2Fmalubar.com&title=The%20Last%20Spark%20of%20Malubar%20%E2%80%93%20Sci-Fi%20Novel%20by%20Michael%20Droste"
     aria-label="Share on Reddit" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-reddit-alien" aria-hidden="true"></i>
  </a>

  <a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fmalubar.com"
     aria-label="Share on LinkedIn" target="_blank" rel="noopener noreferrer">
     <i class="fab fa-linkedin-in" aria-hidden="true"></i>
  </a>
</div>

<style>
  :root{
    --malubar-rose: #a4083c;   /* matches menu text */
    --malubar-rose-dk: #A64A4E;/* hover/active */
  }

  .social-share {
    display: flex;
    justify-content: flex-end;   /* align right like your screenshot */
    gap: 0.8rem;
    margin: 1.5rem 0;
  }

  .social-share a {
    width: 30px;
    height: 30px;
    background: var(--malubar-rose);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
  }

  .social-share a:hover,
  .social-share a:focus-visible {
    background: var(--malubar-rose-dk);
    transform: scale(1.12);
    outline: none;
  }

  .social-share i {
    font-size: 22px;
    line-height: 1;
  }

  @media (max-width: 500px) {
    .social-share { justify-content: center; }
    .social-share a { width: 44px; height: 44px; }
    .social-share i { font-size: 20px; }
  }
</style>
<!-- END: Malubar.com Social Share Icons (Book CTA Version) -->