【JavaScript】Vue.js で retweet / link リンク【Twitter】

概要

ツイートを埋め込むような web サービスを作る場合、リツイートとイイネのリンクを実装することがあるかもしれません。

そのリンク（正式名称はインテント）を Vue.js で作成する方法です。

実装

リンクの定義です。

// ツイート ID （いわゆる id_str）
const tweetId = "foo"

// イイネ インテント リンク
const likeUrl = `https://twitter.com/intent/like?tweet_id=${tweetId}`

// リツイート インテント リンク
const retweetUrl = `https://twitter.com/intent/retweet?tweet_id=${tweetId}`

マークアップです。

/* イイネ インテント */
<a :href="likeUrl">
     /* お好みでアイコンなど */
</a>

/* リツイート インテント */
<a :href="retweetUrl">
     /* お好みでアイコンなど */
</a>

上記の a タグをクリックすると、以下のようなリツイート確認画面が開きます。

参考 URL

公式ドキュメント: Web Intents - developer.twitter.com