Add SNS buttons to blog post

Author: yasulab

app/assets/stylesheets/application.scss

@@ -25,3 +25,17 @@
 .fontsize-for-blog{
   font-size: 120%;
 }
+
+.snsb {
+    overflow: hidden;
+    clear: left;
+    margin-left: 13px;
+}
+.snsb li {
+    float: left;
+    margin-right: 4px;
+    list-style-type: none;
+}
+.snsb iframe {
+    margin: 0 !important;
+}

app/views/blog_post_page/index.html.erb

@@ -10,6 +10,55 @@
   <hr>
   <%= scrivito_tag :h1,  @obj, :title %>
   <%= scrivito_tag :div, @obj, :abstract %>
+  <ol class="snsb" style="margin-left: 0px">
+    <li style="margin-top: -3px; margin-left: -40px;">
+      <div class="fb-like" data-href="<%= request.original_url %>" data-layout="button_count"
+	   data-action="like" data-show-faces="true" data-share="true"></div></li>
+    <li><a href="https://twitter.com/share" class="twitter-share-button"
+	   data-url="<%= request.original_url %>" data-text="<%= @obj.display_title %>"
+	   data-lang="ja" data-hashtags="CoderDojo" data-via="CoderDojoJapan" width="100">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
+    <li><iframe src="http://ghbtns.com/github-btn.html?user=yasslab&repo=coderdojo.jp&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe></li>
+    <li><a href="http://b.hatena.ne.jp/entry/<%= request.original_url %>"
+	   class="hatena-bookmark-button"
+	   data-hatena-bookmark-title="<%= @obj.display_title %>"
+	   data-hatena-bookmark-layout="standard-balloon"
+	   data-hatena-bookmark-lang="ja"
+	   title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
+    <li><div class="g-plusone" data-size="medium" data-lang="ja"></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>
+    </li>
+  </ol>
   <%= scrivito_image_tag @obj, :image, class: "img-responsive" %>
   <%= scrivito_tag :div, @obj, :body %>
+
+  <ol class="snsb" style="margin-left: 0px; margin-top: 100px; padding-bottom: 30px;">
+    <li style="margin-top: -3px; margin-left: -40px;">
+      <div class="fb-like" data-href="<%= request.original_url %>" data-layout="button_count"
+	   data-action="like" data-show-faces="true" data-share="true"></div></li>
+    <li><a href="https://twitter.com/share" class="twitter-share-button"
+	   data-url="<%= request.original_url %>" data-text="<%= @obj.display_title %>"
+	   data-lang="ja" data-hashtags="CoderDojo" data-via="CoderDojoJapan" width="100">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></li>
+    <li><iframe src="http://ghbtns.com/github-btn.html?user=yasslab&repo=coderdojo.jp&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe></li>
+    <li><a href="http://b.hatena.ne.jp/entry/<%= request.original_url %>"
+	   class="hatena-bookmark-button"
+	   data-hatena-bookmark-title="<%= @obj.display_title %>"
+	   data-hatena-bookmark-layout="standard-balloon"
+	   data-hatena-bookmark-lang="ja"
+	   title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script></li>
+    <li><div class="g-plusone" data-size="medium" data-lang="ja"></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>
+    </li>
+  </ol>
 </div>

app/views/layouts/application.html.erb

@@ -44,4 +44,12 @@
     <%= scrivito_body_tags %>
   </div>
 </body>
+<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/ja_JP/sdk.js#xfbml=1&version=v2.8&appId=805184859580207";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>
 </html>