2011/09/24

ツイートボタンの設置&カスタマイズ方法まとめ

このエントリーをはてなブックマークに追加
備忘録も兼ねて


このページの情報は少し古いです。
新しい記事を書いたので、そちらを参考にしてください。

新ツイートボタンの設置&カスタマイズ方法まとめ

ここ最近、ほとんどのブログが採用している「ツイートボタン」ですが、設置の方法や各パラメータの使い方をまとめておきます。
あと、ツイートボタンを任意の画像に変える方法も解説します。


一番簡単な方法(無改造)


公式ツイートボタン作成

上記のページにアクセスし必要な項目を記入していけば、ツイートボタンのHTMLコードがリアルタイムで作成されます。
後は発行されたコードを記事なりトップページなりに貼りつければOKです。

これに手こずるようでは改造は難しいので、HTMLの勉強から始めたほうがいいかも?


ツイートボタンの各種パラメータについての解説


サンプル

<a href="https://twitter.com/share" class="twitter-share-button" data-url="共有されるURL" data-text="ツイート内テキスト" data-count="horizontal" data-via="ユーザー名" data-related="関連アカウント:説明" data-lang="ja">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>


data-url="http://〇〇〇〇"
ここにシェアしたいURLを入力します(未設定の場合はそのページのURLに)



data-text="〇〇〇〇"
ここに入力した文章がツイート本文に挿入されます



data-count="〇〇〇〇"
ツイート数をカウントする場合、「vartical」「horizontal」のどちらかを設定します

vartical: horizontal:



data-via="〇〇〇〇"
ここに入力されたユーザー名が、ツイート内に表示されます



data-related="〇〇〇〇:〇〇〇〇"
「ユーザー名:説明」という形式で記述すると、入力されたユーザー名がツイート後に宣伝されます



data-lang="〇〇"
ツイートボタンの言語設定です
ここは「jp」のままでいいでしょう



ツイートボタンにオリジナルの画像を使いたい



ツイートボタンに使いたい画像に、各種パラメータを設定したリンクを貼るのが一番簡単です。

url
text(省略可)
via(省略可)
related(省略可)


よくわからない人は下記のコードをコピペして使ってください

<a href="http://twitter.com/share?url=共有したいURL&text=ツイートに含めるテキスト&via=ツイートに含めるユーザー名&related=関連アカウント:関連アカウントの説明"><img src="ボタンに使用する画像のURL" /></a>


上記のコードで作成したボタンがこちらです


かなり雑な説明になってしまい申し訳ない…
何か質問があればツイッターにリプライを送ってくださいね^^