twitterのtweet機能

tweetボタンの作成

  1. twitter ボタン」と検索しtwitterが公式で提供しているサイトを開く
  2. What would you like to embed?の下の空欄に#ハッシュタグをつけてツイートしたい内容を#をつけて入力する
  3. ボタンをカスタマイズするためset customization options をクリック
  4. Do you want to prefill the Tweet text? の下の空欄にツイート内容を入力(その他カスタマイズしたい内容を入力)
  5. Update をクリックし That's all we need,unless you'd like to...の画面に戻る
  6. Copy Code をクリック
  7. htmlのソースコードに貼り付ける
<a href="https://twitter.com/intent/tweet?button_hashtag=はじめてのツイート&ref_src=twsrc%5Etfw" class="twitter-hashtag-button" data-text="ツイートしたい内容" data-show-count="false">Tweet #はじめてのツイート</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記の内容をJavaScriptで扱ってみる

const tweetDivided = document.getElementById('tweet-area');
const anchor = document.createElement('a');
const hrefValue = "https://twitter.com/intent/tweet?button_hashtag=はじめてのツイート&ref_src=twsrc%5Etfw"

anchor.setAttribute('href', hrefvalue);
anchor.className = 'twitter-hashtag-button';
anchor.setAttribute('data-text', 'ツイートしたい内容');
anchor.innerText = 'Tweet #はじめてのツイート';

tweetDivided.appendChild(anchor);
  • HTMLの ID属性を変数に代入
  • aタグを作成
  • hrefの値が長いので変数に代入
  • element.setAttribute(name名前,value値)で新しい属性を追加
  • element.classNameでclass属性の値を設定 → anchor.setAttribute('class', 'twitter-hashtag-button')でも同じ動きになる