【Vue.js】Twitterシェアボタンの実装（初心者向け）

はじめに

こんにちは！
今回は【Vue.js】Twitterシェアボタンの実装についてアウトプットしていきます！

今回私はこちらの記事を参考にして実行しました！

対象

・vue.jsでTwitterシェアを実装したい方
・シンプルなコードで実装したい方

使用環境

使用技術	バージョン
nuxt.js	2.15.7
firebase	9.6.1
firebase-tools	9.23.3
@nuxtjs/tailwindcss	4.2.0

＊今回使用環境の関係性はないと思いますが、紹介として書いておきます

使用ファイル,概要

ファイル名	概要
pages/result.vue	診断結果表示ページ

実装

pages/result.vue

<template>
   <div class="twitter_share">
     <button
       @click="twitterShare"
       class="
         border-2 border-blue-600
         rounded-full
         h-14
         w-64
         items-center
         flex
         justify-center
         m-auto
         my-8
         hover:bg-blue-200
         duration-1000
       "
     >
       Twitterで宣言する！
     </button>
   </div>
</template>

<script>
  methods: {
    twitterShare() {
      //シェアする画面を設定
      var shareURL =
        "https://twitter.com/intent/tweet?text=" +
        "◯月◯日までに（診断結果で出た本）を読み、感想をツイートします！" +
        "%20%23NewSelf" +
        "%20%23書籍診断アプリ"; +
        '&url'= + "https://www.google.com/?hl=ja" ;
      //シェアようの画面へ移行
      location.href = shareURL;
    },
  },
};
</script>

・テンプレートでボタンを作成し@clickでイベントが発火する仕組みを作る
・methods部分でtwitterShareイベントを作ります。
・twitterにシェアする場合、https://twitter.com/intent/tweetでシェアするページにいけます。
・https://twitter.com/intent/tweetの後に追加でコメントをルケたい場合は以下を記述します。

記述法	意味	コメント表示
?text=	コメント	◯月◯日までに（診断結果で出た本）を読み、感想をツイートします！
%20%23	ハッシュタグ	#NewSelf、#書籍診断アプリ
&url=	URL添付	https://www.google.com/?hl=ja

・location.href = shareURLでツイート画面へ飛べるようになります。

動作確認

①Twitterシェアボタンをクリック

②ツイート画面へアクセスできたのを確認。コメント、ハッシュタグ、URLの添付も確認。Tweetをクリック。

③無事ツイートされたのを確認

まとめ

今回はTwitterシェアボタンの実装について記事にしました。
かなりシンプルに、わかりやすくコードが書けるので取り入れやすいかなと感じました！
ぜひ参考にしてみていただけるととても嬉しいです！！

今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

最後までご愛読ありがとうございました！