Share badges on social media

Gemfile

@@ -47,6 +47,8 @@ gem 'react_component'
 
 gem 'graphql-client', '~> 0.8.6'
 
+gem 'social-share-button', '~> 0.1.6'
+
 group :development, :test do
   gem 'pry-rails'
 	gem 'letter_opener'

Gemfile.lock

@@ -480,6 +480,9 @@ GEM
       railties (>= 3.1, < 5.0)
       slim (~> 3.0)
     slop (3.6.0)
+    social-share-button (0.1.10)
+      coffee-rails
+      sass-rails
     sorcery (0.9.1)
       bcrypt (~> 3.1)
       oauth (~> 0.4, >= 0.4.4)
@@ -565,6 +568,7 @@ DEPENDENCIES
   simple_form
   simplecov (~> 0.15.1)
   slim-rails
+  social-share-button (~> 0.1.6)
   sorcery
   spreadsheet
   uglifier (>= 1.3.0)
@@ -575,4 +579,4 @@ RUBY VERSION
    ruby 2.3.0p0
 
 BUNDLED WITH
-   1.15.4
+   1.16.6

app/assets/javascripts/application.js.coffee

@@ -9,5 +9,6 @@
 #= require react
 #= require react_ujs
 #= require components
+#= require social-share-button
 
 #= require_directory ./application

app/assets/stylesheets/application.scss

@@ -1,13 +1,15 @@
 /*
  *= require_self
  *= require_directory ./application
+ *= require social-share-button
  */
 
 @import "variables";
 @import "bootstrap-sass-official/assets/stylesheets/bootstrap-sprockets";
 @import "bootstrap-sass-official/assets/stylesheets/bootstrap";
 @import "font-awesome-sprockets";
 @import "font-awesome";
-@import "awesome-bootstrap-checkbox"
+@import "awesome-bootstrap-checkbox";
+@import "social-share-button";
 
 //don't put css in this file

app/views/badges/_badge_info.html.slim

@@ -8,4 +8,7 @@
           img.show-badge
         .badge-description
       .modal-footer
-        button.btn.btn-danger type='button' data-dismiss='modal' Close
+        .text-left
+          | Share the milestone:
+          = social_share_button_tag share_msg, url:"learnitgirl.com", via: "learnitgirl", desc: share_msg
+        button.btn.btn-danger type='button' data-dismiss='modal' Close

config/initializers/social_share_button.rb

@@ -0,0 +1,3 @@
+SocialShareButton.configure do |config|
+  config.allow_sites = %w(twitter facebook linkedin)
+end

config/locales/social_share_button.en.yml

@@ -0,0 +1,19 @@
+en:
+  social_share_button:
+    share_to: Share to %{name}
+    weibo: Sina Weibo
+    twitter: Twitter
+    facebook: Facebook
+    douban: Douban
+    qq: Qzone
+    tqq: Tqq
+    delicious: Delicious
+    baidu: Baidu.com
+    kaixin001: Kaixin001.com
+    renren: Renren.com
+    google_plus: Google+
+    google_bookmark: Google Bookmark
+    tumblr: Tumblr
+    plurk: Plurk
+    pinterest: Pinterest
+    email: Email

config/locales/social_share_button.zh-CN.yml

@@ -0,0 +1,19 @@
+'zh-CN':
+  social_share_button:
+    share_to: 分享到 %{name}
+    weibo: 新浪微博
+    twitter: Twitter
+    facebook: Facebook
+    douban: 豆瓣
+    qq: QQ空间
+    tqq: 腾讯微博
+    delicious: Delicious
+    baidu: 百度收藏
+    kaixin001: 开心网
+    renren: 人人网
+    google_plus: Google+
+    google_bookmark: Google 收藏
+    tumblr: Tumblr
+    plurk: Plurk
+    pinterest: Pinterest
+    email: Email

config/locales/social_share_button.zh-TW.yml

@@ -0,0 +1,19 @@
+'zh-TW':
+  social_share_button:
+    share_to: 分享到 %{name}
+    weibo: 新浪微博
+    twitter: Twitter
+    facebook: Facebook
+    douban: 豆瓣
+    qq: QQ空間
+    tqq: 腾讯微博
+    delicious: Delicious
+    baidu: 百度收藏
+    kaixin001: 開心網
+    renren: 人人網
+    google_plus: Google+
+    google_bookmark: Google 收藏
+    tumblr: Tumblr
+    plurk: 噗浪
+    pinterest: Pinterest
+    email: Email

db/seeds/init.rb

@@ -174,5 +174,5 @@
 Badge.find_or_create_by(name: 5, image: "badges/energetic.png", thumbnail: "badges/thumbnails/energetic.png", description: "Badge awarded when mentee completes all tasks for 2 weeks in a row")
 Badge.find_or_create_by(name: 6, image: "badges/timekeeper.png", thumbnail: "badges/thumbnails/timekeeper.png",description: "Badge awarded when mentee completes all tasks for the current week")
 Badge.find_or_create_by(name: 7, image: "badges/novice.png", thumbnail: "badges/thumbnails/novice.png", description: "Badge awarded when mentee completes first task")
-Badge.find_or_create_by(name: 9, image: "badges/coder.png", thumbnail: "badges/thumbnails/coder.png", description: "Badge awarded when mentee find_or_create_bys her first github commit")
+Badge.find_or_create_by(name: 9, image: "badges/coder.png", thumbnail: "badges/thumbnails/coder.png", description: "Badge awarded when mentee creates her first GitHub commit")
 Badge.find_or_create_by(name: 10, image: "badges/visionary.png", thumbnail: "badges/thumbnails/visionary.png", description: "Badge awarded when mentee has provided a creative project description that’s doable and detailed")