主要なソーシャルネットワークをリンク共有する「vue-social-sharing」

by kabanoki

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-social-sharing.min.js"></script>
<div id="app">
  <social-sharing id="social" url="https://www.kabanoki.net/"
                      title="|カバの樹"
                      description="ライブラリのテスト"
                      quote="ライブラリのテスト"
                      hashtags="カバの樹,vue-social-sharing,vuejs,javascript,framework"
                      twitter-user="dikkbsw"
                      inline-template>
    <div>
        <network network="email">
            <i class="fa fa-envelope"></i> Email
        </network>
        <network network="facebook">
          <i class="fa fa-facebook"></i> Facebook
        </network>
        <network network="googleplus">
          <i class="fa fa-google-plus"></i> Google +
        </network>
        <network network="line">
          <i class="fa fa-line"></i> Line
        </network>
        <network network="linkedin">
          <i class="fa fa-linkedin"></i> LinkedIn
        </network>
        <network network="odnoklassniki">
          <i class="fa fa-odnoklassniki"></i> Odnoklassniki
        </network>
        <network network="pinterest">
          <i class="fa fa-pinterest"></i> Pinterest
        </network>
        <network network="reddit">
          <i class="fa fa-reddit"></i> Reddit
        </network>
        <network network="skype">
          <i class="fa fa-skype"></i> Skype
        </network>
        <network network="sms">
          <i class="fa fa-commenting-o"></i> SMS
        </network>
        <network network="telegram">
          <i class="fa fa-telegram"></i> Telegram
        </network>
        <network network="twitter">
          <i class="fa fa-twitter"></i> Twitter
        </network>
        <network network="vk">
          <i class="fa fa-vk"></i> VKontakte
        </network>
        <network network="weibo">
          <i...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#social span{
  cursor: pointer;
  padding: 8px;
  display: inline-block;
  font-size: 22px;
}

Vue

const SocialSharing  = window['VueSocialSharing'];
Vue.use(SocialSharing);

new Vue({
  el: '#app',
});