WordPressにソーシャルブックマークを設置

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

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

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

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でスタイルを整えて完了です。

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

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS