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

vue
スポンサーリンク

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

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

実際のサンプルはこちら

サンプルコード

<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をセットしています。

ポイントは以下です。

  • twitterにシェアする場合、「https://twitter.com/intent/tweet」でシェアするページにいけます。
  • コメントを載せるときは「?text=」の後にコメントを書きます。
  • ハッシュタグをつける時は「%20%23」の後にコメントを書きます。
  • URLをつける時は「&url=」の後にURLを書きます。

自分の使いたいワードや機能に合わせてカスタマイズしましょう。

location.href = shareURL

location.hrefでシェア用画面に遷移します。

以上です。

この方法なら、ツイッターのAPIと連携せずにツイッターに投稿できます。

コメント

タイトルとURLをコピーしました