Vue.js vue-yandex-shareを使用してsnsシェアボタンを実装する
- 作成日 2020.02.07
- 更新日 2020.07.21
- Vue.js
- vue-yandex-share, Vue.js
vue.jsのライブラリでsnsシェアボタンを実装できる「vue-yandex-share」を利用して、サイトに必要なsnsシェアボタンを設置するまでの簡単な手順
環境
- OS CentOS 8.0.1905 (Core)
- node v12.13.1
- npm 6.13.2
- @vue/cli 4.1.1
※CentOS8にVue.jsの環境構築はこちら
Vue環境構築
下記のコマンドで構築。今回は、vueappという名前でプロジェクトを作成してます。
vue create vueapp
プロジェクト作成時は、defaultを選択してます 。
Vue CLI v4.1.1? Please pick a preset: default (babel, eslint)
vue-yandex-shareインストール
下記の手順でインストールします。
## 移動
cd vueapp
## インストール
npm i -S @alexlit/vue-yandex-share
vue-yandex-share使い方
src配下のApp.vueを下記のように編集します。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<vue-yandex-share v-bind="options"></vue-yandex-share>
</div>
</template>
<script>
import VueYandexShare from '@alexlit/vue-yandex-share';
export default {
name: "App",
components: {
VueYandexShare
},
data() {
return {
options: {
accessToken: null,
bare: false,
counter: false,
copy: 'last',
description: null,
direction: 'horizontal',
hashtags: null,
image: null,
lang: 'ru',
limit: 24,
popupDirection: 'bottom',
popupPosition: 'inner',
size: 'm',
title: null,
url: null,
services: [
'blogger',
'delicious',
'digg',
'evernote',
'facebook',
'gplus',
'linkedin',
'lj',
'moimir',
'odnoklassniki',
'pinterest',
'pocket',
'qzone',
'reddit',
'renren',
'sinaWeibo',
'skype',
'surfingbird',
'telegram',
'tencentWeibo',
'tumblr',
'twitter',
'viber',
'vkontakte',
'whatsapp',
],
},
};
},
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
padding-top: 150px;
margin: 0 auto;
width: 800px;
}
</style>
起動します。
npm run serve
ブラウザから http://プライベートIP:8080 に アクセスすると optionsのservicesに設定したSNSボタンが表示されていることが確認できます。
-
前の記事
CentOs8 Mysql 8をインストールする 2020.02.07
-
次の記事
Vue.js vue-simple-drawerを利用してメニューを横からスライド表示する 2020.02.09
コメントを書く