ウェブサイト高速化勉強会に行って来ました

内容に関してはまとめてくださってる方がいるのでその辺参照。
2012/09/29 ウェブサイト高速化勉強会 #tnmk0929 – Togetter
ウェブサイト高速化勉強会に参加してきた #tnmk0929 – Shinya’s Daily Report

ソーシャルボタンなんか直書きしちまえよ

というわけで、デフォルトで書いてしまうと非常に重い高速化を妨げるソーシャルボタン。
非同期にすればいいという話を耳にしたり、先に画像だけ出して後からカウント等を呼んでくるようなサイトを見かけたりします。

No.1026はというと、シンプルイズベスト。カウント？いらない。画像？いらない。
押せて動けばいいじゃない。

というわけで、割りと紹介しつくされた感があるコードですが、一応書くとNo.1026ではWordPress使ってるので↓な感じです。
気づいてない方もいるかも知れませんが、このちょうど真横→に入れてあります。

<ul class="social">
<li><a href="http://twitter.com/share?text=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026&amp;url=<?php the_permalink() ?>&via=No_1026" target="_blank" class="twitter">twitter</a></li>
<li><a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026" target="_blank" class="facebook">facebook</a></li>
<li><a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026" target="_blank" class="hatebu">はてブ</a></li>
<li><a href="https://plusone.google.com/_/+1/confirm?hl=jp&url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026" target="_blank" class="googlePlus">+1</a></li>
<li><a href="http://www.evernote.com/clip.action?url=<?php the_permalink() ?>&title=<?php echo urlencode( the_title( "" , "" , 0 ) ) ?>%20%2d%20No%2e1026" target="_blank" class="evernote">evernote</a></li>
</ul>

一応解説っぽく書くと以下。

tweetボタン
<a href="http://twitter.com/share?text=「サイトor記事タイトル」&amp;url=「サイトURL」&via=「twitterアカウント」" target="_blank">twitter</a>

facebookシェアボタン
<a href="http://www.facebook.com/sharer.php?u=「サイトURL」&amp;t=「サイトor記事タイトル」" target="_blank">facebook</a>

はてブボタン
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=「サイトURL」&title=「サイトor記事タイトル」" target="_blank">はてブ</a>

google+1ボタン
<a href="https://plusone.google.com/_/+1/confirm?hl=jp&url=「サイトURL」&title=「サイトor記事タイトル」" target="_blank">+1</a>

evernoteボタン
<a href="http://www.evernote.com/clip.action?url=「サイトURL」&title=「サイトor記事タイトル」" target="_blank">evernote</a>

サイトor記事タイトルはURLエンコードしないと、エライことになるので注意して下さい。
エライことと言っても、サイトor記事名がおかしくなるとか、「”」が混ざっていた場合、閉じてしまってタグがテキストとして表示される程度ですが。

画像なんかいらないのは僕だけでしょうから、普通はテキストで書いてあるところを画像にするなり、画像置換なりでソレっぽくすればいいのではないでしょうか。