# Social Media Icons and Specific Code for Engagement

**URL:** <https://forums.realmacsoftware.com/t/social-media-icons-and-specific-code-for-engagement/51936>\
**Category:** Elements\
**Created:** [October 21, 2025, 8:36pm UTC](https://forums.realmacsoftware.com/t/social-media-icons-and-specific-code-for-engagement/51936 "2025-10-21T20:36:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\
**Post date:** [October 21, 2025, 8:36pm UTC](https://forums.realmacsoftware.com/t/social-media-icons-and-specific-code-for-engagement/51936/1 "2025-10-21T20:36:53Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/3/4307b0f6e5c2d8e5d80e75cea9751aeb50eefb1d.jpeg)

```auto
<!-- 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) -->

```