Jekyll sharing buttons

29 January 2013

I’m personally not a fan of share buttons, but I needed to get them into jekyll for a project I am working on. Jekyll uses liquid for rendering, which has the concept of includes, but doesn’t allow passing variables, so it’s no good for a ‘partial’ type system. It does have ‘unix pipe’-esque filters though.

First you need to include the initial script files for each service. For now, I’ve gone with facebook, twitter, and google +1. You’ll need to register an app with facebook and take note of your app ID.

_includes/sharing.html

  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>

  <script type="text/javascript">
    (function(){
     var twitterWidgets = document.createElement('script');
     twitterWidgets.type = 'text/javascript';
     twitterWidgets.async = true;
     twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
     document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
     })();
  </script>

  <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    })();
  </script>

Add this into your main layout file, just after the opening body tag:

  
    {% include sharing_global.html %}

Now add a filter for changing URLs into share buttons. Note that this assumes you have a url defined in your _config.yml. See the jekyll configuration options for more details.

_plugins/share_buttons.rb

  module Jekyll
    module ShareButtonsFilter
      def share_buttons url
        full_url = @context.registers[:site].config['url'] + url

        <<-HTML
          <div class="buttons">
            <div class="fb-like"
              data-href="#{full_url}"
              data-send="true"
              data-layout="button_count"
              data-width="90"
              data-show-faces="false">
            </div>

            <a href="https://twitter.com/share"
              class="twitter-share-button"
              data-url="#{full_url}"
              data-via="twitterapi"
              data-lang="en">
            </a>

            <div class="google_plus">
              <div class="g-plusone"
                data-href="#{full_url}"
                data-size="medium"
                data-annotation="bubble">
              </div>
            </div>
          </div>
        HTML
      end
    end
  end

  Liquid::Template.register_filter Jekyll::ShareButtonsFilter

To add the share buttons, just pipe the post URL to this filter

  
    {{ post.url | share_buttons }}

In order for liked stories to appear more prominently in news feeds, you need to add open graph meta tags to the head of your page. Add the following to the head of your layout file. Make sure that the facebook app id you use is the same as the one in the like button code above, and make sure the user id is an admin of that facebook app:

  
    <meta property="fb:admins" content="YOUR_FB_USER_ID" />
    <meta property="fb:app_id" content="YOUR_FB_APP_ID"/>
    <meta property="og:title" content="{{ page.title }}" />
    <meta property="og:url" content="{{ site.url}}{{ page.url }}" />