taccuma note

WordPressにはてなブックマークボタンを設置する方法

はてなブックマークボタンの設置

自分のホームページにはてなブックマークボタンを設置したいと思ったら、はてブ公式からブックマークボタン用のソースコードを取得して、それを自分のサイトのボタンを設置したい場所に貼り付ければOKです。

ただし、WordPressの場合は取得したコードをそっくりそのままコピペしてもボタンとして機能しません。はてブボタンのソースコード作成時にページのアドレスとページのタイトルを入力する欄がありました。ここに自分のブログのトップページURLとブログ名を入れてしまうと、毎回自分のブログのトップページとブログ名がはてブされてしまうことになります。どうせボタンを設置するなら各ブログ記事ごとに、その記事のタイトルをつけてはてブして欲しいと思いませんか?

ブログの記事を新しく書く度にはてブ用ソースコードを取得して、投稿画面に貼り付けるのも面倒です。それでは一体どうしたらよいでしょうか?

この記事では、プラグインを使わず自分のWordPressにはてブボタンを設置するためのソースコードの取得、修正方法を簡単にご説明します。

取得したソースコードを一部修正する必要があった!

自分のブログの情報を記入する...?

ものは試しにこのブログの情報を正直に入力してみます・・・「サイト名」、ブログURLなどそのまま記入。

ただし、このままだと先ほども言いましたが、はてブボタンを押してブックマークしてくれた人が毎回ブログの「トップページ」と「ブログ名」をはてブすることになります。

そういうボタンを望んではいませんよね?やはり、ブログの各記事のタイトルとURLがキチンとボタンに反映されるようなソースが欲しいです。

だからといって、毎回ブログを書く度に……このはてブボタンのソースコードを取得して個別の記事に貼り付けるのも面倒くさいです(笑)

とりあえず取得したはてブボタン用ソースコードの一部をWordPressテンプレートタグで置き換える作業が必要
<a href="http://b.hatena.ne.jp/entry/taccuma.com" class="hatena-bookmark-button" data-hatena-bookmark-title="taccuma note" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

とりあえず取得してみた上のコードの中で、ピンク色のマーカーで印をつけた2カ所をWordPressのテンプレートタグで置き換えます。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20″ height="20″ style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script>

前半の<?php the_permalink() ?>ですが、これはブログの記事のパーマリンク(URL)をはき出すテンプレートタグです。

後半の<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>ですが、これは…例えば今あなたがご覧になってるこの記事をあなたがブックマークしたとして、そのブックマークのタイトルを「WordPressにはてなブックマークボタンを設置する方法 | taccuma note」と表示させるためのモノです。

以上の2カ所を修正さえすれば、OKです!!

まとめ

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20″ height="20″ style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async></script>

WordPressにはてブボタンを設置する時は上記の修正後ソースコードを使ってください。設置場所はsingle.phpのボタンを設置したい箇所です。

一つのページに複数のはてブボタンを設置する場合は、ソース後半のJavaScriptは一回の記述でOKです。

この記事をシェアする

コメント

コメントは管理人の承認後に公開されます...

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最近の投稿

おすすめ

タグクラウド

カテゴリー