Twitterシェアボタンのサンプルコード

vue

2020.06.16

Twitterでシェアするためのサンプルコードです。

バズ系のサービスなら、SNSシェアの機能は今や必須です。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

サンプルコード
解説

サンプルコード

<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>

解説

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

@clickでtwitterShareというメソッドを呼び出します。

次にメソッド内の重要なコードを紹介します。

var shareURL = 'https://twitter.com/intent/tweet?text=' + "ツイッターシェアボタンのサンプルコード" + "%20%23あめねこサンプルコード集" + '&url=' + "https://code.ameneko.com/twitter-share";

shareURLで、ツイッターのシェア用のURLをセットしています。

ポイントは以下です。