ソーシャルボタン

Facebookのlikeボタンのall.jsを2015年5月までに修正しないといけない件

all.js#xfbml=1

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

に置き換える。

URLにパラメータ(?xxxx)が付くと別ページとして扱われてしまう

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

軽量化など

ソーシャルボタンの重さの比較(2012)

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

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

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

ソーシャルボタンRequestSizeTime設置例
無し(比較用)00KB0.2秒none
Twitterボタン639KB2.05秒twitter_tweet
Facebookいいね!ボタン10112KB2.44秒facebook_like
Google+1ボタン753KB1.17秒google_plus
はてなブックマークボタン937KB0.88秒hatena_bookmark
Grow!ボタン7122KB1.70秒grow
4つまとめて30296KB3.48秒socialbutton
4つまとめて(Jquery版)28361KB3.53秒jquery_socialbutton
4つまとめて(ShareThis)22247KB1.72秒sharethis
LINEで送る13KB0.2秒line

Twitterボタン

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

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

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

Facebookいいね!ボタン

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

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

はてなブックマークボタン

Grow!ボタン(サービス終了)

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

4つまとめて

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

4つまとめて(Jquery版)

4つまとめて(ShareThis)

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

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

LINEで送る

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


最終更新: 2015-02-08 (日) 01:44:38