6種類の人気ソーシャルボタンの設置コードのまとめ&比較

ソーシャルボタンの設置コードと実装を比較

先日、新はてなブックマークボタンと、FacebookのLikeボタンを設置した流れから、6つの人気ソーシャルボタンを設置コードと実装について比較してみました。

  1. JavaScriptでオプション指定型
  2. URLパラメーター型
  3. data-*(custom data attribute)型

リリースの世代が新しいのから古いのまで様々ですが、今回取り上げた中では、data-*型が多い傾向です。

1. JavaScriptオプション指定型

onclickイベントに実装が詰まっていますが、ソースコードとしては整理された状態で扱えるので悪くありません。今回のサンプルでは、Evernoteサイトメモリーのみが該当します。

Evernote サイトメモリー

参考: Evernote Site Memory | Evernote Corporation

<a href="#" onclick="Evernote.doClip({
    title       : '[ページタイトル]',
    url         : '[クリップのメタデータとしてのURL]',
    contentUrl : '[パーマリンク]'
});return false;" title="EvernoteでWebクリップ">
<img src="http://static.evernote.com/article-clipper.png" /></a>
<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>

これはこれで分かりやすい実装だと思います。JavaScriptの文法が全く分からない人が直接触ると、いつの間にかシンタックスエラー大会になってしまうかもしれませんが。次のURLパラメーター型よりは好きです。

2. URLパラメーター型

ソースコードで見たときに整理されていない感じになってしまうので、あまり好きではありません。実際には生成ヘルパー等から作ることが多いので、あまり文句を言うものでもないとは思いますが。

Facebook イイネボタン

参考: Like Button - Facebook開発者

<iframe src="http://www.facebook.com/plugins/like.php?href=[パーマリンク]&amp;layout=[ボタンのデザイン( standard / button_count / box_count )]&amp;show_faces=true&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

iframeで参照させてURLパラメーターを渡しています。XFBML版はまた異なるので割愛。

Delicious ブックマークボタン

参考: "Bookmark this on Delicious" Buttons

<img src="http://l.yimg.com/hr/img/delicious.small.gif" height="10" width="10" alt="Delicious" />
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent([パーマリンク])+'&title='+encodeURIComponent([ページタイトル]), 'delicious','toolbar=no,width=550,height=550'); return false;"> Bookmark this on Delicious</a>

こちらはonclickからwindow.open時にURLパラメーターを渡しています。

3. data-* ( custom data attribute ) 型

わりとモダンな実装タイプです。HTML5でないとバリデーター通らない ( 参考1参考2 ) という問題はありますが、特別な事情がない限り気にせず使ってもいいような気がします。

Twitter ツイートボタン

参考: Tweet Button | dev.twitter.com

<a href="http://twitter.com/share"
    class="twitter-share-button"
    data-url="[パーマリンク]"
    data-text="[ツイートのデフォルトテキスト]"
    data-count="[ボタンのデザイン( vertical / horizontal )]"
    data-lang="ja"></a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

比較的早期に、data-*を取り入れたパーツじゃないでしょうか。このタイプの指定はHTMLの記述的にも無理がなく、気軽に貼り付けられますね。

data-*の名前が衝突する可能性は、ほとんど考慮されていない命名ですが、指定を受けた要素自身が、ツイートボタンに置き換えられるだけの専用要素なので実際には問題にならないでしょう。

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

参考: 使いやすくなりました! はてなブックマークボタン

<a href="http://b.hatena.ne.jp/entry/[パーマリンク]"
    class="hatena-bookmark-button"
    data-hatena-bookmark-title="[ページタイトル]"
    data-hatena-bookmark-layout="[ボタンのデザイン( vertical / simple / standard )]"
    title="このエントリーをはてなブックマークに追加"></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

Twitterと同じく、data-*を利用した実装ですが、命名の「絶対かぶらないぞ」感が好感を持てます。

mixi チェックボタン

参考: 技術仕様 << mixi Developer Center (ミクシィ デベロッパーセンター)

<a href="http://mixi.jp/share.pl"
    class="mixi-check-button"
    data-key="[ディベロッパーキー]"
    data-url="[パーマリンク]"
    data-button="[ボタンのデザイン( button-1 ~ button-2 )]">Check</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

ディベロッパー登録に携帯電話の認証を求めてくるというハードルの高さで、自分は挫折していますが一応掲載。

やっぱりdata-*型が見やすくて好き

色々なパターンがありましたが、やっぱりdata-*型がHTML的に整理されていて好みです。

あと、どのタイプのボタンにも言えることですが、ページ内に複数設置するときはscript要素はページの下の方で1回だけ読み込むようにしましょう。ではでは。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search