ITisOpen.net

Adding Flattr button on Jekyll Bootstrap theme

27 August 2013

This post quickly describe how I added the Flattr Button in my Jekyll Bootstrap theme.

Create payments content in the /include/JB directory

$ cat <<EOT>> <blog_root>/_include/JB/payments
{&#37; if site.JB.payments.provider and page.payments != false &x37;}
{&x37; case site.JB.payments.provider &x37;}
{&x37; when "paypal" &x37;}
  {&x37; include JB/payments-providers/paypal &x37;}
{&x37; when "flattr" &x37;}
  {&x37; include JB/payments-providers/flattr &x37;}
{&x37; endcase &x37;}
{&x37; endif &x37;}
EOT
$ mkdir -p <blog_root>/_include/JB/payments-providers
$ cat <<EOT>> <blog_root>/_include/JB/payments-providers/flattr
<div id="flattr_button"></div>
<script id='flattrbtn'>
  var flattr_uid = 'patlachance'; // configure in _config.yml
  (function(i){
    var f,s=document.getElementById(i);
    f=document.createElement('iframe');
    f.src='//api.flattr.com/button/view/?uid=' + flattr_uid + '&url='+encodeURIComponent(document.URL);
    f.title='Flattr';
    f.height=62;
    f.width=55;
    f.style.borderWidth=0;
    s.parentNode.insertBefore(f,s);})('flattrbtn');
</script>
EOT

Include payments module just before the JB/comments module in _includes/themes/twitter/post.html

    {% include JB/payments %}
    {% include JB/comments %}

Create configuration options _config.yml

  payments :
    provider : flattr
    flattr :
        uid : 'your_uid'

Finally, add switch in the YAML Front Matter

---
flattrable: true
---
blog comments powered by Disqus