【jQuery】ツイッター投稿用のリンク作成方法

本記事はこんな人向け

今回はカードを使ったツイッターへの投稿方法についてご紹介します。
「ゲームの結果をツイッターで投稿してもらう」といった使い方を想定してます！

ちなみにツイッターカードとは以下のようなものになります。

この記事を読むと

ツイッターへの投稿方法がわかる

1 ツイッター投稿までの３ステップ
2 作成したカードの検証を行う
3 まとめ

ツイッター投稿までの３ステップ

それでは早速、ツイッター投稿までのステップを３つに分けてご紹介します。

htmlにカード情報を準備

まずはhtmlにカードの情報を設定します。

htmlのheadタグ内に以下の記述を追加してください。

  <!-- Twitter用 -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@[ユーザID]">
  <meta property="og:url" content="https://jun239.github.io/LatentBrainPower/">
  <meta property="og:title" content="潜在脳力測定">
  <meta property="og:description" content="あなたの潜在脳力はいくつ？？">
  <meta property="og:image" content="https://jun239.github.io/LatentBrainPower/img/alarm.png">

リンク用のボタンを準備

htmlにボタンを準備。
後で動的にリンク先を追加するので、この時点では箱を作るだけです。

<button id="twitter" type="button"></button>

1	<button id="twitter" type="button"></button>

javascriptで動的にリンクを作成

最後にjavascript側でリンクの作成を行います。

ステップ２で用意した箱の子要素としてaタグを挿入し、
href属性にツイート情報を設定。

[リンク先のURL]と[ツイート内容]の部分を書き換えて使用してください。

ちなみに今回はツイート内容を動的に変更するためにjavascript側で
aタグを作成するようにしましたが、
ツイート内容が不変であれば直接　htmlに記載しても問題ありません。

$('#twitter').prepend('<a id="twieetUrl" href="https://twitter.com/intent/tweet?url=[リンク先のURL]&amp;text=[ツイート内容]" target="blank_" rel="noopener noreferrer">twieetする</a>');

1	$('#twitter').prepend('<a id="twieetUrl" href="https://twitter.com/intent/tweet?url=[リンク先のURL]&text=[ツイート内容]" target="blank_" rel="noopener noreferrer">twieetする</a>');