情報科学屋さんを目指す人のメモ

方法・手順・解説を書き残すブログ。私と同じことを繰り返さずに済むように。

WordPressにオリジナルデザインのはてなブックマークボタンを設置する方法メモ

HTML (16) PHP (25) WordPress (77) オリジナルテーマ作成 (3) サンプルコード (2) はてなブックマーク (3)

前回ツイートボタンの作成方法を紹介しましたが、今回は、はてなブックマークボタンの設置方法をメモします。

今回作るはてなブックマークボタン

ボタンの表示例はこちら。

これをクリックすると、次のような、ブックマークをする画面が表示されます。従来のはてブボタンと同じですね。

テーマに記述するコード

このボタンは、次のコードで出力しています。次のコードを記事のテーマ(多くはsingle.php)の表示したい位置に追加すればOKです。

<?php
	$page_url=get_permalink();
	$page_title=trim(wp_title( '', false));
	$page_url_encoded=urlencode(mb_convert_encoding($page_url, "UTF-8"));
	$page_title_encoded=urlencode(mb_convert_encoding($page_title, "UTF-8"));
?>
<div class="entry-buttons">
	<a class="button-hatebu" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $page_url_encoded ?>&title=<?php echo $page_title_encoded ?>" target="_blank"><img src="(オリジナル画像のURLをここに書く)" alt="はてなブックマークする" width="240" height="70" /></a>
</div>

Tweetボタンのときよりコードは短めですが、こちらはURLエンコーディングしています。タイトルを取得するところでTrimを利用している理由は、ツイートボタンを設置したときと同じ理由です。

参考

ホームページにtwitter・はてブのオリジナルボタンを設置する方法 at ホームページ作成のハルリのブログ
Tweetボタンの時と同様、今回もここを参考にしました。タイトルの取得方法がちょっと違います。当ブログではHeadSpaceプラグインを使ってページタイトルを変更しているため、HeadSpaceの変更が反映されているwp_titleのほうを使っています(ここに関しては事実誤認があるかもしれません^^;)

現在のWordPressのバージョンは3.3.1です。

コメント(0)

新しいコメントを投稿