vue-social-shareringで「twitterでシェア」ボタンを作る

「vue-social-sharering」とはSNSのシェアが楽に作れるライブラリです。

今回はこれを使って「twitterシェア」ボタンを手軽に作成していきます。

ボタン

ボタンをクリックすると投稿画面に遷移

今回のサンプルコード

github

codesandboxのブラウザだとtwitter投稿へのリンクがうまく作動しないので、あくまでコードサンプルとしてい参考にして下さい。

1.ライブラリをinstallする

yarn add vue-social-sharing

もしくは

npm install --save vue-social-sharing

※ version3系だとうまく表示しない場合があります。 本記事ではこちらを使っています。 "vue-social-sharing": "^2.4.6"

ついでにTwitterなどのアイコンもinstallしておきましょう。 npm install @fortawesome/fontawesome-free

2.ライブラリを読み込む

app.jsなどライブラリをまとめて読み込んでいる所に以下を記述します。

import VueSocialSharing from 'vue-social-sharing'

Vue.use(VueSocialSharing);

3.使用する

以下のようなボタンを作ります。(再確認)

該当のコードはこんな感じ。

    <div class="sidebar-sns-links">
      <social-sharing
        url="http://localhost:8080/"
        title="vue-social-sharingのテスト"
        description="vue-social-sharingのテスト"
        quote="Vue is a progressive framework for building user interfaces."
        twitter-user="test"
        inline-template
      >
        <div>
          <network network="twitter">
            <font-awesome-icon icon="fa-twitter" /> Twitter
            <font-awesome-icon class="fab fa-twitter" />
          </network>
        </div>
      </social-sharing>
    </div>

基本的に<social-sharing>タグで囲ってあげるだけでOKです。

公式docにプロパティ一覧が載っています。

url、title ,description ,twitter-user辺りを今回は指定しています。 これで完成です。

まとめ

「vue-social-sharering」で簡単に「twitterでシェア」ボタンを作っていきました。 記事を読んでも分かる通り、installしてすぐ使えるラクラクなライブラリです。

今回はtwitterでしたが、公式ではこんな感じで紹介されているので、大抵のSNSには対応できるライブラリかなーと思います。