How to Design Custom Share Buttons

If you have designed any website in the 21th century you must have integrated a sharing area. If you want anybody to hear about what you are building, you have to give the possibility of sharing content. Luckily, it is very easy to do that, and more so, do it with style!

Many social networks offer pre-built sharing icons, like Twitter, Facebook,Google+, Linkedin, Pinterest. They are easy to use, but they leave you with a style which is not always the best one. If you find yourself in the situation in which you want more customisation it’s better to get back to square one and style the sharing links.To get started you need a link, a title and the actionable area(can be text, icons, buttons, etc).

To create the link that redirects to the sharing page, depending on the social media, you have the following templates:

Twitter

"https://twitter.com/share?source=tweetbutton&text=" + [title] + "&url=" + [url]

Facebook

"https://www.facebook.com/sharer.php?u=" + [url]

Google+

"https://plus.google.com/share?url=" + [url]

Linkedin

"http://www.linkedin.com/shareArticle?mini=true&url="+ [url] +"&title="+ [title]

Pinterest

"https://pinterest.com/pin/create/button/?url="+ [url] +"&media="+ [photo] +"&description="+ [title]

Mail

"mailto:example@example.com"

So, let’s take Creative Tim as an example and show how you could create the custom share buttons. For this example, the title will be ‘CreativeTim’, the url ‘http://www.creative-tim.com/' and for the photo we will take the Get Shit Done Kit Photo: ‘http://s3.amazonaws.com/creativetimbucket/products/17/original/GSDKtemplate3.png'.

We are big fans of Font Awesome, so we’ll use their icons to display the sharing links. The results looks like this:

and the code in the back like this:

<a href="https://twitter.com/share?source=tweetbutton&text=CreativeTim&url= http://www.creative-tim.com/" target=_blank>  
    <i class="fa fa-2x fa-twitter"></i>
</a>  
<a href="https://www.facebook.com/sharer.php?u=http://www.creative-tim.com/" target=_blank>  
    <i class="fa fa-2x fa-facebook-square"></i>
</a>  
<a href="https://plus.google.com/share?url=http://www.creative-tim.com/" target=_blank>  
    <i class="fa fa-2x fa-google-plus-square"></i>
</a>  
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.creative-tim.com/&title=CreativeTim" target=_blank>  
    <i class="fa fa-2x fa-linkedin"></i>
</a>  
<a href="https://pinterest.com/pin/create/button/?url=http://www.creative-tim.com/&media=http://s3.amazonaws.com/creativetim_bucket/products/17/original/GSDK_template3.png  
&description=CreativeTim" target=_blank>
    <i class="fa fa-2x fa-pinterest"></i>
</a>  
<a href="mailto:hello@creative-tim.com" target=_blank>  
    <i class="fa fa-2x fa-envelope"></i>
</a>

If you want different styles for your sharing buttons, you can style them how you see fit. The possibilities are endless. We are coming a great in the Get Shit Done Pro Kit, so stay tuned for that!

So go ahead and Tweet, Share, Post, Link, Pin or Email it! People should hear what you have to say. Hope this helps you with the implementation. If you need any support or advice, drop us a comment and we’ll get back to you!