ソーシャルボタン設置のソースコードサンプルあれこれ。

HTML&CSS

2011.11.11

今日は2011/11/11、やたら「1」の並ぶ日付です。
11時11分にスクリーンショット撮り損ねてちょっとorzなhakoishiです。
いっそその時間に更新までしてしまいたかった！後の祭り。

さて、今回はソーシャルボタン設置のソースサンプルをいくつかご紹介。
今回取り上げるサービスは、「はてなブックマーク」「twitter」「facebook」「addthis」の4つです。

(2011/11/22)その2、アップしました。「google+」「mixiチェック」「mixiイイネ！」「evernote」編です。

引き続き、ソーシャルボタン設置のソースコードサンプルあれこれ。

はてなブックマーク

<a href="【URL】" class="hatena-bookmark-button" data-hatena-bookmark-title="【サイト名】" data-hatena-bookmark-layout="【レイアウト指定】" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

おなじみ、はてなブックマーク。日本においてはソーシャルボタンのはしりといっても良いんじゃないでしょうか。
data-hatena-bookmark-layoutでレイアウトを指定してカスタマイズします。
以下、サンプル。（※URLはバシャログに設定しています。）

カウンター位置⇒横

【data-hatena-bookmark-layoutに「standard」を指定】

<a href="http://b.hatena.ne.jp/entry/http://c-brains.jp/blog/wsg/" class="hatena-bookmark-button" data-hatena-bookmark-title="バシャログ。" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

カウンター位置⇒上

【data-hatena-bookmark-layoutに「vertical」を指定】

<a href="http://b.hatena.ne.jp/entry/http://c-brains.jp/blog/wsg/" class="hatena-bookmark-button" data-hatena-bookmark-title="バシャログ。" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

シンプルボタン

【data-hatena-bookmark-layoutに「simple」を指定】

<a href="http://b.hatena.ne.jp/entry/http://c-brains.jp/blog/wsg/" class="hatena-bookmark-button" data-hatena-bookmark-title="バシャログ。" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

twitter

<a href="http://twitter.com/share" class="twitter-share-button" data-url="【URL】" data-text="【サイト名】" data-count="【カウンターの表示方法】" data-lang="【言語】">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

data-countでカウンターの表示位置、data-langで言語を指定します。

(※2011/11/15 更新)
data-url、data-textの設定を追加しました。
これらを省略した場合は設置したページに対してtweet、カウントされます。
ブログの記事一覧など、1つのページ内に複数のボタンを置く場合は設定しないとですね。

以下、サンプル。（※URLはバシャログに設定しています。）

カウンター位置⇒横、言語⇒英語

【data-countに「horizontal」、data-langに「en」を指定】

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://c-brains.jp/blog/wsg/" data-text="バシャログ。" data-count="horizontal" data-lang="en">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

カウンター位置⇒上、言語⇒日本語

【data-countに「vertical」、data-langに「ja」を指定】

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://c-brains.jp/blog/wsg/" data-text="バシャログ。" data-count="vertical" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

カウンター⇒無し、言語⇒ドイツ語

【data-countに「none」、data-langに「de」を指定】

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://c-brains.jp/blog/wsg/" data-text="バシャログ。" data-count="none" data-lang="de">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Facebook

<iframe src="http://www.facebook.com/plugins/like.php?href=【URL】&amp;send=false&amp;layout=【レイアウトスタイル】&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;locale=【言語】" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

もう日本でもすっかり浸透しましたね、Facebook。
layoutでレイアウトを指定します。
以下、サンプル。（※URLはバシャログに設定しています。）

カウンター位置⇒横、言語⇒英語

【layoutに「button_count」、localeに「en_US」を指定】

<iframe src="http://www.facebook.com/plugins/like.php?href=http://c-brains.jp/blog/wsg/&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

カウンター位置⇒横、言語⇒日本語

【layoutに「box_count」、localeに「jp_JP」、colorschemeに「dark」を指定】

<iframe src="http://www.facebook.com/plugins/like.php?href=http://c-brains.jp/blog/wsg/&amp;send=false&amp;layout=box_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=dark&amp;font&amp;height=21&amp;locale=jp_JP" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:90px;" allowTransparency="true"></iframe>

レイアウト⇒スタンダート、言語⇒日本語

【layoutに「standard」、localeに「jp_JP」を指定】

<iframe src="http://www.facebook.com/plugins/like.php?href=http://c-brains.jp/blog/wsg/&amp;send=false&amp;layout=standard&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;locale=jp_JP" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

addthis

 <div class="addthis_toolbox addthis_default_style">
 <a class="【スタイル等をセレクタで指定】"></a>
 </div>
 <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=【ID】"></script>

上記にくらべると馴染みが薄いですが、拡張性がかなりのもの。
そして、これ一つで各種サービスのボタンを包括することができます。
今回は上記と並べて置きやすい、標準的デザインのボタンで。
以下、サンプル。

※カスタマイズに関してこちらの記事が非常に参考になります。ご興味おありの方は、是非ご覧ください。
複数ブックマークに一括対応できるAddThisを導入する前にいろいろ調べたのでメモ - かちびと. net

カウンター位置⇒横

【aのclassに「addthis_counter addthis_pill_style」を指定】

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=0000000000"></script>

カウンター位置⇒上

【aのclassに「addthis_counter」を指定】

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=0000000000"></script>

シンプルボタン

【aのclassに「addthis_button_compact」、hrefを指定】

<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;pubid=0000000000" class="addthis_button_compact">Share</a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=0000000000"></script>