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

HTML&CSS

2011.11.22

みなさん、今年も残り40日くらいだそうですよ。
年末の大掃除が終わるか今から心配なhakoishiです。

さて、今回は前回に引き続き、ソーシャルボタン設置のソースサンプルをご紹介。
今回は、「google+」「mixiチェック」「mixiイイネ！」「evernote」の4つです。

※前回のエントリーはこちらから。「はてなブックマーク」「twitter」「facebook」「addthis」を取り上げています。

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

google+

<g:plusone href="http://c-brains.jp/blog/wsg/"></g:plusone>

sizeでサイズ、countでカウンターの有無を指定します。特に指定しない場合はカウンター有り、サイズは標準になります。
以下、サンプル。（※識別キーがダミーだと表示されないので、ボタンは画像にしています。URLはバシャログに設定しています。）

サイズ⇒標準、カウンター⇒あり

【標準設定のまま】

<g:plusone href="http://c-brains.jp/blog/wsg/"></g:plusone>

サイズ⇒中、カウンター⇒なし

【sizeに「medium」、countに「false」を指定】

<g:plusone size="medium" count="false" href="http://c-brains.jp/blog/wsg/"></g:plusone>

サイズ⇒大（※サイズ大では常にカウンターが表示されます）

【sizeに「tall」を指定】

<g:plusone size="tall" href="http://c-brains.jp/blog/wsg/"></g:plusone>

mixiチェック

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【識別キー】" data-url="【URL】" data-button="【デザイン指定】">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

data-buttonでデザインを指定します。
※【識別キー】はmixi Developer Dashboardで登録のうえ入手したものを入力してください。
詳細な手順はこちらから確認できます。
mixi Developer Center (ミクシィデベロッパーセンター)

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

アイコン(標準)

mixiチェック

【data-buttonに「button-1」を指定】

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【識別キー】" data-url="http://c-brains.jp/blog/wsg/" data-button="button-1">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

アイコン（「mixiチェック」表記）

mixiチェック

【data-buttonに「button-2」を指定】

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【識別キー】" data-url="http://c-brains.jp/blog/wsg/" data-button="button-2">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

アイコン(大)

mixiチェック

【data-buttonに「button-5」を指定】

<a href="http://mixi.jp/share.pl" class="mixi-check-button" data-key="【識別キー】" data-url="http://c-brains.jp/blog/wsg/" data-button="button-5">mixiチェック</a>
<script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

mixiイイネ！

<div data-plugins-type="mixi-favorite" data-service-key="【識別キー】" data-href="【URL】" data-show-faces="【イイネ！した人のアイコン表示指定】" data-show-count="【カウンターの表示指定】" data-show-comment="【コメントの入力欄を開くか指定】" data-width="450"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

data-show-facesでイイネ！した人のアイコン表示指定、data-show-countでカウントの表示指定、data-show-commentでコメントの入力を促すかどうか指定します。
以下、サンプル。（※識別キーがダミーだと表示されないので、ボタンは画像にしています。URLはバシャログに設定しています。）

カウンター表示⇒有り

【data-show-countに「true」】

<div data-plugins-type="mixi-favorite" data-service-key="【識別キー】" data-href="http://c-brains.jp/blog/wsg/" data-show-faces="false" data-show-count="true" data-show-comment="false" data-width="70"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

カウンター表示⇒無し、コメント⇒促す

【data-show-countに「false」、data-show-commentに「true」を指定】

<div data-plugins-type="mixi-favorite" data-service-key="【識別キー】" data-href="http://c-brains.jp/blog/wsg/" data-show-faces="false" data-show-count="false" data-show-comment="true" data-width="70"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

カウンター表示⇒有り、イイネ！した人のアイコン⇒有り

【data-show-countに「true」、data-show-facesに「true」を指定】

<div data-plugins-type="mixi-favorite" data-service-key="【識別キー】" data-href="http://c-brains.jp/blog/wsg/" data-show-faces="true" data-show-count="true" data-show-comment="false" data-width="450"></div><script type="text/javascript">(function(d) {var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true;s.src = 'http://static.mixi.jp/js/plugins.js#lang=ja';d.getElementsByTagName('head')[0].appendChild(s);})(document);</script>

evernote

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'【サイト名】',url:'【URL】'}); return false;"><img src="http://static.evernote.com/【画像指定】" alt="Clip to Evernote" /></a>

カスタマイズ方法は、imgに表示したいボタンを指定するだけ。
他に比べてかなりシンプル。
ボタンの種類はいろいろありますので、一覧で確認したい方はこちらをチェックしてください。

Evernote Site Memory | Evernote Corporation

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

アイコン、「CLIP」表示あり

【imgに「article-clipper.png」を指定】

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'バシャログ。',url:'http://c-brains.jp/blog/wsg/'}); return false;"><img src="http://static.evernote.com/article-clipper.png" alt="Clip to Evernote" /></a>

シンプルボタン（小）、「CLIP」表示なし

【imgに「site-mem-22.png」を指定】

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'バシャログ。',url:'http://c-brains.jp/blog/wsg/'}); return false;"><img src="http://static.evernote.com/site-mem-22.png" alt="Clip to Evernote" /></a>

ボタン（大）、「CLIP」表示あり

【imgに「article-clipper-vert.png」を指定】

<script type="text/javascript" src="http://static.evernote.com/noteit.js"></script>
<a href="#" onclick="Evernote.doClip({providerName:'バシャログ。',url:'http://c-brains.jp/blog/wsg/'}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></a>