先日、新はてなブックマークボタンと、FacebookのLikeボタンを設置した流れから、6つの人気ソーシャルボタンを設置コードと実装について比較してみました。チェックボタンリリースの世代が新しいのから古いのまで様々ですが、今回取り上げた中では、data-*型が多い傾向です。JavaScriptオプション指定型onclickイベントに実装が詰まっていますが、ソースコードとしては整理された状態で扱えるので悪くありません。今回のサンプルでは、Evernoteサイトメモリーのみが該当します。src="http://static.evernote.com/noteit.js"></script>これはこれで分かりやすい実装だと思います。JavaScriptの文法が全く分からない人が直接触ると、いつの間にかシンタックスエラー大会になってしまうかもしれませんが。次のURLパラメーター型よりは好きです。URLパラメーター型ソースコードで見たときに整理されていない感じになってしまうので、あまり好きではありません。実際には生成ヘルパー等から作ることが多いので、あまり文句を言うものでもないとは思いますが。allowTransparency="true"></iframe>iframeで参照させてURLパラメーターを渡しています。XFBML版はまた異なるので割愛。Delicious</a>こちらはonclickからwindow.open時にURLパラメーターを渡しています。型わりとモダンな実装タイプです。いう問題はありますが、特別な事情がない限り気にせず使ってもいいような気がします。src="http://platform.twitter.com/widgets.js"></script>比較的早期に、data-*を取り入れたパーツじゃないでしょうか。このタイプの指定はHTMLの記述的にも無理がなく、気軽に貼り付けられますね。data-*の名前が衝突する可能性は、ほとんど考慮されていない命名ですが、指定を受けた要素自身が、ツイートボタンに置き換えられるだけの専用要素なので実際には問題にならないでしょう。async="async"></script>Twitterと同じく、data-*を利用した実装ですが、命名の「絶対かぶらないぞ」感が好感を持てます。src="http://static.mixi.jp/js/share.js"></script>ディベロッパー登録に携帯電話の認証を求めてくるというハードルの高さで、自分は挫折していますが一応掲載。data-*型が見やすくて好き色々なパターンがありましたが、やっぱりdata-*型がHTML的に整理されていて好みです。あと、どのタイプのボタンにも言えることですが、ページ内に複数設置するときはscript要素はページの下の方で1回だけ読み込むようにしましょう。セミナー&ワークショップ資料公開JavaScriptよ。文明を捨て、自然に還れ。Sato又の名をあほむ。名古屋と渋谷を反復横跳びするWebフロントエンドエンジニア。Web関連技術をアレしたり温泉に浸かったりします。