Albino Blacksheep

Share Buttons

by Steven Lerner

Style 1

Style 2

Style 3

There are share buttons for social media and share buttons for the operating system.

For social media, you will need to obtain the sharing link a particular social media service, include an encoded URL of the current page as part of that sharing URL. Make it attractive with an icon and a colourful button.

To plug into the operating system's native sharing feature, use the Web Share JavaScript API. I have included operating system detection to display the same icon the current operating system uses.

  • Apple
  • Windows
  • Android

Social media services

  • Facebook
  • X
  • WhatsApp
  • Pinterest
  • LinkedIn
  • Telegram
  • Reddit
  • Bluesky
  • Tumblr
  • Truth Social
  • GETTR
  • Gab
  • Nextdoor

Source Code

CSS

.share_buttons svg {overflow:visible;}

.share_buttons {
margin:1em 1rem;
display:flex;
gap:.5em;
flex-wrap:wrap;
justify-content:center;
list-style:none;
}
.share_buttons li {display:inline-flex;gap:.35em;align-items:center;}
.share_buttons svg, .flex_buttons i {width:1.5em;height:1.5em;}

.share_buttons a,
.share_buttons button {
display:flex;
align-items:center;
gap:.35em;
}

.share_1 a,
.share_1 button {
padding:.35em;
border-radius:.25em;
box-shadow:.0625rem .125rem .5em rgba(0, 0, 0, .1);
transition:filter .15s, transform .15s, box-shadow .15s, background .15s, color .15s;
}

.share_1 a:hover,
.share_1 button:hover {
transform: translateY(-.0625em);
box-shadow:.0625rem .125rem .5em rgba(0, 0, 0, .2);
}

.share_1 .share-button {background:var(--card);color:var(--header);}

.facebook_share {background:#1877f2;color:#fff;}
.x_share {background:#000;color:#fff;}
.whatsapp_share {background:#00e676;color:#fff;}
.pinterest_share {background:#bd081c;color:#fff;}
.nextdoor_share {background:#1b8751;color:#fff;}
.linkedin_share {background:#0a66c2;color:#fff;}
.reddit_share {background:#ff4500;color:#fff;}
.telegram_share {background:#1c93e3;color:#fff;}
.truth-social_share {background:#5448EE;color:#fff;}
.gettr_share {background:#EB0000;color:#fff;}
.gab_share {background:#21cf7a;color:#fff;}
.bluesky_share {background:#006AFF;color:#fff;}
.pinterest_share {background:#E60023;color:#fff;}
.tumblr_share {background:#001935;color:#fff}

PHP

<?php
function getUrl() {
$url = isset( $_SERVER['HTTPS'] ) && 'on' === $_SERVER['HTTPS'] ? 'https' : 'http';
$url .= '://' . $_SERVER['SERVER_NAME'];
$url .= in_array( $_SERVER['SERVER_PORT'], array('80', '443') ) ? '' : ':' . $_SERVER['SERVER_PORT'];
$url .= $_SERVER['REQUEST_URI'];
return $url;
}
$encoded_url = urlencode( getUrl() );
?>

<ul class="flex_buttons share_buttons share_1">
<li>
<a class="facebook_share" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $encoded_url; ?>" target="_blank">Share
</ul>