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

Vue.jsで実装する、Twitterのシェアボタンのサンプルコードです。
シェアボタンの実装方法はいくつかありますが、その中でも単純な実装方法です。

シェアボタンだけの実装なので、初心者の方でもわかりやすいと思います。

実際の動作はこちらで確認できます。

シンプルなTwitterのシェアボタン

サンプルコード

<template>
    <div class="twitter_share">
        <button @click="twitterShare">ツイッターでシェアする</button>
    </div>
</template>

<script>
export default {
    methods:{
        twitterShare(){
           //シェアする画面を設定
            var shareURL = 'https://twitter.com/intent/tweet?text=' + "ツイッターシェアボタンのサンプルコード" + "%20%23あめねこサンプルコード集" + '&url=' + "https://code.ameneko.com/twitter-share";  
           //シェア用の画面へ移行
            location.href = shareURL
        }
    }
}
</script>

<style scoped>
.twitter_share{
    max-width: 1000px;
    margin: auto;
}
</style>

ポイント

ポイントは、ツイッターでシェアする方法を把握することです。
twitterにシェアする場合、「https://twitter.com/intent/tweet 」でシェアするページにいけます。コメントを載せるときは「?text=」の後にコメントを書きます。ハッシュタグをつける時は「%20%23」の後にコメントを書きます。URLをつける時は「&url=」の後にURLを書きます。
「shareURL」でシェアする用のデータを設定したら、次にリンクに飛ぶようにします。そこで、「location.href」でシェア用画面に遷移します。

参考：
twitterのツイートボタンを作るためのリンクshareとintent/tweet

宣伝：ブログ書いてます！→ブログ