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

  • 2021年7月19日
  • 2021年10月27日
  • Vue.js
  • 831view

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

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

ボタン

Image from Gyazo

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

Image from Gyazo

今回のサンプルコード

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.使用する

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

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

    <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には対応できるライブラリかなーと思います。

皆さんの参考になれば幸いです。

参考記事
https://qiita.com/harachan/items/b2d3ace4aca5df1616e5

初めてweb開発の現場に入った時にVue.jsの勉強用に買った本を思い出に添付。

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping