memocarilog

普段参考になるような記事に出会った時にブックマークしますが、その記事の下や上にソーシャルブックマークのリンクがあると便利です。

このブログにもソーシャルブックマークのアイコンを設置してみました。ソーシャルブックマークも沢山ありますが、このブログでは５つのアイコンを設置しました。

ブックマークアイコンを設置した手順

1. まず、どこのブックマークサービスのシェアボタンを設置するか決め、アイコンの画像を手に入れます。（各ソーシャルブックマークサービスからも提供されているので、各サービスから公式のものを手に入れてもいいですね）私は丁度よいものが見つからなかったので自分で作りました。

2. アイコンをテーマの画像ファイルへアップロードします。

3. アイコンを設置したい箇所へ下記のコードを記入します。
（今回はこのブログのテーマファイルのimagesというファイルに、画像ファイルを入れた場合のコードです。場合により画像へのパスは変更して下さい。）

はてなブックマーク

<a href="http://b.hatena.ne.jp/append?<?php the_permalink() ?>" title="このエントリをはてなブックマークに登録" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/hatebu.png" alt="このエントリをはてなブックマークに登録" border="0" /></a>

はてなブックマーク数を表示

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" target="_blank">
<img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>" alt="はてなブックマーク" title="はてなブックマーク" border="0" />
</a>

Googleブックマーク

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink() ?>&title=<?php the_title(); ?>" title="Google Bookmarksにブックマーク" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/google.png" alt="Google Bookmarksにブックマーク" border="0" /></a>

ヤフーブックマーク

<a href="http://bookmarks.yahoo.co.jp/action/bookmark?t=<?php the_title(); ?>&u=<?php the_permalink() ?>" title="Yahoo!ブックマーク" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/yahoo.png" style="border="0" /></a>

livedoorクリップ

<a href="http://clip.livedoor.com/clip/add?link=<?php the_permalink() ?>&title=<?php the_title(); ?>&jump=ref" title="livedoorクリップにブックマーク" target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/livedoor.png" alt="livedoorクリップにブックマーク" border="0" /></a>

Delicious

<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>" title="deliciousにブックマーク" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/deli.png" alt="deliciousにブックマーク" border="0" />
</a>

あとはCSSでスタイルを整えて完了です。

今回コチラのブログ記事を参考にさせていただきました。
日刊ウェブログ式 【備忘録】ソーシャルブックマークアイコンの設置
上記の５つ以外のソーシャルブックマークサイトのリンクの貼り方も載っておりとても分かりやくかったです。ありがとうございます。