|
HTMLタグ > twitter > ツイートボタンの設置とカスタマイズ
|
公式サイトにコードを発行するページがあるのですが、探しにくいのでご案内。
→Twitter / ツイートボタン
ページのタイトルやURL（アドレス）、相手のユーザー名（＠〜）を含めて感想などをツイートできるボタンです。
いくつかの設定ができますが、「ツイート内テキスト」と「URL」はデフォルト（初期設定）のままにしておくことを推奨します。
(1)の「ツイート内テキスト」はページのタイトルとして表示されるものです。
「ツイート内テキスト」、「URL」ともにデフォルトのままなら、複数のページにボタンを設置した場合、
表示されているページのタイトルやURLが使われます。
その他のテキストやURLを設定すると、常にそれが使われます。
(2)の「フォローするのにおすすめのユーザー」は、
1つめの欄は普通は自分のユーザー名を入れます。
2つめの欄は、お薦めしたいユーザーがあれば入力、3つめの欄はそのユーザーについての説明文やコメントを入力します。
＜見本＞
※公式のツイートボタンは、ウェブ上でないと表示されません。
（自分がなんで表示されないんだヽ(｀Д´)ノと無駄な時間を費やしたので、一応ｗ）
ローカルでは「ツイート」という文字だけ表示され、クリックするとツイート欄は表示されますがテキストやURLは反映されません。
また、ウェブ上でもJavaスクリプトが無効になっているとボタンが表示されず「ツイート」の文字だけになりますが、
テキストやURLは反映されます。
ツイートボタンをクリックして表示されるツイート欄は、↓こんな感じになります。
お薦めユーザーが設定されたツイートボタンからツイートした後は、↓こんな感じで紹介されます。
押し付けっぽくて個人的にはあまり好きではないけど…何かのファンサイトなどで、
公式のユーザーを薦めるのとかはいいかもしれません。
＜カスタマイズ＞
ボタンを好きな画像に変更することができます。
ただし、ツイート数は表示できません。
画像を変更するには、次のようにします。
|
<a href="http://twitter.com/share?url=URL&text=ツイート内テキスト&via=自分のユーザー名&related=お薦めするユーザー名:お薦めユーザーの説明"><img src="★ボタンに使う任意の画像" /></a>
|
ツイート内テキスト、お薦めユーザーの説明に全角文字を含む場合は、
ツイート欄に反映される時に文字化けしてしまうので、URLエンコードというのをします。
URLエンコードは↓こちらのサイト様のツールをお借りできます。
URLエンコード・デコードフォーム / TAG Index様
テキストエリアにツイート内テキスト、またはお薦めユーザーの説明を入れて、
文字コードは「UTF-8」を選び、「エンコード」ボタンをクリックすると、%e3%82…という感じのエンコードされた文字列が表示されます。
これをxxx=〜の部分に入れます。
デフォルトの項目、設定しない項目は、該当する「xxx=xxxx」を削除します。
例えばツイート内テキストをデフォルトにするなら、「text=ツイート内テキスト」を削除します。
お薦めするユーザー名は設定するけど、説明を設定しないという場合は、
お薦めユーザー名の後ろの「:お薦めユーザーの説明」を削除します。
何かを削除したら、項目を区切る「&」が重複したり、最初の項目の前や最後の項目の後ろに「&」がないように調整して下さい。
（こういう形式です→<a href="http://twitter.com/share?xxx=xxxx&xxx=xxxx&xxx=xxxx"><img src="★ボタンに使う任意の画像" /></a>）
項目がひとつだけ、または設定する項目がないなら「&」は不要なので削除して下さい。
下の見本のコードは、↓こんな感じになっています。
ツイート内テキストは「タコの缶詰め」、お薦めユーザーの説明は「FF11用のアカウントです。」がエンコードされて、
下記のようになっています。
|
<a href="http://twitter.com/share?url=http://www.takoten.com/&text=%e3%82%bf%e3%82%b3%e3%81%ae%e7%bc%b6%e8%a9%b0%e3%82%81&via=IoriMochizuki&related=TirolinVillage:FF11%e7%94%a8%e3%81%ae%e3%82%a2%e3%82%ab%e3%82%a6%e3%83%b3%e3%83%88%e3%81%a7%e3%81%99%e3%80%82">
<img src="http://www.takoten.com/tweet-sample.gif（★ボタンの画像）" /></a>
|
…フルにやると面倒ですが、自分のユーザー名だけの設定でよければ↓以下のシンプルなコードになります。
|
<a href="http://twitter.com/share?&via=自分のユーザー名">
<img src="★ボタンに使う任意の画像" /></a>
|
ユーザー名もいらないなら、↓これだけでOK。
特定の設定がないので、誰でもどのサイトでも複数のページにでも使えます。
|
<a href="http://twitter.com/share"><img src="★ボタンに使う任意の画像）" /></a>
|
＜見本（カスタマイズ後）＞
見本に使った画像は、WEB素材の扱いで使っていただいてもよいです。
使用の際は、WEB素材 > ヘルプをご一読下さい。
＜アドバイス＞
複数のページに設置する場合、「ツイート内テキスト」と「URL」はデフォルトのままにしておけば、
それぞれのタイトルとページが使われるので便利です。
利用する側も、気に入ったページについて簡単にツイートできます。
URLはリンクを貼られることになるので、トップページなどに集約したいとか、
テキストもサイトやブログのタイトルに固定したいと思う人もいるかもしれませんが、
利用者にとってはタイトルやURLを書き直してツイートするならあまり意味がないツイートボタンになってしまうので、
テキストとURLはデフォルトのままで設定するのをお薦めします。
SEO対策で被リンクを増やす、というのが言われていますが、
twitterのリンクはキーワードでのリンクではなくURLでのリンクなので、あまり効果はないと思います。
その手に詳しい人はわかっているとは思いますがｗ
よくわからない人がSEO対策のつもりで使えないツイートボタンを設置してしまうのを防ぎたいなと思って書きましたｗ
参考サイト…ツイートボタンの設置＆カスタマイズ方法まとめ / 瞬刊ReTweet様
「HTMLタグ」のトップに戻る
|
|
|
