web/social_button の履歴(No.1)

ソーシャルボタン#

all.js#xfbml=1

を

sdk.js#xfbml=1&version=v2.0

に置き換える。

「Use the page URL」にしているから。
- data-url属性でURLを明示的にすれば解決
```
data-url="http://www..."
```

ソーシャルボタンは便利ですが見た目より重いので、置きすぎには注意したいです。

知らないうちにサービスが終了していたりするとエラーの原因になったり、設置するサイトによっては利用規約に問題があったりして面倒だったりします。

今回は表示速度をGoogleChromeのNetworkタブで比較しました。数字は環境によって異なると思うので参考程度に。（RequestとSizeは比較用のnone.htmlとの差。Timeはそのまま書いてます。）

個人的にやっとこれだけは便利だと思えてきました。スマートフォンでニュースサイトなどを見たときに設置されていると嬉しいです。ボタンの装飾にCSS3が使われているので、IEでは角丸になりません。

ツイート数を表示させなくてもいいのであれば、リンクだけでボタンの設置も可能です。

これだと表示速度は格段に速いです。

「Show Faces」がtrueになっているとIE6などでは縦長に表示されたりします。 data-widthが無視される？幅に余裕が無い場所に表示させるときは注意。 Google+1ボタン

IE6・7では表示されない。

2012年1月に使えるようになったサービス。設置にはアカウントの取得が必要。IE6・7ではScriptエラー。

Twitterボタン、Facebookいいね！ボタン、Google+1ボタン、はてなブックマークボタンをまとめて表示しただけ。

Google+1/Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ速度的にはjquery-1.7.1.min.jsが91KBなのでそれが増えただけでした。設置はしやすいですが配布元が消えかかっているので対応サービスに変更があったときにどうなるか……。

ShareThis それぞれ呼び出すよりもこちらのほうが軽くて設置が楽です。ShareThisは今のところは広告なども出ないのでいいですね。サイトは英語ですがアカウント作成・設置はそんなに難しくないし、日本語のページに設置するのは特に問題無いようです。ただしdisplayText属性に日本語を使うと、IEでマウスオンしたときに少し変になるかもしれません。

ただ、数字的に軽くても表示には時間がかかっている印象があるので、CSSでpositionを使うか表示する箇所の高さをCSSで固定（例えばheight:18px）してあげたほうが、ページを表示する過程でコンテンツ部分がガタガタしないです。（これはどの設置方法でも同じですね。）

ただのimgタグなので軽い。