JavaScriptでTwitterのシェアボタンを作成、削除をする方法

JavaScriptでTwitterのシェアボタンを作成、削除をする方法

最終更新日:2019-10-25

JavaScriptを利用してTwitterのシェアボタンを作成、削除をする方法をまとめました。

シェアボタンの作成と削除で、できること

ユーザーの行動結果によって、シェアするメッセージを変えたい場合があります。
このような時に、JavaScriptでTwitterボタンを削除したあとに作り直すことで、シェアボタンを押した時に埋め込まれるメッセージを書き換えることができるようになります。

JavaScript API

TwitterではJavaScript APIが公式に提供されています。JavaScript APIを使うことで、WebサイトにTwitterボタンやタイムラインを簡単に表示させることができます。
JavaScriptのインターフェースは、widgets-jsと呼ばれています。widgets-jsは、以下のURLで提供されています。

https://platform.twitter.com/widgets.js

Twitterのシェアボタンを作成する

TwitterのシェアボタンをJavaScriptで作成するには、twttr.widgets.createShareButton関数を使います。

Twitterボタンを置く場所にDOM IDを設定する

はじめにTwitterのシェアボタンを置く場所にDOM IDを設定します。

<div id="tweet-btn"></div>

createShareButton関数を呼ぶ

Twitterのシェアボタンを置く場所のDOM IDを設定したら、twttr.widgets.createShareButton関数で、ボタンを作成します。
以下の例では、setTweetMessageという関数を作り、その中でcreateShareButtonを呼び出しています。シェアボタンのデフォルトメッセージとして表示する文字列を引数として渡すことにより、ボタンを作成した時にメッセージを変更できるようにしています。

function setTweetMessage(text) {
      twttr.widgets.createShareButton(
        "http://wc52.skyfantasylab.work/week_04/palindrome/index.html",
        document.getElementById("tweet-button"),
        {
          size: "large",
          text: text,
          hashtags: "回文怪文"
        }
      )
    }

twttr.widgets.createShareButtonは、3つの引数を持っています。

引数引数の説明コードサンプルでの例
URLシェアをするURL。URLを表示しない場合は、空の文字列を設定する。“http://wc52.skyfantasylab.work/week_04/palindrome/index.html”
ターゲットエレメントボタンを表示させる親のエレメントdocument.getElementById(“tweet-button”)
オプションボタン表示のオプション{
      size: “large”,
      text: text,
      hashtags: “回文怪文”
  }

ボタン表示のオプションでは、ボタンの大きさ、あらかじめ表示しておくメッセージ、ハッシュタグなどを指定することができます。

サンプルの関数を実行することで、DOM IDで指定した場所にTwitterのシェアボタンが表示されます。

Twitterのシェアボタン

シェアボタンを押すとTweet画面が表示されます。以下の画面で「たけやぶやけた」と表示されている部分に関数の引数として渡した文字列が表示されます。

Tweetメッセージ

Twitterのシェアボタンを削除する

作成したTwitterのシェアボタンを削除します。ボタンを表示しているエレメントでremoveChildを実行することで子ノードを削除できます。子ノード=シェアボタンなので、画面からシェアボタンが消えて無くなります。

function removeTweetBtn() {
  var removeEl = document.getElementById("tweet-button")
  if (removeEl.hasChildNodes()) {
    removeEl.removeChild(removeEl.firstChild)
  }
}

動作確認をしてみよう

ユーザーの行動によってTwitterシェアボタンのメッセージを変更するサンプルのWebページを作成しました。

入力した文字によってシェアボタンを押した時のメッセージが変わっているのがわかります。

  • このサンプルアプリは回文を判定するアプリなので、入力した文字列が回文になっていないとTwitterのシェアボタンは表示されません。
  • このサンプルアプリは52 Weeks Challengeの成果物の一つです。このためアプリケーションの動作を変更する場合があります。

サンプルアプリケーションのソースコードはGitHubにて公開をしているので、参考にしてください。

空想プロジェクトカテゴリの最新記事