カバの樹

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

  • 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.jsでソーシャルボタンを設置する「vuesocial」

2020年4月27日

Vue.jsでソーシャルボタンを設置する「vuesocial」

目次

  • vuesocialとは
  • 環境
  • インストール
  • 導入手順
  • さいごに

vuesocialとは

vuesocialは、Vue.jsを使ってソーシャルボタンを設置するコンポーネントライブラリです。

 

【動画サイズ:41KB】

https://www.kabanoki.net/wp-content/uploads/2020/04/a9711f9d22e443cbe7263fcac876d3d3.mp4

 

環境

Vue 2.6.10
vuesocial 0.1.2

 

インストール

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

npm

npm install @growthbunker/vuesocial

yarn

yarn add @growthbunker/vuesocial

CDN

<script src="https://cdn.jsdelivr.net/npm/@growthbunker/[email protected]/dist/vuesocial.min.js"></script>

 

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

https://github.com/growthbunker/vuesocial

 

導入手順

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

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

import vuesocial from "@growthbunker/vuesocial"

(2)UMDの場合

なし

2.メソッドを設定

iconPathにアイコンの設置ディレクトを記載する。
今回はサンプルで、Githubの画像を直接参照してしまう。
本来は、Gitディポジトリのasset内に格納してあるSVGファイルを使用する。
https://github.com/growthbunker/vuesocial/tree/master/assets/networks

new Vue({
  el: '#app',
  data: {
    iconPath:'https://raw.githubusercontent.com/growthbunker/vuesocial/09bfd3fa5befaf32a8bf341428929cc04b5ec581/assets/networks/'
  }
});
 

3. テンプレートを準備

<gb-social-button> を設置する。
networkに使用したいソーシャルを設定する。
UMDを使用する場合は、icon-pathを使用して、アイコンの設置ディレクトを明示する必要がある。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <gb-social-button
    :icon-path="iconPath"
    network="wordpress"
    size="small"
    theme="light"
  >
    WordPress
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="facebook"
    size="small"
    theme="light"
  >
    FaceBook
  </gb-social-button>
  <gb-social-button
    :icon-path="iconPath"
    network="twitter"
    size="small"
    theme="light"
  >
  Twitter
  </gb-social-button>
</div>

サンプル

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

 

さいごに

Vue.jsを使ってソーシャルボタンを設置するコンポーネントライブラリでした。

 

今日はこの辺でー

 

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

カバノキ

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

-Social Sharing, UI Components, vue.js, ライブラリ
-@growthbunker/vuesocial, cdn, npm, yarn, コンポーネント, ライブラリ

カバノキ


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

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

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

関連記事

Miscellaneous UI Components vue.js ライブラリ

画像をズーム表示する「vue-magnifier-min」

vue.js ライブラリ

Vue RouterでURLのqueryの更新が行われない時の応急処置
Vue.jsライブラリ記事まとめ7月

vue.js まとめ ライブラリ

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

vue.js

Vue.Draggableでフィルタリングされたリストを使用する
改行に合わせて高さが変わるテキストエリア「vue-textarea-autosize」

Form UI Components vue.js ライブラリ

改行に合わせて高さが変わるテキストエリア「vue-textarea-autosize」
【2020年3月】Vue.jsライブラリ記事まとめ

vue.js まとめ ライブラリ

【2020年3月】Vue.jsライブラリ記事まとめ
PREV
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
NEXT
Shellでディレクト内のファイルの文字コードを一括で変換する

管理人のコメント

後輩向けの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でベーシック認証の掛かったコンテンツを取得する
「v-tooltip」でvue.js対応のツールチップを簡単に実装する
選択データを左右のコンポーネントに分ける「vue-select-sides」
選択データを左右のコンポーネントに分ける「vue-select-sides」
Canvasを使って手書きの署名機能を実装する
[nginx]open() failed (13: Permission denied)で泣きそうになった
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
Canvasに「戻る」や「進む」の機能を搭載してみた
vuejs-datepickerで指定の日付を強調表示する
Vue RouterでURLのqueryの更新が行われない時の応急処置

最近のコメント

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

目次

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

カバの樹

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

© 2022 kabanoki.net