Add social-share button to posts#show page

Allow user to share a post on Facebook, Twitter, and Google plus
by clicking on the share button in posts#show page.

Author: hibiken

app/assets/stylesheets/application.scss

@@ -63,6 +63,7 @@
 @import 'modules/add_tag_button';
 @import 'modules/inline_editor';
 @import 'modules/follow_suggestions';
+@import 'modules/social_share';
 
 // Vendor
 @import 'vendor/medium-editor';

app/assets/stylesheets/modules/_social_share.scss

@@ -0,0 +1,107 @@
+.social-share-wrapper {
+  position: relative;
+  margin-top: 20px;
+}
+
+.social-share {
+  position: absolute;
+  right: 0;
+  padding: 5.3px 12px;
+  width: 143.3px;
+  height: 40px;
+  font-size: 16px;
+  letter-spacing: 1px;
+  overflow: hidden;
+  background: $button-green;
+  border-radius: 20px;
+  text-shadow: 0 -0.5px 0 rgba(0, 0, 0, .1);
+  transition: all .2s ease-in-out;
+  cursor: default;
+  user-select: none;
+  color: $white;
+
+  .text {
+    position: absolute;
+    top: 9.3px;
+    left: 28px;
+    overflow: hidden;
+    width: 60px;
+    height: 18px;
+    text-align: right;
+    z-index: 1;
+
+    em {
+      position: absolute;
+      right: 0;
+      top: 0;
+      transition: right .2s ease-in-out .1s;
+    }
+  }
+
+  .ico-share {
+    position: absolute;
+    top: 9.3px;
+    right: 28.5px;
+    transition: right .2s ease-in-out;
+    width: 13.3px;
+    height: 13.3px;
+  }
+
+  .fa {
+    font-size: 16px !important;
+  }
+
+  .ico {
+    font-size: 16px;
+    position: absolute;
+    top: 9.3px;
+    left: -23.3px;
+    transition: all .2s ease-in-out;
+    display: inline-block;
+    z-index: 2;
+    color: $white;
+  }
+
+  &:hover {
+    background-color: $white;
+    border: 1px solid $button-green;
+    em {
+      right: -300%;
+      transition-delay: 0;
+    }
+
+    .fa {
+      font-size: 16px !important;
+      color: $button-green;
+      &:hover:not(.fa-share-alt) {
+        color: darken($button-green, 5%);
+      }
+    }
+
+    .fb, .tw, .gp {
+      cursor: pointer;
+    }
+
+    .fb {
+      left: 21.3px;
+      transition-delay: 0.3s;
+    }
+
+    .tw {
+      left: 46.5px;
+      transition-delay: 0.2s;
+    }
+
+    .gp {
+      left: 79.3px;
+      transition-delay: 0.1s;
+    }
+
+    .ico-share {
+      top: 9.3px;
+      right: 20px;
+      width: 10px;
+      height: 10px;
+    }
+  }
+}

app/views/posts/_social_share.html.erb

@@ -0,0 +1,18 @@
+<div class="social-share-wrapper">
+  <div class="social-share">
+    <a onclick="javascript:window.open('http://www.facebook.com/sharer.php?u=<%= post_url(post) %>', '_blank', 'width=800, height=500, top=200, left=300');void(0)"
+       class="ico fb">
+       <i class="fa fa-facebook"></i>
+    </a>
+    <a onclick="javascript:window.open('http://twitter.com/share?text=<%= post.title %> by <%= post.username %> - &amp;url=<%= post_url(post) %>', '_blank', 'width=800, height=500, top=200, left=300');void(0)"
+       class="ico tw">
+       <i class="fa fa-twitter"></i>
+    </a>
+    <a onclick="javascript:window.open('http://plus.google.com/share?url=<%= post_url(post) %>', '_blank', 'width=800, height=500, top=200, left=300');void(0)"
+       class="ico gp">
+       <i class="fa fa-google-plus"></i>
+    </a>
+    <span class="text"><em>SHARE</em></span>
+    <span class="ico-share"><i class="fa fa-share-alt"></i></span>
+  </div>
+</div>

app/views/posts/show.html.erb

@@ -4,6 +4,9 @@
       <%= feature_post_button_for(@post) %>
     <% end %>
 
+    <div class="pull-right">
+      <%= render partial: 'posts/social_share', locals: { post: @post } %>
+    </div>
     <%= render 'post_metadata', post: @post %>
 
     <% if @post.picture? %>