ソーシャルブックマークのボタンをつくる
最近よく見かけるソーシャルブックマークのボタンを付けてみることにしました。
ブックマークするための複数のボタンをまとめて設置できるサービスは、ウェブ上にたくさんあります。コードを貼り付けるだけなので、設定も簡単・・・
簡単すぎておもしろくない。特にボタンの形状は、たいていブックマークサービスのアイコンを使用しているので、ボタンに見えるものもあるし、見えないものもある。並べてみても統一感がありません。
そんなわけで、当サイトに合わせてアイコンから作ってみました。
まずは、それぞれのアイコンを作成。サイトのイメージに合わせてあまり目立ちすぎない程度に色調を統一。サイズもそろえてボタンふうにアレンジ。通常のアイコンとマウスを重ねた時用の二種類用意します。それからマウスカーソルを重ねたときにボタン名を表示するようにフキダシふうタイトルも追加（ボタンのタイトルは、リンクタグにtitle属性を加えておけば一応表示するんだけど、ワンテンポ遅れるし、この手作り感がいいかなと思って）
次に、クリックしたときにブックマークサービスに飛んで、タイトルやurlを入れてくれるようにコードを設定します。
ここで使ったブックマークサービスは、上から順に
twitter、delicious、Yahoo!ブックマーク、Googleブックマーク、はてなブックマーク、livedoorクリップ。
<ul class="social_bookmarks">
<li class="twitter_icon"><a href="http://twitter.com/home?status=<?= urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")) ?> <?php the_permalink() ?>"target="_blank"><img src = "保存したアイコンのURL" alt = "twitter" /><span>twitterでつぶやく</span></a>
</li>
<li class="delicious_icon"><a href="http://delicious/post?url=<?php the_permalink() ?>&amp;amp;amp;amp;title=<?= urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")) ?>" target="_blank"><img src = "保存したアイコンのURL" alt = "del.icio.us " /><span>delicious</span></a>
</li>
<li class="yahoo_icon"><?php echo '<a href="http://bookmarks.yahoo.co.jp/action/bookmark?t='.urlencode(the_title('','',false)).'&amp;amp;amp;amp;u='.urlencode(get_permalink()).'" target="_blank"><img src = "保存したアイコンのURL" alt = "Yahoo!ブックマーク" /><span>Yahoo!ブックマーク</span></a>';?>
</li>
<li class="google_icon"><a href="http://www.google.com/bookmarks/mark?op=edit&amp;amp;amp;amp;bkmk=<?php the_permalink() ?>&amp;amp;amp;amp;title=<?= urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")) ?>" target="_blank"><img src = "保存したアイコンのURL" alt = "Googleブックマーク" /><span>Googleブックマーク</span></a>
</li>
<li class="hatena_icon"><a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" target="_blank"><img src = "保存したアイコンのURL" alt = "はてなブックマーク" /><span>はてなブックマーク</span></a>
</li>
<li class="livedoor_icon"><a href="http://clip.livedoor.com/redirect?link=<?php the_permalink() ?>&amp;amp;amp;amp;title=<?php bloginfo("name"); ?>%20:%20<?= urlencode(mb_convert_encoding(the_title("","",false),"UTF-8")) ?>" target="_blank"><img src = "保存したアイコンのURL" alt = "livedoorクリップ" /><span>livedoorクリップ</span></a>
</li>
</ul>
JavaScriptは使わないのと、WordPlessを前提にしてあります。
twitterはブックマークじゃないし、Googleはブックマークだけどソーシャルじゃないというのは、ちょっと置いておいて・・・
CSSはこんな感じ
ul.social_bookmarks a img {
border: none;
}
ul.social_bookmarks {
list-style: none;
width: 145px; /*ボタンの数に合わせてサイズ調整*/
margin: 1em 0 1em auto;/*右寄せ*/
padding: 0px;
}
ul.social_bookmarks li { /*横並びに*/
float: left;
width: 16px;
height: 16px;
margin-left: 7px;
}
ul.social_bookmarks:after { /*floatの解除*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.social_bookmarks ul li.twitter_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
.social_bookmarks ul li.delicious_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
.social_bookmarks ul li.yahoo_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
.social_bookmarks ul li.google_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
.social_bookmarks ul li.hatena_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
.social_bookmarks ul li.livedoor_icon {
background-image: url("マウスを重ねたときの画像URL") ;
background-repeat: no-repeat;
}
ul.social_bookmarks span {
margin: 0;
padding: 0;
background-image: url("タイトル用フキダシ画像のURL");
background-repeat: no-repeat;
width: 116px;
height: 34px;
position:relative;
top: -50px;
left: -50px;
text-align: center;
font-size: 11px;
line-height: 20px;
color:black;
display: none; /*ボタンタイトルを非表示に*/
}
ul.social_bookmarks a:hover span { /*マウスを重ねたときにボタンタイトル表示*/
display: block;
}
ul.social_bookmarks a:hover { /*ボタンタイトルの下線消去*/
text-decoration: none;
}
ul.social_bookmarks a:hover img { /*マウスを重ねたときボタン画像を非表示にしてバックグラウンド画像を表示*/
visibility: hidden;
}
リストにしたソーシャルブックマークボタンを横並びに変えます。
ボタンのバックグランド画像（ボタン-02）を設定し、その上にボタンイメージ（ボタン-01）を重ねます。
ボタンにマウスカーソルを重ねたとき、ボタン-01を非表示にして、その下のボタン-02が現れるようにします。
同時に非表示にしてあったボタンタイトルを表示。
せっかく作ったので、フリーアイコンとして公開しておきます。気に入ったら使ってみてください。もしリクエストがあれば他のボタンも作ります（気長に待ってもらえればですが・・・）
わざわざこんな手間をかけるより簡単にソーシャルブックマークボタンを並べたい人は、ネット上を探してみて下さい。ブログに貼り付けるだけで設置できるのがいろいろ見つかります。
- 楽：技林ブログ：twitterで「これつぶやいて！」というリンクの作り方
- PHP & JavaScript Room：複数のソーシャルブックマークサービス追加ボタンを一括表示
- すがねの-SEO ブログ−：WordPress用：ソーシャルブックマークボタンの設置とブックマーク数を表示する方法
- かずブログ：ブログ記事にソーシャルブックマークの登録アイコンをたくさん追加する（forMT）
MovableType用ですが、基本は同じ。 - Komodo Media：Social Network Icon Pack
とっても美しいブックマーク用アイコン。日本向けじゃないのが残念。
「中288ピクセル」
「小144ピクセル」
←アドレスバーに表示されてるかな。対応していないブラウザもあるみたいだけど。
