<$BlogTitle ESCAPE$>

Chaotic・Laboratory(゚Д゚)

RSS

物欲まみれ高専生の現在進行形黒歴史日記。通称「顔チク研究所」。

PREV | 前後の記事 | NEXT

TOP > スポンサー広告 >【Twitter】公式ツイートボタンの設置方法と、FC2ブロガー必見カスタマイズ解説TOP > インターネット >【Twitter】公式ツイートボタンの設置方法と、FC2ブロガー必見カスタマイズ解説

≫ EDIT

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
| --:-- | comments(-) | trackbacks(-) | TOP↑
前後の記事

≫ EDIT

【Twitter】公式ツイートボタンの設置方法と、FC2ブロガー必見カスタマイズ解説

tweettop_20100816170017.png


最近、ブログやニュースサイトの記事の下の方に「Twitterに投稿する」ボタンをよく見かけます。
“面白い!” とか “ためになった!” と思ったときにこういったボタンがあれば手軽に投稿できますし、情報を広めてもらえることになるので、記事を書いたブロガーにとってもメリットがありますね。

今までも見ているページをTwitterに投稿するWEBサービスは多々ありましたが、
ついに公式の「ツイートボタンが登場しました。

このようなボタンが気になっていたけどまだ設置していない、という人は是非この機会に設置しましょう。


後半ではFC2用のカスタマイズや、既にTwitter投稿ボタンを設置した人JavaScriptが使えない/使いたくない人のための解説も用意しました!



公式ツイートボタンの特徴

まず、公式ツイートボタンの特徴を挙げてみましょう。

・設置は生成されるコードを貼り付けるだけ。
正直、ブログの記事が書ける方なら特に解説はいらないでしょうw

・何回ツイートされたか、カウント数を表示できる。
Twitter内の検索を使用しているようで、精度は低そうです。
また、使用状況によっては表示がおかしい場合もあるようです。
目安になれば良い、ということであれば便利な機能ですね。

・Twitter独自のURL短縮サービスによって、URLが短縮される。
長いURLによって、使ってくれた方が感想等を書く文字数が圧迫されませんね。

・投稿画面がポップアップで表示される
Twitter投稿ボタンを簡単に作ろうとすると(後で解説します)どうしても重いトップページを開かせてしまいますが、公式ツイートボタンはポップアップウィンドウから投稿できます。
また、iPhoneやiPod touchでもちゃんと同じように動作するのを確認しました。快適です。

・おすすめアカウントを設定できる。

followme.png

ツイートボタンで投稿してもらった後に、設定したアカウントをおすすめすることが出来ます。
僕なら @YERON ですね。
もちろん無しにも設定できます。




実際に自分のブログに設置しよう!


■まずはこちらのページにアクセス!

・Twitter / ツイートボタン:http://twitter.com/goodies/tweetbutton

tweetbuttontop.png

このような画面が出ます。



■ボタンの選択とカスタマイズ
ここで基本的なカスタマイズを行います
※便利なカスタマイズ例は後述します。


1、ボタンの選択

tweetbuttonbut.png

カウント数を表示させるかどうかを設定できます。



2、ツイート内テキスト

tweetbuttontxt.png

ツイートボタンで投稿する際にURLの前に挿入されるテキストです。
基本的には「ボタンが表示されるページのタイトル。」で良いでしょう。



3、URL

tweetbuttonurl.png

ツイートボタンで投稿された際にリンクされるURLです。
「どの記事でボタンを押されてもトップページへ誘導したい」
などの特殊な場合以外は“ボタンが表示されるページのURL”にしておきましょう。



■おすすめのユーザー

tweetbuttonossm.png

ツイートボタンを利用して貰った後にオススメするアカウントを3つまで設定します。
ここを空欄にしておけばこの機能は無効になります。



■確認・出来上がり♪

プレビューで表示や(必要があれば)動作を確認して、右に生成されたコードをご自分のブログやサイトに貼り付ければ設置は完了です。




不満な点の改善と、FC2ブロガー必見!カスタマイズについて。


■トップページでツイートボタンを押すと・・・問題について。
「とりあえず記事の最下部にボタンを配置した」
という状態で起こりやすいのがこれ。
ツイートボタンはあくまでも「表示されているページのタイトル」と「そのURL」を投稿しようとします。
つまり、ブログのトップページにいくつも記事が並んでいる状態で、いずれかの記事のボタンをクリックしても、個別記事を投稿してくれません。

例えばこのブログなら、トップページのままだとどこのボタンを押しても
Chaotic・Laboratory(゚Д゚)」「http://chaoticroom.blog94.fc2.com/
となり、それぞれのエントリータイトルやURLが反映されません。



解決策は2つあります。

1、個別記事を開いたときにしか表示されない場所に置く。
トップページではツイートボタンが表示されないようにする、ということです。

for FC2
FC2ブログでは、便利なエリア変数を使いましょう。
トップページという言葉に惑わされて<!--not_index_area-->なんて使ってはいけませんよ?
(カテゴリ別表示や月別表示等があるため。)

<!--permanent_area-->(ツイートボタンのコード)<!--/permanent_area-->

という形で設置してあげましょう。



