---

• 公式ツイートボタンを設置する（一般）
• FC2ブログに設置する
• JavaScriptやiframeを使わずに公式ボタンのみ利用する（要エンコード変数）
• 備考・更新履歴など
• 公式サイトのツイートボタン設置法
• Tweet Button | twitter developers

公式ツイートボタンを設置する（一般）

1.jsファイルの設置

　head要素に次のコードを入れます。

<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>

</head>

　あるいはbody要素閉じタグ </body> の前でも構いません。

　次に 2-A か 2-B どちらかを設置します。エンコードしない・できないときは 2-A を設置。

2-A.ツイートボタンを設置したい箇所に次のコードを入れる（エンコードなし）

<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="記事URI"
   data-text="記事タイトル（挿入するテキストなど）"
   data-via="Twitterアカウント名"
   data-count="horizontal"
   data-lang="ja">Tweet</a>

　記事URIと記事タイトルにはそれぞれを出力する変数などを入れます。エンコードの必要はありません。そのまま出力する変数を入れます。

（例）FC2ブログ

data-url="<%topentry_link>"
data-text="<%topentry_title>"

　ただし、挿入するテキストには『"』や『<』『>』などは使えません。これらの文字を記事タイトルに使っている場合は注意が必要です。

---

　via のアカウント名はツイート本文内に@挿入されます。

　フォローの候補に関連の@アカウント名を入れる場合は related を 追加します。

<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="記事URI"
   data-text="記事タイトル（挿入するテキストなど）"
   data-via="Twitterアカウント名"
   data-related="Twitter関連アカウント名"
   data-count="horizontal"
   data-lang="ja">Tweet</a>

　related の関連アカウント名はツイート投稿後に表示され、フォローミーと迫ります。本文中には挿入されません。

（サンプル）

data-via="paroday"
data-related="fc2info"

■ツイート入力フォームに自動挿入されるテキスト

記事タイトル http://t.co/AbCdEfG via @paroday

■ツイート完了後に表示される推奨フォロー

　via が必要ない場合は削除します。

<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="記事URI"
   data-text="記事タイトル（挿入するテキストなど）"
   data-count="horizontal"
   data-lang="ja">Tweet</a>

---

　count はカウント数の表示位置です。

data-count="horizontal"  // ツイートボタンの右横にカウント数
data-count="vertical"   // ツイートボタンの上にカウント数
data-count="none"       // カウント数なし

---

　lang はツイートボタンの表示言語です。

data-lang="ja" // 日本語
data-lang="en" // 英語
data-lang="fr" // フランス語
data-lang="de" // ドイツ語
data-lang="es" // スペイン語

• ▲

2-B.ツイートボタンを設置したい箇所に次のコードを入れる（エンコードあり）

　こちらはJavaScriptオフでもボタンが機能します。

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトルなど&amp;via=アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a>

　記事URIと記事タイトルなど（挿入するテキスト）にはそれぞれを出力するエンコード済みの変数などを入れます。

（例）FC2ブログ

url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>

　JavaScriptオフで別ウインドウに開く場合は target="_blank" などを追加します。

 class="twitter-share-button" target="_blank">Tweet</a>

---

　via のアカウント名はツイート本文内に@挿入されます。

　フォローの候補に関連の@アカウント名を入れる場合は &amp;related= を 追加します。

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトルなど&amp;via=アカウント名&amp;related=関連アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a>

　related の関連アカウント名はツイート投稿後に表示され、フォローミーと迫ります。本文中には挿入されません。

（サンプル）

via=paroday&related=fc2info

■ツイート入力フォームに自動挿入されるテキスト

記事タイトル http://t.co/AbCdEfG via @paroday

■ツイート完了後に表示される推奨フォロー

　via が必要ない場合は &amp;via= を削除します。

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトルなど&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a>

---

　count はカウント数の表示位置です。

count=horizontal  // ツイートボタンの右横にカウント数
count=vertical   // ツイートボタンの上にカウント数
count=none       // カウント数なし

---

　lang はツイートボタンの表示言語です。

lang=ja // 日本語
lang=en // 英語
lang=fr // フランス語
lang=de // ドイツ語
lang=es // スペイン語

• ▲

FC2ブログに設置する

jsファイルの設置、広告ツイートの非表示

　テンプレートのHTML、head要素内に次のコードを入れます。

<script src="http://platform.twitter.com/widgets.js" type="text/javascript" charset="utf-8"></script>

</head>

　あるいはbody要素閉じタグ </body> の前でも構いません。

　続いて、テンプレートのスタイルシートに次のコードを追加します（１ヶ月広告が表示されたときに、広告記事に対するツイートボタンを非表示にするものです）。

#twsbtn { display: none; }

　次に F-A か F-B どちらかを設置します。挿入するテキストに記事タイトル以外のテキストも入れる場合は F-A を設置した方が楽かもしれません。

