Social Share buttons

_share_buttons.haml

.app-page-subsection.col-xs-12
  .h5.app-control-label.is-text-center-xs.is-text-center-sm Поділитись з друзями
  %button.app-facebook-share-btn
    = svg_ico 'facebook', class: 'app-facebook-share-btn--ico', width: '16', height: '16', fill: 'white'
    %span.app-facebook-share-btn--text Поширити
    %span.app-facebook-share-btn--count= @word.fb_shares if @word.fb_shares > 0
  %button.app-twitter-share-btn
    = svg_ico 'twitter', class: 'app-twitter-share-btn--ico', width: '16', height: '16', fill: 'white'
    %span.app-twitter-share-btn--text Твіт
  %button.app-plusone-share-btn
    = svg_ico 'plusone', class: 'app-plusone-share-btn--ico', width: '16', height: '16', fill: '#da4b42'
    %span.app-plusone-share-btn--text Поділитись

icons.svg

share-buttons.coffee

doOnPageLoad ->
  $('#word_show').each ->
    $showWord = $(@)
    wordUrl = encodeURIComponent($showWord.data('share-word-url'))

    popupWindow = (url, title, w, h) ->
      left = Math.max(screen.width / 2 - (w / 2), 0)
      top = Math.max(screen.height / 2 - (h / 2), 0)
      win = window.open(url, title, "personalbar=0, toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=1, resizable=1, copyhistory=no, width=#{w}, height=#{h}, top=#{top}, left=#{left}")

    $('.app-facebook-share-btn').click ->
      url = "http://www.facebook.com/sharer/sharer.php?u=#{wordUrl}"
      popupWindow url, 'Опублікувати на Facebook', 600, 500
    $('.app-twitter-share-btn').click ->
      url = "https://twitter.com/intent/tweet?url=#{wordUrl}&text=#{encodeURIComponent(document.title)}"
      popupWindow url, 'Поширити на Twitter', 550, 420
    $('.app-plusone-share-btn').click ->
      url = "https://plus.google.com/share?url=#{wordUrl}"
      popupWindow url, 'Поширити на Google+', 515, 500

share-buttons.sass

@mixin share-btn
  cursor: pointer
  font: inherit
  font-size: 11px
  line-height: 15px
  white-space: nowrap
  overflow: hidden
  &:hover
    text-decoration: none

@mixin share-btn-text
  display: inline-block
  vertical-align: middle
  padding-top: 1px

.app-facebook-share-btn
  @include share-btn
  background: #4267b2
  border: 0
  border-radius: 3px
  padding: 2px 5px 2px 3px
  color: white
  &:hover
    background: #365899

.app-facebook-share-btn--ico
  vertical-align: middle

.app-facebook-share-btn--text
  font-weight: bold
  @include share-btn-text

.app-facebook-share-btn--count
  @include share-btn-text


.app-twitter-share-btn
  @include share-btn
  background: #1b95e0
  border: 0
  border-radius: 3px
  padding: 2px 5px 2px 3px
  color: white
  &:hover
    background: #0c7abf

.app-twitter-share-btn--ico
  vertical-align: middle

.app-twitter-share-btn--text
  font-weight: bold
  @include share-btn-text


.app-plusone-share-btn
  @include share-btn
  background: white
  border: 1px solid #d4d4d4
  border-radius: 3px
  padding: 1px 4px
  color: black
  &:hover
    border-color: #c0c0c0

.app-plusone-share-btn--ico
  vertical-align: middle
  transform: scale(1.3) translateY(-2px)

.app-plusone-share-btn--text
  font-weight: bold
  @include share-btn-text

svg_helper.rb

module SvgHelper

  def svg_ico(name, options = {})
    content_tag :svg, options do
      tag :use, 'xlink:href': "#{asset_path('icons.svg')}##{name}"
    end
  end

end