Share widget for single posts

3 files changed, 50 insertions, 0 deletions

diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 239ff1a..44c22fa 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -24,6 +24,17 @@
                         </p>
                     </header>
 
+                    <div class="post-share">
+                        <div class="post-share-links">
+                            <h4 style="">Share</h4>
+                            <a href="#" data-type="facebook" data-url="{{ .Permalink }}" data-title="{{ .Title }}" data-description="{{ .Description }}" data-media="" class="prettySocial fa fa-facebook"></a>
+                            <a href="#" data-type="googleplus" data-url="{{ .Permalink }}" data-description="{{ .Description }}" class="prettySocial fa fa-google-plus"></a>
+                            {{ if isset .Site.Params "twitter" }}
+                            <a href="#" data-type="twitter" data-url="{{ .Permalink }}" data-description="{{ .Description }}" data-via="{{ .Site.Params.twitter }}" class="prettySocial fa fa-twitter"></a>
+                            {{ end }}
+                            
+                        </div>
+                    </div>
                     <div class="post-description">
                         {{ .Content }}
                     </div>
@@ -36,5 +47,12 @@
 </div>
 
 {{ partial "analytics.html" . }}
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+<script src="{{ .Site.BaseUrl }}/js/jquery.prettysocial.min.js"></script>
+<script>
+    $(function(){
+        $('.prettySocial').prettySocial();
+    });
+</script>
 </body>
 </html>
diff --git a/static/css/blog.css b/static/css/blog.css
index f3e7b1c..ac0e768 100644
--- a/static/css/blog.css
+++ b/static/css/blog.css
@@ -190,6 +190,34 @@ h3 {
     list-style-type: none;
 }
 
+.post-share-links{
+    margin:15px 15px 0 0;
+    float:left;
+    padding: 10px;
+    border: 1px solid #ccc;
+    text-align: center;
+}
+
+.post-share-links a{
+    color:#aaa;
+    font-size: 28px;
+    line-height: 36px;
+    margin: 0 auto;
+    display: block;
+    transition: all .3s ease-in;
+}
+
+.post-share-links a:hover{
+    color: rgb(61, 146, 201);
+    text-decoration: none;
+}
+
+.post-share-links h4{
+    font-family: "Oxygen", sans-serif;
+    margin:0 0 5px;
+    color:#aaa
+}
+
 @media (min-width: 48em) {
     .content {
         padding: 2em 3em 0;
diff --git a/static/js/jquery.prettysocial.min.js b/static/js/jquery.prettysocial.min.js
new file mode 100644
index 0000000..c6390cf
--- /dev/null
+++ b/static/js/jquery.prettysocial.min.js
@@ -0,0 +1,4 @@
+/**
+ * jQuery prettySocial: Use custom social share buttons
+ * Author: Sonny T. <hi@sonnyt.com>, sonnyt.com
+ */(function(a){a.fn.prettySocial=function(){var b={pinterest:{url:"http://pinterest.com/pin/create/button/?url={{url}}&media={{media}}&description={{description}}",popup:{width:685,height:500}},facebook:{url:"https://www.facebook.com/sharer/sharer.php?s=100&p[title]={{title}}&p[summary]={{description}}&p[url]={{url}}&p[images][0]={{media}}",popup:{width:626,height:436}},twitter:{url:"https://twitter.com/share?url={{url}}&via={{via}}&text={{description}}",popup:{width:685,height:500}},googleplus:{url:"https://plus.google.com/share?url={{url}}",popup:{width:600,height:600}},linkedin:{url:"https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&summary={{description}}+&source={{via}}",popup:{width:600,height:600}}},d=function(f,e){var h=(window.innerWidth/2)-(f.popup.width/2),g=(window.innerHeight/2)-(f.popup.height/2);return window.open(e,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width="+f.popup.width+", height="+f.popup.height+", top="+g+", left="+h)},c=function(f,g){var e=f.url.replace(/{{url}}/g,encodeURIComponent(g.url)).replace(/{{title}}/g,encodeURIComponent(g.title)).replace(/{{description}}/g,encodeURIComponent(g.description)).replace(/{{media}}/g,encodeURIComponent(g.media)).replace(/{{via}}/g,encodeURIComponent(g.via));return e};return this.each(function(){var i=a(this);var g=i.data("type"),f=b[g]||null;if(!f){a.error("Social site is not set.")}var h={url:i.data("url")||"",title:i.data("title")||"",description:i.data("description")||"",media:i.data("media")||"",via:i.data("via")||""};var e=c(f,h);if(navigator.userAgent.match(/Android|IEMobile|BlackBerry|iPhone|iPad|iPod|Opera Mini/i)){i.bind("touchstart",function(j){if(j.originalEvent.touches.length>1){return}i.data("touchWithoutScroll",true)}).bind("touchmove",function(){i.data("touchWithoutScroll",false);return}).bind("touchend",function(k){k.preventDefault();var j=i.data("touchWithoutScroll");if(k.originalEvent.touches.length>1||!j){return}d(f,e)})}else{i.bind("click",function(j){j.preventDefault();d(f,e)})}})}})(jQuery);
\ No newline at end of file