Custom social share buttons

So you’ve created your own site and now you want to add social share buttons to it. How hard could it be?! Well.. quite hard if you care about the looks of your site. I’ll tell you why.

The obvious solution is to use the official plugins. Facebook, Google and Twitter, they all have their own Javascript plugins that you can add to your site. The idea is quite similar between them all — include some Javascript, add a placeholder in your HTML, and you’re done! Seems quite simple. What does this actually do?

Usage of the official plugin forces your user to download an external JS (probably causing delays in DOM render process). After that the external JS searches for the HTML placeholder and replaces that with an iframe. Then the iframe gets it’s contents loaded and makes itself visible.

To sum up, you cannot see any share button until the process has been completed on the user’s browser. After a while, when the buttons show up, you may notice a problem. They are not aligned at all. There exists a fix for that, but that is not acceptable to me. How about fixing these buttons, by not using them at all?

mixin social-buttons(url, title, summary)
-
var encoded = {url: encodeURIComponent(url), title: encodeURIComponent(title), sumary: encodeURIComponent(summary)};
var socialButtons = [
{ network: "Google+", class: "google-plus", href: "https://plus.google.com/share?url="+encoded.url },
{ network: "LinkedIn", class: "linkedin", href: "http://www.linkedin.com/shareArticle?url="+encoded.url+"&title="+encoded.title+"&sumary="+encoded.summary },
{ network: "Pocket", class: "pocket", href: "https://getpocket.com/save?url="+encoded.url+"&title="+encoded.title },
{ network: "Twitter", class: "twitter", href: "https://twitter.com/intent/tweet?text="+encoded.title+"&url="+encoded.url },
{ network: "Facebook", class: "facebook", href: "https://www.facebook.com/sharer/sharer.php?u="+encoded.url },
{ network: "Reddit", class: "reddit", href: "http://www.reddit.com/submit?url="+encoded.url+"&title="+encoded.title },
{ network: "Email", class: "email", href: "mailto:?subject="+encoded.title+"&body="+encoded.summary+"'\n\n"+encoded.url }
]
ul.social-buttons
each socialButton in socialButtons
li(class="social-button social-"+socialButton.class)
a(href=socialButton.href target="_blank" title=socialButton.network)= socialButton.network

Here you can see a Jade template that can be rendered on server side. I am including no external JS in my HTML. Everything gets done before the page gets delivered to the user. This is a simple list of share links. Add some CSS magic to it and you are done! Check out my own CSS magic below this article and try those fancy buttons out!

To summarize, I got rid of external JS and avoided some nasty CSS tricks just to get the official buttons aligned. Now I have a freedom to apply a custom style to these buttons.