F-A.ツイートボタンを設置したい箇所に次のコードを入れる（エンコードなし）

　記事出力部分 <!--topentry--> エリア内に入れます。

<span id="twsbtn<%topentry_no>"><a href="http://twitter.com/share" class="twitter-share-button"
   data-url="<%topentry_link>"
   data-text="<%topentry_title>"
   data-via="Twitterアカウント名"
   data-count="horizontal"
   data-lang="ja">Tweet</a></span>

　ブログタイトルも入れる場合は <%blog_name> を text に追加します。

data-text="<%topentry_title> <%blog_name>"

---

　フォローの候補に関連の@アカウント名を入れる場合は related を 追加します。

<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="<%topentry_link>"
   data-text="<%topentry_title>"
   data-via="Twitterアカウント名"
   data-related="Twitter関連アカウント名"
   data-count="horizontal"
   data-lang="ja">Tweet</a>

　自分の@アカウント名をツイートに含めない場合は via を 削除します。

<a href="http://twitter.com/share" class="twitter-share-button"
   data-url="<%topentry_link>"
   data-text="<%topentry_title>"
   data-count="horizontal"
   data-lang="en">Tweet</a>

---

　ツイート数をボタンの上に表示させる場合は horizontal を vertical に変更。表示しない場合は none に変更。

data-count="vertical"

data-count="none"

---

　lang はツイートボタンの表示形式。日本語は ja 。英語は en に変更。

data-lang="ja"

data-lang="en"

• ▲

F-B.ツイートボタンを設置したい箇所に次のコードを入れる（エンコードあり）

　記事出力部分 <!--topentry--> エリア内に入れます。

　こちらはJavaScriptオフでもボタンが機能します。

<span id="twsbtn<%topentry_no>"><a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>&amp;via=アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a></span>

（例）アカウント名 : paroday

via=paroday

　ブログタイトルも入れる場合は <%enc_blogname> を text に追加します。
　間にスペースを入れる場合は『%20』を追加。

■記事タイトル ブログタイトル http://t.co/AbCdEfG via @paroday

text="<%topentry_enc_utftitle>%20<%enc_blogname>"

■記事タイトル - ブログタイトル http://t.co/AbCdEfG via @paroday

text="<%topentry_enc_utftitle>%20-%20<%enc_blogname>"

---

　JavaScriptオフで別ウインドウに開く場合は target="_blank" などを追加します。

 class="twitter-share-button" target="_blank">Tweet</a>

---

　フォローの候補に関連の@アカウント名を入れる場合は &amp;related= を追加します。

<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=<%topentry_enc_utftitle>&amp;via=アカウント名&amp;related=関連アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a>

（例）アカウント名 : paroday　推奨アカウント : fc2info

via=paroday&related=fc2info

　via が必要ない場合は &amp;via= を削除します。

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトル&amp;count=horizontal&amp;lang=en" class="twitter-share-button">Tweet</a>

---

　count でカウント数の表示位置を変更します。

count=horizontal  // ツイートボタンの右横にカウント数
count=vertical   // ツイートボタンの上にカウント数
count=none       // カウント数なし

---

　lang でツイートボタンの表示言語を変更します。

lang=ja // 日本語
lang=en // 英語
lang=fr // フランス語
lang=de // ドイツ語
lang=es // スペイン語

• ▲

JavaScriptやiframeを使わずにボタンのみ利用する

　jsファイルを設置せず、2-B のコードだけ追加します。FC2ブログは F-B（FC2） と、広告非表示のスタイルを追加。

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトルなど&amp;via=アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button">Tweet</a>

　あとは target="_blank" を追加して別ウインドウで開いたり、Tweet の部分を任意の画像に変更するなどします。

 class="twitter-share-button" target="_blank">Tweet</a>

<a href="http://twitter.com/share?url=記事URI&amp;text=記事タイトルなど&amp;via=アカウント名&amp;count=horizontal&amp;lang=ja" class="twitter-share-button" target="_blank"><img src="画像アドレス" alt="" /></a>

• ▲

備考・更新履歴など

　a要素には title属性 をつけるといいかもしれません。

 class="twitter-share-button" title="記事タイトル"

---

　lang の表示言語はページの言語も変わります。

---

• 【更新履歴】
• 2010 08-13 - 公開。

• 【関連項目】
• Paroday - FC2ブログインフォメーション / Twitter関連記事
• 2010 08-07 - Twitter...A

関連記事

• 関連記事リストにはてなブックマーク数などを表示する方法
• 新機能の関連記事リストを未対応のサーバに実装する方法
• 配信停止：Google Adsenseが表示されないFC2ブログサーバを確認
• Twitter 公式ツイートボタンの設置方法
• FC2拍手ランキングブログパーツのテーブルデザインをリストに変更
• Twitter ブログ更新通知ツイートの文字数とプレビューを表示するスクリプト
• 親子孫カテゴリプラグイン「Categories...C」