twitterのツイートボタンを設置する方法

twitterのツイートボタンをWebサイトに設置する方法を紹介します。

WordPressを利用している方は、プラグインTweet, Like, Google +1 and Shareで設置することも可能です。

ツイートボタンを設置する方法
  1. ツイートボタンの設置方法
  2. ツイートボタンのプロパティ
  3. ツイートボタンのジェネレータを利用する
  4. 独自アイコンを利用する場合

ツイートボタンの設置方法

まずtwitterのプラグインを利用出来るようにするため、以下のHTMLを配置します。配置場所に指定はありませんが、ツイートボタンの直下がtwitter社に推奨されている設置場所です。

twitter利用の準備
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

HTMLの配置した後は、ツイートボタンを表示するためのソースを記載します。

ツイートボタンのプロパティはhttps://dev.twitter.com/web/tweet-buttonに記載されています。よく利用するものとして以下のものがあります。

属性デフォルト
data-urlツイートされるページのURL現ページのURL
data-textツイート本文ページのタイトル
data-viaツイート本文に表示されるユーザ名非表示
data-relatedツイート後にフォローを勧めるユーザフォロー無し
data-countツイートのカウント表示[horizontal][vertical][none]horizontal
data-hashtagsハッシュタグとして表示する文字ハッシュタグ無し
data-sizeツイートボタンのサイズ[default][large]default
ツイートボタンのHTML
<a href="https://twitter.com/share" class="twitter-share-button" data-url="【ページのURL】" data-text="【ツイート本文】" data-via="【ユーザ名】" data-size="【ボタンのサイズ】" data-related="【ユーザ名】" data-count="【カウント表示の種類】" data-hashtags="【ハッシュタグ】">Tweet</a> 

ツイートボタンのプロパティ

ツイートボタンの各プロパティを設定した時の動きを見ていきます。

プロパティの中には「data-url」のように見た目が変わらずクリック時の動作が変わるプロパティもあるため、クリック時の動きも併せてして確認してみてください。

default

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>

data-url

<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://webnonotes.com/">Tweet</a>

data-text

<a href="https://twitter.com/share" class="twitter-share-button" data-text="本文変更">Tweet</a>

data-via

<a href="https://twitter.com/share" class="twitter-share-button" data-via="WebNotes1">Tweet</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-related="WebNotes1">Tweet</a>

data-count

<!-- 吹き出しなし / none -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<!-- 横に吹き出し / horizontal -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
<!-- 縦に吹き出し / vertical -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>

data-hashtags

<a href="https://twitter.com/share" class="twitter-share-button" data-hashtags="WebNotes">Tweet</a>

data-size

<!-- 通常サイズ / none -->
<a href="https://twitter.com/share" class="twitter-share-button" data-size="default">Tweet</a>
<!-- 大きいサイズ / horizontal -->
<a href="https://twitter.com/share" class="twitter-share-button" data-size="large">Tweet</a>

ツイートボタンのジェネレータを利用する

ツイートボタンを作成するときは、自分でコードを記載する以外にもfacebookが用意してくれたジェネレータを使用して作成することもできます。

https://about.twitter.com/ja/resources/buttonsにアクセスし各プロパティを設定しコードをコピーします。
twitter

あとはコードを貼り付けるだけで、ボタンが作成できます。

コピーしたコードに含まれる以下のソースは、ボタンを表示するためのスクリプトで1ページ内に1つだけあれば問題ありません。

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

独自アイコンを利用する場合

ツイートボタンを独自で設定する方法は、公式でサポートされていないため仕様が変わると利用できなくなる可能性がありますが、現在は以下のソースで「ツイート本文」や「サイトのURL」などをツイートするボタンが作成できます。

独自アイコン設置のソース
<a href="https://twitter.com/intent/tweet?text=【ツイート本文】&url=【サイトのURL】&hashtags=【ハッシュタグ】" rel=”nofollow” onClick="window.open(encodeURI(decodeURI(this.href)),'twwindow','width=550, height=450, personalbar=0, toolbar=0, scrollbars=1'); return false;">Twiiterのアイコン</a>

onClickの部分については、サブウィンドウで開くためにjavascriptを使用していますが、「target=”_blank”」として別ウィンドウで開いても問題はありません。

実際に設置したものがこちらになります。アイコンについてはこちらを参考にしてください。

※今回のボタンはjavascriptを使用せず「target=”_blank”」で配置したものになっています。

もしも上記の「独自アイコン設置用ソース」を利用して意図せず画面が2つ立ち上がる場合は、以下の記事が参考となります。

JavaScript:「return false;」で「href」を無効化できずに2つウィンドウが開いてしまった原因

divider

Trackback URL

http://webnonotes.com/web/twitter/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>