2、「ツイート内テキスト」と「URL」の設定時に、タイトルやURLを取得する変数を指定する。(推奨)
ツイート内テキストを設定する際に、タイトルやURLを取得する変数を指定するだけで、この問題は解消します。
また、書式を
[記事のタイトル][ブログ名][URL]
等にしたい場合もこの設定が便利です。そのためこちらを使う方が良いでしょう。


for FC2
まずツイート内テキスト設定時に、
<%topentry_title>(記事のタイトルを表示) と <%blog_name>(ブログタイトルを表示)
を入力しましょう。
当ブログでは
<%topentry_title>|<%blog_name>
という形にしてみました。

tweetbuttontxtcustom.png

ブログタイトルの有無や仕切り方などはご自由に設定できます。
定型文も挿入できますのでいろいろ工夫してみてください!




そしてURL設定時には
<%topentry_link>
を入力すれば全て解決です。

tweetbuttonurlcustom.png




■おすすめのユーザー設定について。
ここに入力したアカウントは、ツイートボタンで投稿した際に、「フォローするようにおすすめしています」と表示されます。
フォローすることもポップアップウィンドウを閉じることもその場で行える表示ですので、利用者にとってあまり目障りではありません。なのでせっかくですから入力しておきましょう。

さて、その際の挙動ですが、
一つ目の枠に入力したアカウントは、投稿する際、最後に「@○○」とくっつきます。
つまり、リプライが飛ぶということです。
必要かどうかは設置者と入力したアカウント次第ですが、
“アカウントを紹介したいけど、リプライは迷惑”
という場合、二つ目・三つ目の枠に入力しておくのがオススメです。




既にTwitter投稿ボタンを設置してる人と、JavaScriptを使いたくない人へ


今まで、Twitter投稿ボタンに一番多かったのが、
http://twitter.com/?status=(記事のURLとか文字とか)
というリンクを生成するタイプでした。
ただのリンクなので作るのは簡単、URLエンコード化(utf-8)されていればなんでもOKです。

試しにクリック!


・・・ごめんなさい。でもこんな感じ。

この方法で、上で紹介したツイートボタンと同じような機能を持たせる場合、

<a href="http://twitter.com/?status=<%topentry_enc_utftitle>%ef%bd%9c<%enc_blogname>%20<%topentry_link>" target="_blank"><img title="Twitterでつぶやく" src="(用意したアイコン画像のURL)"></a>

という形ですね。もちろんハッシュタグ等の追加も自由です。
しかしこれだと

・URLが長くてもそのまんま。
・Twitterのホームを開かせてしまうので、環境によっては「重い」と感じる人がいる。

という点が不便です。


そこで
「...href="http://twitter.com/?status=...」
の部分を
「...href="http://twitter.com/share?url=...」

にしてみてください。shareを入れて、statusをurlに変えただけです。
これだけで公式ツイートボタンと同じように、URL短縮やその場で投稿できるという恩恵を受けることができます!
ポップアップウィンドウではなくなっただけ。ですね。
この方法で既にTwitter投稿ボタンを設置した方は、ちょっと書き換えるだけで導入できます。
表示も速く、JavaScriptを使いたくない/使えないなどの環境に左右されることもありません。
ツイートボタンを紹介しましたが、こっちの方が便利かも・・・。


この方法で作るとこうなります!
確かめたい方はお試しください↓
twiticon.gif

いかがでしょうか。

※要は、ツイートボタンのコードが生成された際の “JavaScript以外の部分” 、すなわち “JavaScriptが無効になっているときに表示される部分” を最初から使っているだけです。
新たに設置するという方はコードが生成された際に、前半の非JavaScript部分を貼る(&好みでテキストのリンクをTwitterアイコン画像などに差し替える)、という方法が楽かもしれません。


この辺は管理人さんの好みやサイトの環境(そもそもJavaScriptが使えないとか)によるので、それぞれお好きな方法を選んでください。

こんな感じで、公式ツイートボタンの解説を終わらせて頂きましょう。

このブログにもツイートボタンを設置してみましたので、この記事を読んだ方、よかったら下のボタンで実際にツイートしちゃってください♪


※間違った部分や不十分な点がありましたらご指摘ください。
関連記事
| 16:31 | comments:6 | trackbacks:0 | TOP↑
前後の記事

COMMENT

>SoftFunkさん

お役に立てたならよかったです♪

| Y.Moa | 2011/04/26 22:02 | URL |

探していた情報で、非常に助かりました!ありがとうございました!

| SoftFunk | 2011/04/20 23:35 | URL |

>karuranさん

お役に立てたなら良かったです。

| Y.Moa | 2010/08/19 03:22 | URL |

必見ということで見に来ました。

すごいですね、当方のリンクも上記のように設定しました。

| karuran | 2010/08/17 18:17 | URL | ≫ EDIT

>よるにぢ

「ラ・デンパネラ」にもいかがですか!?
毎回ポチポチしちゃいますよ♪

| Y.Moa | 2010/08/16 22:45 | URL |

ついったまったくわかんねえけどなんかすごくわかりやすそう!!
まるで公式の記事だ!!
!!
もあたんが開発者ってことか!!!

| よるにぢ | 2010/08/16 20:14 | URL |















←他の人には見せない

TRACKBACK URL

http://chaoticroom.blog94.fc2.com/tb.php/433-c907a5b3

TRACKBACK

PREV | 前後の記事 | NEXT

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。