ブログにTwitterの公式ツイートボタンを設置しました。

ブログに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のツイートボタンのページ(公式)
2010.12.11

コメント投稿フォーム

 

最近の投稿

カテゴリ

オススメ

カプセルトイ関連

ミク関連

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard