Share Buttons

Lego2012

9/26/2016 - 10:19 PM

$(function () {
  /* Share functions
  -------------------------------------------------------------- */
  $('[data-action="share"]').on('click', function() {
    Share.go(this);
  });
  Share = {
    go: function(_element, _options) {
      var self = Share,
          options = $.extend({
              type: 'vk',
              url: location.href,
              count_url: location.href,
              title: param('title'),
              image: param('image'),
              text: param('description'),
            },
            $(_element).data(),
            _options
          );

      if (self.popup(link = self[options.type](options)) === null) {
        if ($(_element).is('a')) {
          $(_element).prop('href', link);
          return true;
        } else {
          location.href = link;
          return false;
        }
      } else {
        return false;
      }

      function param(name) {
        return $('meta[property=og\\:' + name + ']').attr('content');
      }
    },
    // Vkontakte
    vk: function(_options) {
      var options = $.extend({
        url: location.href,
        title: document.title,
        image: '',
        text: '',
      }, _options);
      return 'http://vkontakte.ru/share.php?'
        + 'url=' + encodeURIComponent(options.url)
        + '&title=' + encodeURIComponent(options.title)
        + '&description=' + encodeURIComponent(options.text)
        + '&image=' + encodeURIComponent(options.image)
        + '&noparse=true';
    },
    // Odnoklassniki
    ok: function(_options) {
      var options = $.extend({
        url: location.href,
        text: '',
      }, _options);
      return 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1'
        + '&st.comments=' + encodeURIComponent(options.text)
        + '&st._surl=' + encodeURIComponent(options.url);
    },
    // Facebook
    fb: function(_options) {
      var options = $.extend({
        url: location.href,
        title: document.title,
        image: '',
        text: '',
      }, _options);
      return 'http://www.facebook.com/sharer.php?s=100'
        + '&p[title]=' + encodeURIComponent(options.title)
        + '&p[summary]=' + encodeURIComponent(options.text)
        + '&p[url]='+ encodeURIComponent(options.url)
        + '&p[images][0]=' + encodeURIComponent(options.image);
    },
    // Livejournal
    lj: function(_options) {
      var options = $.extend({
        url: location.href,
        title: document.title,
        text: '',
      }, _options);
      return 'http://livejournal.com/update.bml?'
        + 'subject=' + encodeURIComponent(options.title)
        + '&event=' + encodeURIComponent(options.text + '<br/><a href="' + options.url + '">' + options.title + '</a>') + '&transform=1';
    },
    // Twitter
    tw: function(_options) {
      var options = $.extend({
        url: location.href,
        count_url: location.href,
        title: document.title,
      }, _options);
      return 'http://twitter.com/share?'
        + 'text=' + encodeURIComponent(options.title)
        + '&url=' + encodeURIComponent(options.url)
        + '&counturl=' + encodeURIComponent(options.count_url);
    },
    // Mail.Ru
    mr: function(_options) {
      var options = $.extend({
        url: location.href,
        title: document.title,
        image: '',
        text: '',
      }, _options);
      return 'http://connect.mail.ru/share?'
        + 'url=' + encodeURIComponent(options.url)
        + '&title=' + encodeURIComponent(options.title)
        + '&description=' + encodeURIComponent(options.text)
        + '&imageurl=' + encodeURIComponent(options.image);
    },
    // Google+
    gg: function(_options) {
      var options = $.extend({
        url: location.href
      }, _options);
      return 'https://plus.google.com/share?url='
        + encodeURIComponent(options.url);
    },
    // LinkedIn
    li: function(_options) {
      var options = $.extend({
        url: location.href,
        title: document.title,
        text: ''
      }, _options);
      return 'http://www.linkedin.com/shareArticle?mini=true'
        + '&url=' + encodeURIComponent(options.url)
        + '&title=' + encodeURIComponent(options.title)
        + '&summary=' + encodeURIComponent(options.text);
    },
    popup: function(url) {
      return window.open(url, '', 'toolbar=0,status=0,scrollbars=1,width=626,height=436');
    }
  }
});

share-buttons.jade

