February 12, 2016
Customized Social Media Buttons (and email)
by Jamie Johnson
What if one wants to share his or her page with the masses using social media or email? There are plenty of options out there. Facebook and Twitter are typical avenues for sharing, and email is important, too. One could go to https://developers.facebook.com/docs/plugins/share-button for a Facebook button and https://about.twitter.com/resources/buttons for a Twitter button and set up a simple mailto: link. However, there are some limitations by way of customization. For example, what if I don't want the typical Facebook or Twitter buttons offered and what if I want to pre-populate the email using the client software? Here is my solution:
✉ EmailPut this puppy on f!
Be a Twit and tweet this!
When considering Facebook, make sure to set your open graph (og) meta data properly. For example, here's what I put in this page in the <head> section:
<meta property="og:title" content="Customized Social Media Buttons (and email) by Jamie Johnson" />
<meta property="og:description" content="Want to customize social media buttons (and email) instead of going with the defaults for Facebook and Twitter?" />
<meta property="og:image" content="http://tech.beacondeacon.com/socmediabuttons.jpg" />
<meta property="og:url" content="http://tech.beacondeacon.com/customized-social-media-buttons.html" />
Now, here's the code that makes it work:
<style>
a.share-facebook {
color: white !important;
display: inline-block;
cursor: pointer;
font-family: consolas,verdana;
background: #3366cc;
border-radius: 2px;
padding: 2px;
text-decoration: none;
}
a.share-facebook span {
color: #3366cc !important;
background: white;
font-weight: bold;
padding-right: 0.5em;
padding-left: 0.5em;
border-radius: 2px;
}
a.share-email {
text-decoration: none;
font-size: 25px;
color: black !important;
font-weight: normal;
}
a.share-twitter {
background: #1da1f2;
color: white !important;
font-weight: bold;
border-radius: 2px;
padding: 2px;
}
a.share-facebook:hover, a.share-email:hover, a.share-twitter:hover { text-decoration: none !important; }
</style>
<a class="share-email" href="#emailshare" onclick="location.href='mailto:?subject='+document.title+'&body=I wanted to share this page with you: %0a%0a'+window.location.toString().replace('#emailshare','')" title="Email this">✉ Email</a>
<br /><br />
<a class="share-facebook" href="#fbshare" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+window.location,'fbwin','width=570,height=375,resizable=no,scrollbars=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,copyhistory=no')" title="Share on Facebook">
Put this puppy on <span>f</span>!
</a>
<br /><br />
<a class="share-twitter" href="#twshare" onclick="window.open('http://twitter.com/share?text='+document.title+'&url='+window.location,'twwin','width=570,height=375,resizable=no,scrollbars=yes,tollbar=no,location=no,diretories=no,status=no,menubar=no,copyhistory=no')" title="Share on Twitter">
Be a Twit and tweet this!
</a>
Granted, if you are a designer, you could dispense with some of the CSS and put some awesome images in between the opening anchor <a> and closing anchor </a> tags. You might also consider forming the URLs for sharing with a server-side language. Or if you choose a client-side language such as JavaScript, then put these in functions (especially since the Facebook and Twitter calls are nearly the same).
Enjoy!