カバの樹

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

  • 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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

関連記事

Vue.jsでFontAwesomePickerを実装する「vfa-picker」

Icons UI Components vue.js ライブラリ

Vue.jsでFontAwesomePickerを実装する「vfa-picker」

Miscellaneous UI Components vue.js ライブラリ

Vue.jsでクリップボードへコピーする機能を実装する「vue-clipboard2」

vue.js

vuejs-datepickerでv-modelの値がフォーマット通りにならない時の解決方法

vue.js

「vue-progressbar」をvue-routerに実装する
「vue-bulma-accordion」でアコーディオンタブを実装する

vue.js

アコーディオンタブを「vue-bulma-accordion」で実装する
自動でスクロールされるリストを「vue-seamless-scroll」で実装する 2

vue.js

自動でスクロールされるリストを「vue-seamless-scroll」で実装する
PREV
プレビュー付きのアップロードコンポーネントを実装する「v-uploader」
NEXT
サイトマップが作れそうなツリー図を作成できる「vue-orgchart」

管理人のコメント

後輩向けのJavaScript研修会の講師になったせいで記事を更新する余裕がないぞお・・(2022.05.20)

検索

新着記事

vue.js

Vue.js 3を使ってTableをカスタマイズしていく(基本)

2022/5/9

vue.js

Vue.js 3を使ってTableをカスタマイズしていく(まとめ)

2022/4/4

WordPress レンタルサーバー

CPIサーバーで「閲覧できません (Forbidden access)」と表示される

2022/3/15

Miscellaneous Overlay Switch UI Components vue.js ライブラリ

「Vue Cookie Law」で2022年4月の改正個人情報保護法にむけて準備しよう

2022/2/28

JavaScript jQuery

TinyMCEの文字サイズのデフォルト値を設定する方法

2022/1/26

よく読まれる記事

Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ!
file_get_contentsでベーシック認証の掛かったコンテンツを取得する
[Laravel]JOINでサブクエリを使用する方法
選択データを左右のコンポーネントに分ける「vue-select-sides」
選択データを左右のコンポーネントに分ける「vue-select-sides」
Canvasを使って手書きの署名機能を実装する
「v-tooltip」でvue.js対応のツールチップを簡単に実装する
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
Canvasに「戻る」や「進む」の機能を搭載してみた
[nginx]open() failed (13: Permission denied)で泣きそうになった
Vue RouterでURLのqueryの更新が行われない時の応急処置

最近のコメント

  • Canvasに「戻る」や「進む」の機能を搭載してみた に カバノキ より
  • Canvasに「戻る」や「進む」の機能を搭載してみた に ozawa より
  • Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ に カバノキ より
  • Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ に X より
  • [PHP]Google reCAPTCHAを実装する(V2・V3両対応) に ソゼ より

目次

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

カバの樹

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

© 2022 kabanoki.net