Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

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

公式ツイートボタン

 公式のツイートボタンが公開されました。設置します。

 JavaScriptやiframe未使用でもボタンの設置はできるようです。


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

1.jsファイルの設置

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

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

</head>

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

 次に 2-A2-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

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

count

 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 はカウント数の表示位置です。

count

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

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

count

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&amp;related=fc2info

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

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

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

count

 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

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

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

count

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> の前でも構いません。

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

#twsbtn { display: none; }

 次に F-AF-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&amp;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

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

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

count

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 - 公開。
関連記事
  1. comment

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/597-3d685975

  1. trackback