カバの樹

忘れないように記録しとこ

  • TOP
  • このサイトについて
  • vue.js
    • ライブラリ
      • UI Components
      • UI Layout
      • UI Utilities
      • Utilities
    • まとめ
  • WordPress
  • CodeIgniter
  • お問い合わせ
  1. TOP >
  2. vue.js >
  3. ライブラリ >
  4. UI Components >
  5. Social Sharing >

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

2019年12月24日

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

目次

  • vue-social-sharingとは
  • 環境
  • インストール
  • 導入手順
  • さいごに

vue-social-sharingとは

vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。

TwitterやFacebookなどはもちろんLineやSkypeなども備えています。

ライブラリは非常に軽く、驚異の2kb未満を誇っています。

 

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

 

環境

Vue 2.6.10
vue-social-sharing 2.4.7

 

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install --save vue-social-sharing

yarn

yarn add vue-social-sharing

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-social-sharing.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

 

gitリポジトリは以下から取得できます。

https://github.com/nicolasbeauvais/vue-social-sharing

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

var SocialSharing = require('vue-social-sharing');

(2)WEBページの場合

const SocialSharing  = window['VueSocialSharing'];

2.メソッドを設定

上記で取得したSocialSharingを Vue.use に取り込みます。

Vue.use(SocialSharing);

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

3. テンプレートを準備

<social-sharing> で <network> を囲みます。

social-sharing のプロパティにソーシャルの情報を設定します。
プロパティの設定はこちらを参照

network の network プロパティにソーシャル情報を設定します。

今回はソーシャルアイコンにfontawesomeを使用しています。

<div id="app">
  <social-sharing id="social" url="https://www.kabanoki.net/"
                      title="主要なソーシャルネットワークをリンク共有する「vue-social-sharing」|カバの樹"
                      description="vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。"
                      quote="vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。"
                      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 class="fa fa-weibo"></i> Weibo
        </network> 
        <network network="whatsapp">
          <i class="fa fa-whatsapp"></i> Whatsapp
        </network>
    </div>
  </social-sharing>
</div>

 

サンプル

>>専用ページで確認する

 

さいごに

主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリでした。

 

今日はこの辺でー

 

  • Twitter
  • Share
  • Pocket
  • Hatena
  • LINE
  • コピーする
  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Social Sharing, UI Components, vue.js, ライブラリ
-vue-social-sharing, コンポーネント, ライブラリ

カバノキ


記事についての感想・質問 コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

Date Picker Form UI Components vue.js ライブラリ

Vue.jsでiOSのネイティブピッカーのようなものを実装する「vue-smooth-picker」
HTMLでカスタマイズ可能なツールチップを「vue-directive-tooltip」で実装する

Tooltip UI Components vue.js ライブラリ

HTMLでカスタマイズ可能なツールチップを「vue-directive-tooltip」で実装する
フォームで選択した画像のプレビューが見れる「vue-img-preview」 13

vue.js

フォームで選択した画像のプレビューが見れる「vue-img-preview」

Progress Bar UI Components vue.js ライブラリ

Vue.jsでカラーバリエーションの用意されたプログレスバーを実装する「k-progress」
カレンダーページを「fullcalendar-vue」で実装する 0

vue.js

カレンダーページを「fullcalendar-vue」で実装する
GDPR対応のCookie承認用のコンポーネント「vue-cookie-accept-decline」

Miscellaneous UI Components vue.js ライブラリ

GDPR対応のCookie承認用のコンポーネント「vue-cookie-accept-decline」
PREV
プレビュー付きのアップロードコンポーネントを実装する「v-uploader」
NEXT
サイトマップが作れそうなツリー図を作成できる「vue-orgchart」

検索

新着記事

Form UI Components vue.js Wizard ライブラリ

[Vue.js]超簡単に分岐フォームが作れるライブラリ「vue-flow-form」

2021/2/26

Event Handling UI Utilities vue.js ライブラリ

[Vue.js]要素の表示・非表示を検出するライブラリ「vue-observe-visibility」

2021/2/24

jQuery vue.js

Vue.jsとjQueryでフィルター付きのMasonryレイアウトを実装する

2021/2/15

Filters UI Utilities vue.js ライブラリ

Vue.jsで通貨フィルターを実装する「vue-currency-filter」

2021/2/9

つぶやき

【2021年2月】管理人のつぶやき

2021/2/2

よく読まれる記事

簡単にモーダルが実装できる「vue-js-modal」
Vue.jsで簡単にモーダルが実装できる「vue-js-modal」
「Vue-Quill-Editor」でリッチなテキストエディタを実装する
[Vue.js]超簡単に分岐フォームが作れるライブラリ「vue-flow-form」
Vue.jsのカレンダーライブラリ「V-Calendar」の使い方
Vue.jsで世界で一番有名なリッチテキストエディタ「tinymce-vue」を使う
Vue.jsで世界で一番有名なリッチテキストエディタを使う「tinymce-vue」
「vuejs-paginate」を使ってページネーションを実装する
KUSANAGIにSSLを設定する
[jQuery]グループ化した[input]の値を合計する
「V-Calendar」の日付の入力制限する方法
「V-Calendar」の日付の入力制限する方法
「vue-qrcode-reader」でQRコードリーダーをWEBページに実装する
QRコードリーダーがWEBページで?!「vue-qrcode-reader」の使い方

最近のコメント

  • Vue.jsでTwitterのような投票システムを実装する「vue-poll」 に カバノキ より
  • Vue.jsでTwitterのような投票システムを実装する「vue-poll」 に 仲村 瑠 より
  • Vue.jsのカレンダーライブラリ「V-Calendar」の使い方 に モリシマ より
  • Vue.jsのカレンダーライブラリ「V-Calendar」の使い方 に カバノキ より
  • Vue.jsのカレンダーライブラリ「V-Calendar」の使い方 に モリシマ より

おすすめ記事

1
【2021年1月】Vue.jsライブラリ記事まとめ

毎日は見てられない人向けの2021年1月のVue.jsライブラリの紹介記事まとめです。

目次

  • vue-social-sharingとは
  • 環境
  • インストール
  • 導入手順
  • さいごに
  • TOP
  • プライバシーポリシー
  • このサイトについて
  • お問い合わせ

カバの樹

忘れないように記録しとこ

© 2021 kabanoki.net