ブログにTwitterの公式ツイートボタンを設置しました。 : ういすぷの記録帳

今までのツイートボタンをやめて、Twitterの公式ツイートボタンへ変更してみました。

公式ツイートボタンを利用したため、ブログのアドレスは、自動的に短縮URLへ変更されます。※Twitter上では、短縮前のオリジナルURLが表示されます。


設置するには、URLを貼り付けるだけでOKです。
Twitterのツイートボタンのページから簡単にリンクを作ることができます。できたソースをちょこっと変更するだけで、細かい設定もできます。


■ ツイートボタンを表示するHTMLソース

<a href="http://twitter.com/share" class="twitter-share-button" 

data-count="vertical"

data-text=""

data-url=""

data-lang="ja"

data-via=""

data-related=""

>Tweet</a>

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

■ オプションの説明
□ ボタンの種類 / data-count=""
vertical = 垂直方向に、カウントを表示する。
horizontal = 水平方向にカウントを表示する。
none = カウントを表示しない。
例＞ data-count="vertical"


□ 挿入するテキスト / data-text=""
記事のタイトルや文章を挿入します。無記名の場合は、ツイートボタンがあるページのタイトル名が入ります。
※ エスケープが必要ありませんが、JavaScriptを利用する必要があります。トラブルを防ぐには、UTF-8でURLエスケープすることをおすすめします。
例＞ data-text="本文に挿入する文字列"
エスケープした文字列：%e6%9c%ac%e6%96%87%e3%81%ab%e6%8c%bf%e5%85%a5%e3%81%99%e3%82%8b%e6%96%87%e5%ad%97%e5%88%97


□ URL / data-url=""
ツイート内に挿入するURLを指定します。無記名の場合は、ボタンが表示しているページのURLが入ります。
※ URLはツイッター側で、正しいURLかチェックされます。不正な場合は「'url' parameter does not contain a valid URL.」と表示されます。ローカルでテストする際には、ご注意ください。
例＞data-url="http://wisp.tree-web.net/"



□ 言語選択 / data-lang=""
英語 = 未指定（デフォルト）
フランス語 = fr
ドイツ語 = de
イタリア語 = it
スペイン語 = es
韓国語 = ko
日本語 = ja
例＞data-lang="ja"


□ フォローするためのオプション / data-via=""
data-via="example"と指定すると、@example と＠付きで挿入されます。
例＞data-via="green_wisp"


□ 関連するアカウントや、フォロー候補を指定 / data-related=""
data-related="" は、関連するアカウントや、フォロー候補を指定できます。2つまで指定でき、区切りは：（コロン）になります。
本文中には表示されません。
例＞data-related="example1:example2"



□ URLで指定することもできます。それぞれ、&区切りで指定します。
※[]の部分をそれぞれ変更してください。不要な部分は削除してください。

<a href="http://twitter.com/share?count=[カウンターの種類]&

text=[挿入するテキスト]&

url=[URL]&

via=[アカウント名]&

lang=[言語]&

related=[関連アカウント]" 

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

テキストは、UTF-8エンコードの上、URLエスケープ処理してください。



■ 関連サイト
Twitter 公式ツイートボタンの設置方法 : FC2ブログ - Paroday
Twitterのツイートボタンのページ（公式）