カバの樹

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

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

関連記事

Vue.jsライブラリ記事まとめ

vue.js まとめ ライブラリ

【2020年4月】Vue.jsライブラリ記事まとめ
操作感が気持ち良いColor Picker「vue-swatches」

Portal UI Utilities vue.js ライブラリ

操作感が気持ち良いColor Picker「vue-swatches」

vue.js

Vue.jsでカルーセルスライダーを使うなら「hooper」が良さげ

vue.js ライブラリ

Vue RouterでURLのqueryの更新が行われない時の応急処置

vue.js

Vue.jsのカレンダーライブラリ「V-Calendar」の使い方
12種類のフィルター処理を「vue2-filters」でサクッと一括で実装する

vue.js

12種類のフィルター処理を「vue2-filters」でサクッと一括で実装する
PREV
Vue.jsでWindowトップにプログレスバーを実装する「vue-top-progress」
NEXT
Shellでディレクト内のファイルの文字コードを一括で変換する

管理人のコメント

更新が止まっていたのは、ChatGPT APIで遊んでいたからである・・・すまぬ(2023.05.15)

検索

新着記事

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

Vue3で簡単にDate Time Pickerを実装!「Vue Datepicker」の使い方

2023/3/17

PHP vue.js

テキストエリアのPOST値を直接Vueのdataに渡すとエラーになる

2023/2/24

PHP

PHPで作るTeamsへの通知Bot

2023/2/22

Electron React

[Electron]wait-onでlocalhostを使うと待機状態が永遠に続く

2023/2/7

EC-CUBE

[EC-CUBE4系]受注一覧を注文日で並び替えする

2023/2/2

よく読まれる記事

まだデータがありません。

最近のコメント

  • [PHP]Google Authenticatorのワンタイム認証ログインを実装する に たいが より
  • [PHP]Google Authenticatorのワンタイム認証ログインを実装する に カバノキ より
  • [PHP]Google Authenticatorのワンタイム認証ログインを実装する に たいが より
  • [PHP]Google Authenticatorのワンタイム認証ログインを実装する に カバノキ より
  • [PHP]Google Authenticatorのワンタイム認証ログインを実装する に たいが より

目次

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

カバの樹

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

© 2023 kabanoki.net