meta(property='og:title', content='Share Buttons')
meta(property='og:description', content='Share buttons. ')
meta(property='og:image', content='https://uikitplay.com/assets/img/logo-dark.png')
meta(property='og:url', content='https://uikitplay.com/plays/FXsu')
meta(property='og:site_name', content='UIkitPlay - UIkit playground for everyone.')
.container.uk-text-center
  h2 Inline view
  button.uk-button.uk-margin-small-bottom.uk-button-facebook(data-action='share', data-type='fb', data-uk-tooltip='', title='Facebook')
    i.uk-icon-justify.uk-icon-facebook
  button.uk-button.uk-margin-small-bottom.uk-button-google-plus(data-action='share', data-type='gg', data-uk-tooltip='', title='Google+')
    i.uk-icon-justify.uk-icon-google-plus
  button.uk-button.uk-margin-small-bottom.uk-button-twitter(data-action='share', data-type='tw', data-uk-tooltip='', title='Twitter')
    i.uk-icon-justify.uk-icon-twitter
  button.uk-button.uk-margin-small-bottom.uk-button-vk(data-action='share', data-type='vk', data-uk-tooltip='', title='VK')
    i.uk-icon-justify.uk-icon-vk
  button.uk-button.uk-margin-small-bottom.uk-button-ok(data-action='share', data-type='ok', data-uk-tooltip='', title='Odnoklassniki')
    i.uk-icon-justify.uk-icon-odnoklassniki
  button.uk-button.uk-margin-small-bottom.uk-button-livejournal(data-action='share', data-type='lj', data-uk-tooltip='', title='Livejournal')
    i.uk-icon-justify.uk-icon-pencil
  button.uk-button.uk-margin-small-bottom.uk-button-mail-ru(data-action='share', data-type='mr', data-uk-tooltip='', title='Mail.ru')
    i.uk-icon-justify.uk-icon-at
  button.uk-button.uk-margin-small-bottom.uk-button-linkedin(data-action='share', data-type='li', data-uk-tooltip='', title='Linkedin')
    i.uk-icon-justify.uk-icon-linkedin
  .uk-margin-top
    h2 Dropdown button view
    .uk-button-dropdown(data-uk-dropdown='')
      button.uk-button.text-blue
        i.uk-icon-share-alt
        |  Share this on...
      .uk-dropdown.uk-dropdown-navbar.uk-dropdown-bottom.uk-text-center
        button.uk-button.uk-margin-small-bottom.uk-button-facebook(data-action='share', data-type='fb', data-uk-tooltip='', title='Facebook')
          i.uk-icon-justify.uk-icon-facebook
        button.uk-button.uk-margin-small-bottom.uk-button-google-plus(data-action='share', data-type='gg', data-uk-tooltip='', title='Google+')
          i.uk-icon-justify.uk-icon-google-plus
        button.uk-button.uk-margin-small-bottom.uk-button-twitter(data-action='share', data-type='tw', data-uk-tooltip='', title='Twitter')
          i.uk-icon-justify.uk-icon-twitter
        button.uk-button.uk-margin-small-bottom.uk-button-vk(data-action='share', data-type='vk', data-uk-tooltip='', title='VK')
          i.uk-icon-justify.uk-icon-vk
        button.uk-button.uk-margin-small-bottom.uk-button-ok(data-action='share', data-type='ok', data-uk-tooltip='', title='Odnoklassniki')
          i.uk-icon-justify.uk-icon-odnoklassniki
        button.uk-button.uk-margin-small-bottom.uk-button-livejournal(data-action='share', data-type='lj', data-uk-tooltip='', title='Livejournal')
          i.uk-icon-justify.uk-icon-pencil
        button.uk-button.uk-margin-small-bottom.uk-button-mail-ru(data-action='share', data-type='mr', data-uk-tooltip='', title='Mail.ru')
          i.uk-icon-justify.uk-icon-at
        button.uk-button.uk-margin-small-bottom.uk-button-linkedin(data-action='share', data-type='li', data-uk-tooltip='', title='Linkedin')
          i.uk-icon-justify.uk-icon-linkedin

share-buttons.css

.container {
  padding: 30px 20px 20px 20px;
  min-height: 260px;
}
.container h2 {
  color: #2196f3;
}
/* Sare button
-------------------------------------------------------------- */
.uk-button.uk-button-facebook {
  background-color: #3b5998;
  color: #fff;
}
.uk-button.uk-button-google-plus {
  background-color: #dd4b39;
  color: #fff;
}
.uk-button.uk-button-twitter {
  background-color: #55acee;
  color: #fff;
}
.uk-button.uk-button-vk {
  background-color: #537599;
  color: #fff;
}
.uk-button.uk-button-ok {
  background-color: #f2720c;
  color: #fff;
}
.uk-button.uk-button-livejournal {
  background-color: #000;
  color: #fff;
}
.uk-button.uk-button-mail-ru {
  background-color: #168de2;
  color: #f7aa21;
}
.uk-button.uk-button-linkedin {
  background-color: #0077b5;
  color: #fff;
}

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Share Buttons