One good thing about Octopress is that it comes with social buttons ready to be used. All you need is enable them and thats all. However loading those scripts and iframes only for a share button is bad from a performance point of view. So, I have decided to realize their counter part with just plain HTML.

Fortunately, Jekyll (and so Octopress) has already implemented the necessary template filtes, so you do not have to write a single line of Ruby.

Define the variables

First of all we need to define the share_url and share_text variables

{% capture share_url %}{{ site.url | cgi_escape }}{{ page.url | cgi_escape }}{% endcapture %}
{% capture share_text %}{{ page.title | uri_escape | replace:'&','%26' }}{% endcapture %}

As you can see we make use of cgi_escape filter to escape the URL. This filter converts all unsafe chars (as /) to their safe counterparts (%2F).

To escape the text, however, we need a different filter: uri_escape. This filter converts the space char to %20, instead cgi_escape converts it to +. Moreover, we need to escape manually the & char by adding a replace filter after the uri_escape.

Than, with the correct variables, we have to write the correct anchors for the services and everything will work without a single line of JavaScript.

Twitter
<a href="https://twitter.com/intent/tweet?url={{ share_url }}&text={{ share_text }}" rel="external">
    Share on Twitter
</a>
Facebook
<a href="https://www.facebook.com/sharer.php?u={{ share_url }}&t={{ share_text }}" rel="external">
    Share on Facebook
</a>
Google plus
<a href="https://plus.google.com/share?url={{ share_url }}" rel="external">
      Share on Google+
</a>