Implementation of social sharing buttons into Jekyll Bootstrap

_config.yml

@@ -105,13 +105,34 @@ JB :
     mixpanel :
         token : '_MIXPANEL_TOKEN_'
 
-  # Settings for sharing helper. 
-  # Sharing is for things like tweet, plusone, like, reddit buttons etc.
+  # Settings for sharing 
+  # Sharing is for things like tweet, plusone, hn upvotes, like, linkedin
+  # Add a tweet button 		=> provider : tweet
+  # Add a like button 		=> provider : like (you also need a facebook appid)
+  # Add a plus one button 	=> provider : plusone
+  # Add a HN button 		=> provider : hn
+  # Add them all (i.e. hn + tweet + plusone + like) => provider : all
   # Set 'provider' to the sharing provider you want to use.
   # Set 'provider' to false to turn sharing off globally.
   #
   sharing :
-    provider : false
+    provider : all
+    twitter :
+      size :
+      via :
+      count :
+    facebook :
+      appid : 205602882797935
+      layout : button_count
+      font :
+      faces : false
+      width : 90
+    googleplus :
+      size : medium
+      width :
+      annotation : bubble
+    linkedin :
+      counter : right
 
   # Settings for all other include helpers can be defined by creating 
   # a hash with key named for the given helper. ex:

_includes/JB/sharing

@@ -1,8 +1,18 @@
-{% if site.safe and site.JB.sharing.provider and page.JB.sharing != false %}
+{% if site.JB.sharing.provider and page.sharing != false %}
 
-{% case site.JB.sharing.provider %}
-{% when "custom" %}
-  {% include custom/sharing %}
-{% endcase %}
+  {% case site.JB.sharing.provider %}
+	{% when "like" %}
+  		{% include JB/sharing-providers/facebook %}
+	{% when "tweet" %}
+  		{% include JB/sharing-providers/twitter %}
+	{% when "plusone" %}
+  		{% include JB/sharing-providers/googleplus %}
+	{% when "linkedin" %}
+  		{% include JB/sharing-providers/linkedin %}
+	{% when "hn" %}
+  		{% include JB/sharing-providers/hn %}
+	{% when "all" %}
+  		{% include JB/sharing-providers/global %}
+  {% endcase %}
 
-{% endif %}
+{% endif %}

_includes/JB/sharing-providers/facebook

@@ -0,0 +1,10 @@
+<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_GB/all.js#xfbml=1&appId={{ site.JB.sharing.facebook.appid }}";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
+
+<div class="fb-like" data-send="false" data-layout="{{ site.JB.sharing.facebook.layout }}" data-width="{{ site.JB.sharing.facebook.width }}" data-show-faces="{{ site.JB.sharing.facebook.faces }}" data-font="{{ site.JB.sharing.facebook.font }}"></div>

_includes/JB/sharing-providers/global

@@ -0,0 +1,64 @@
+<div id="fb-root"></div>
+
+<ul class="post-share ulno mob">
+
+<!-- Hacker News -->
+<li class="hn"><span id="hnews"></span>
+
+<!-- Twitter -->
+<li class="tw"><a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ page.title }}" data-via="{{ site.JB.sharing.twitter.via }}" data-related="{{ site.author.twitter }}" data-count="{{ site.JB.sharing.twitter.count }}" data-size="{{ site.JB.sharing.twitter.size }}">Tweet</a>
+
+<!-- Google+ -->
+<li class="gp"><div class="g-plusone" data-size="{{ site.JB.sharing.googleplus.size }}" data-annotation="{{ site.JB.sharing.googleplus.annotation }}" data-width="{{ site.JB.sharing.googleplus.width }}"></div>
+
+<!-- Facebook -->
+<li class="fb"><div class="fb-like" data-send="false" data-layout="{{ site.JB.sharing.facebook.layout }}" data-width="{{ site.JB.sharing.facebook.width }}" data-show-faces="{{ site.JB.sharing.facebook.faces }}" data-font="{{ site.JB.sharing.facebook.font }}"></div>
+
+<!-- Reddit -->
+<li><script type="text/javascript" src="http://www.reddit.com/buttonlite.js?i=4"></script>
+</ul>
+
+<script>
+
+(function(doc, script) {
+
+	//Async Social Buttons
+    var js, 
+        fjs = doc.getElementsByTagName(script)[0],
+        add = function(url, id) {
+            if (doc.getElementById(id)) {return;}
+            js = doc.createElement(script);
+            js.src = url;
+            id && (js.id = id);
+            fjs.parentNode.insertBefore(js, fjs);
+        };
+
+    // Twitter SDK
+    add('//platform.twitter.com/widgets.js', 'twitter-wjs');
+
+    // Google+ button
+    add('https://apis.google.com/js/plusone.js');
+
+    // Facebook SDK
+    add('//connect.facebook.net/en_GB/all.js#xfbml=1&appId={{ site.JB.sharing.facebook.appid }}', 'facebook-jssdk');
+
+    //Hacker News Button 	
+ 	var hn_like = document.createElement('iframe');
+      hn_like.frameborder="no";
+      hn_like.scrolling="no";
+      hn_like.height="28px";
+      hn_like.width="110px";
+      hn_like.src = "http://hnlike.com/upvote.php?link="
+                    + encodeURIComponent(document.location)
+                    + "&title="
+                    + encodeURIComponent("{{ page.title }}");
+      hn_like.innerHTML="iframes not supported by your browser";
+
+      var where = document.getElementById("hnews");
+      where.parentNode.insertBefore(
+        hn_like,
+        where
+      );
+}(document, 'script'));
+
+</script>

_includes/JB/sharing-providers/googleplus

@@ -0,0 +1,9 @@
+<div class="g-plusone" data-size="{{ site.JB.sharing.googleplus.size }}" data-annotation="{{ site.JB.sharing.googleplus.annotation }}" data-width="{{ site.JB.sharing.googleplus.width }}"></div>
+
+<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>

_includes/JB/sharing-providers/hn

@@ -0,0 +1,21 @@
+<span id="hnews"></span>
+<script>
+    (function(){
+      var hn_like = document.createElement('iframe');
+      hn_like.frameborder="no";
+      hn_like.scrolling="no";
+      hn_like.height="28px";
+      hn_like.width="110px";
+      hn_like.src = "http://hnlike.com/upvote.php?link="
+                    + encodeURIComponent(document.location)
+                    + "&title="
+                    + encodeURIComponent("{{ page.title }}");
+      hn_like.innerHTML="iframes not supported by your browser";
+
+      var where = document.getElementById("hnews");
+      where.parentNode.insertBefore(
+        hn_like,
+        where
+      );
+    })();
+</script>

_includes/JB/sharing-providers/linkedin

@@ -0,0 +1,2 @@
+<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
+<script type="IN/Share" data-counter="{{ site.JB.sharing.linkedin.counter }}"></script>

_includes/JB/sharing-providers/twitter

@@ -0,0 +1,3 @@
+<a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ page.title }}" data-via="{{ site.JB.sharing.twitter.via }}" data-related="{{ site.author.twitter }}" data-count="{{ site.JB.sharing.twitter.count }}" data-size="{{ site.JB.sharing.twitter.size }}">Tweet</a>
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

_includes/themes/twitter/post.html

@@ -22,6 +22,11 @@ <h1>{{ page.title }} <small>Supporting tagline</small></h1>
       </ul>
     </div>
     <hr>
+
+    <div class="post-sharing">
+      {% include JB/sharing %}
+    </div>
+
     {% include JB/comments %}
   </div>