• twitter
  • Facebook
  • はてなブックマーク
2012年02月17日(金)

twitterのシェアボタン設置方法

ページ単位で、「この記事へのつぶやき」ボタンを設置する方法です。GETを利用してtwitterAPIからデータを取得します。twitterAPIの公式サイトでコードを取得してそのまま利用するよりも、少しだけ詳細な設定ができます。
自作ボタンを設置する場合は、aタグ等を使ってリンクを貼ります。twitterが提供するシェアボタン画像を利用する場合は、aタグを記述した後に、javascriptでtwitterが提供するwidgets.jsを読み込みます。(省略しますがiframeを利用した設置も可能です)

♦ シェアボタンのURL: https://twitter.com/share

♦ ハッシュタグボタンのURL: https://twitter.com/intent/tweet?button_hashtag=ハッシュタグ

♦ リプライボタンのURL: https://twitter.com/intent/tweet?screen_name=アカウント

各パラメータはHTML5で導入されたdata-●●●という属性値を利用してGETパラメータを属性値として記述します。URLに直接クエリ文字を渡すよりもスッキリしていて、エンコードする手間も省けますが、どちらを使ってもOKです。

Twitter各種ボタンを設置するためのパラメータ
(data属性値に設定する場合、data-link=""や、data-via=""で記述)
キー 概要
url シェアしてもらうページのURL。
短縮URLも指定可能(http://bit.ly/○○○ と指定)
via twitterアカウントを保有する人のユーザーID
(○○さんへからのツイートとして扱われる)
text つぶやきの内容として表示されるデフォルト文字列
(例)RT:○○○に関する記事
related ツイートされた後にフォローされていなければフォローを推奨するtwitterアカウントのID
(viaの指定があれば、2つのアカウント間で共通フォロワーのボックスを出力)
count ツイートされた数を表示するためのボックス配置位置
("vertical" "horizontal" "none"いずれか)
lang ボタンに表示される文字の言語(日本語ならja)
counturl urlに設定した値が短縮URLだった場合、リンクを貼るために必要なページの正確なURL。またカウントアップされる対象
hashtags テキストと一緒に表示されるカンマ区切りのハッシュタグ
size 表示するボタンのサイズ
("medium"または"large")
※各aタグには、設置したいボタンの種類によって「class属性」を指定する必要があります。自作画像等を利用する際は、class属性の指定もjavascriptの記述も必要ありません。javascriptのコードは、ボタン画像を動的に作成するための処理です。

シェアボタンの設置

  1. <a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-url="このページのURL" data-via="自分のアカウント" data-count="horizon">この記事へTweet</a>
  2. <script>
  3. <!--
  4. !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  5. -->
  6. </script>

ハッシュタグボタンとして表示する場合

  1. <a href="https://twitter.com/intent/tweet?button_hashtag=ハッシュタグ1,ハッシュタグ2" class="twitter-hashtag-button" data-text=RT:このページのタイトルなど" data-lang="ja" data-related="友達のアカウント等">ハッシュタグでつぶやく</a>
  2. <script>
  3. <!--
  4. !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  5. -->
  6. </script>

リプライボタンとして表示する場合

  1. <a href="https://twitter.com/intent/tweet?screen_name=自分のアカウント" class="twitter-mention-button" data-lang="ja">管理人宛てにツイート</a>

  2. <script>
  3. <!--
  4. !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
  5. -->
  6. </script>

ボタンを使ってシェア用ポップアップウィンドウを開く方法

  1. <script>
  2. <!--
  3. function tweetPopup(){
  4. var url = "https://twitter.com/share?";
  5. url += "text=" + encodeURI("RT:ページのタイトルなど");
  6. url += "&via=自分のアカウントID";
  7. url += "&url=" + encodeURI("このページのURL");
  8. window.open(url, "tweetwin","width=500,height=300");
  9. }
  10. -->
  11. </script>
  12. <button onclick="tweetPopup();">この記事へTweet</button>

ちなみにURL属性を指定しない場合は、表示中ページ内のmeta(name="canonical")の値が利用され、canonical指定がなければサイトのURLを直接利用する仕組みらしいです。

関連投稿記事

Comment:


twitterのシェアボタン設置方法 への1件のフィードバック