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

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="facebook" viewBox="0 0 16 16">
    <path d="M8 14H3.67C2.73 13.9 2 13.17 2 12.23V3.67A1.65 1.65 0 0 1 3.67 2h8.66A1.65 1.65 0 0 1 14 3.67v8.56c0 .94-.73 1.67-1.67 1.77H10v-3.97h1.3l.7-2.06h-2V6.93c0-.46.17-.9.87-.9H12v-1.8c.03 0-.93-.26-1.53-.26-1.27 0-2.44.7-2.47 2.13v1.87H6v2.06h2V14z"/>
  </symbol>
  <symbol id="twitter" viewBox="0 0 72 72">
    <path d="M68.8 15c-2.3 1.2-5 2-7.5 2.2C64 15.6 66 13 67 10c-2.5 1.5-5.3 2.5-8.3 3-2.4-2.4-5.8-4-9.5-4-7.2 0-13 6-13 13 0 1 0 2 .2 3-11-.5-20.5-5.7-27-13.6-1 2-1.7 4.2-1.7 6.6 0 4.5 2.3 8.5 5.8 11-2.2-.2-4.2-.8-6-1.8v.2C7.5 33.7 12 39 18 40.2c-1 .3-2 .5-3.3.5-.8 0-1.6 0-2.4-.2 1.6 5.2 6.5 9 12.2 9-4.5 3.6-10 5.7-16.3 5.7-1 0-2 0-3-.2 5.8 3.7 12.7 6 20 6 24 0 37.3-20 37.3-37.4V22c2.5-2 4.8-4.2 6.5-7z"/>
  </symbol>
  <symbol id="plusone" viewBox="0 0 512 512">
    <path d="M181.6 307v51h70c-11 33-28 51.2-70 51.2-42.5 0-75.6-34.4-75.6-77 0-42.4 33.2-76.8 75.6-76.8 22.5 0 37 8 50.3 19 10.4-10.8 9.5-12.3 36.6-38-23-20.8-53.6-33.6-87-33.6C110 203 52 261 52 332.5S110.2 462 181.7 462c107 0 133-93 124.3-155H181.6zm233.4 2.4v-45h-32v45h-46v32h46v46h32v-46h45v-32h-45z"/>
  </symbol>
</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