ねむすぎノート
ねむすぎノート
#author("2023-12-24T21:27:47+09:00","default:nemusg.pad","nemusg.pad") #author("2025-08-25T00:40:31+09:00;2023-12-24T21:27:47+09:00","default:nemusg.pad","nemusg.pad") * ソーシャルボタン [#cec406c2] ** Facebookのlikeボタンのall.jsを2015年5月までに修正しないといけない件 [#wead1327] #code_x{{ all.js#xfbml=1 }} を #code_x{{ sdk.js#xfbml=1&version=v2.0 }} に置き換える。 - [[いいね！ボタンは新しいコードに書き換えないと2015年5月以降動かなくなります:http://web-tan.forum.impressrd.jp/e/2014/11/11/18639]] ** URLにパラメータ（?xxxx）が付くと別ページとして扱われてしまう [#z1e46bdb] - 「Use the page URL」にしているから。 -- data-url属性でURLを明示的にすれば解決 data-url="http://www..." ** 軽量化など [#sbb59312] - [[オリジナルの自作画像で各SNSのシェア系ボタンを実装する方法:http://smkn.xsrv.jp/blog/2012/02/way-of-link-to-google-plus-with-origin-image/]] ** ソーシャルボタンの重さの比較（2012） [#f1b1f71e] ソーシャルボタンは便利ですが見た目より重いので、置きすぎには注意したいです。 知らないうちにサービスが終了していたりするとエラーの原因になったり、設置するサイトによっては利用規約に問題があったりして面倒だったりします。 今回は表示速度をGoogleChromeのNetworkタブで比較しました。数字は環境によって異なると思うので参考程度に。（RequestとSizeは比較用のnone.htmlとの差。Timeはそのまま書いてます。） |ソーシャルボタン|Request|Size|Time| |無し（比較用）|0|0KB|0.2秒| |Twitterボタン|6|39KB |2.05秒| |Facebookいいね！ボタン|10|112KB|2.44秒| |Google+1ボタン|7|53KB|1.17秒| |はてなブックマークボタン|9|37KB|0.88秒| |Grow!ボタン|7|122KB|1.70秒| |4つまとめて|30|296KB|3.48秒| |4つまとめて（Jquery版）|28|361KB|3.53秒| |4つまとめて（ShareThis）|22|247KB|1.72秒| |LINEで送る|1|3KB|0.2秒| *** Twitterボタン [#l86cabe3] - [[Twitterボタンの設置:https://twitter.com/about/resources/buttons#tweet]] - [[ボタン以外のウィジェット:https://twitter.com/about/resources/widgets]] - [[twitter ツイートボタンを表示する（DoboWiki）:http://wiki.dobon.net/index.php?ShareButton%2FTweet]] 個人的にやっとこれだけは便利だと思えてきました。スマートフォンでニュースサイトなどを見たときに設置されていると嬉しいです。ボタンの装飾にCSS3が使われているので、IEでは角丸になりません。 ツイート数を表示させなくてもいいのであれば、リンクだけでボタンの設置も可能です。 - [[このページをつぶやく:http://twitter.com/intent/tweet?text=Message&url=http://seo-engineer.info/]] これだと表示速度は格段に速いです。 - [[公式な方法に準拠して、WordPressにtwitterボタンをカスタマイズして挿入する方法 （体が硬いどっとこむ）:http://karadagakatai.com/2011/05/24/222]] - [[Twitter外部サイトから投稿する「statusパラメーター」の仕様変更（自由が丘で働くWeb屋のブログ）:http://blog.diginnovation.com/archives/1042/]] *** Facebookいいね！ボタン [#i6728281] - [[Like Button:http://developers.facebook.com/docs/reference/plugins/like/]] - [[サイトに設置した「いいね!」の押され具合をデータで解析する方法:http://web-tan.forum.impressrd.jp/e/2011/02/01/9647]] 「Show Faces」がtrueになっているとIE6などでは縦長に表示されたりします。 data-widthが無視される？幅に余裕が無い場所に表示させるときは注意。 Google+1ボタン - [[+1 をウェブサイトに表示:http://www.google.com/intl/ja/webmasters/+1/button/index.html]] - [[Google +1 ボタンのサイト運営者向けポリシー:http://www.google.com/intl/ja/webmasters/+1/button/policy.html]] IE6・7では表示されない。 *** はてなブックマークボタン [#m1e7302a] - [[はてなブックマークボタンの作成・設置について:http://b.hatena.ne.jp/guide/bbutton]] - [[はてなスターをブログに設置するには:http://developer.hatena.ne.jp/ja/documents/star/misc/hatenastarjs]] *** Grow!ボタン（サービス終了） [#f1d98b84] 2012年1月に使えるようになったサービス。設置にはアカウントの取得が必要。IE6・7ではScriptエラー。 *** 4つまとめて [#v33715a8] Twitterボタン、Facebookいいね！ボタン、Google+1ボタン、はてなブックマークボタンをまとめて表示しただけ。 *** 4つまとめて（Jquery版） [#a2a32242] - [[Google+1/Twitter/facebookいいね!/facebook Share/mixiチェック/mixiイイネ!/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ:http://itra.jp/jquery_socialbutton_plugin/]] 速度的にはjquery-1.7.1.min.jsが91KBなのでそれが増えただけでした。設置はしやすいですが配布元が消えかかっているので対応サービスに変更があったときにどうなるか……。 *** 4つまとめて（ShareThis） [#i0cb0c58] - [[ShareThis:http://sharethis.com/]] それぞれ呼び出すよりもこちらのほうが軽くて設置が楽です。ShareThisは今のところは広告なども出ないのでいいですね。サイトは英語ですがアカウント作成・設置はそんなに難しくないし、日本語のページに設置するのは特に問題無いようです。ただしdisplayText属性に日本語を使うと、IEでマウスオンしたときに少し変になるかもしれません。 ただ、数字的に軽くても表示には時間がかかっている印象があるので、CSSでpositionを使うか表示する箇所の高さをCSSで固定（例えばheight:18px）してあげたほうが、ページを表示する過程でコンテンツ部分がガタガタしないです。（これはどの設置方法でも同じですね。） *** LINEで送る [#f20570a9] - [[設置方法｜LINEで送るボタン:http://media.line.naver.jp/howto/ja/]] ただのimgタグなので軽い。 #include(parts/feedback,notitle)