自分のホームページにはてなブックマークボタンを設置したいと思ったら、はてブ公式からブックマークボタン用のソースコードを取得して、それを自分のサイトのボタンを設置したい場所に貼り付ければOKです。
ただし、WordPressの場合は取得したコードをそっくりそのままコピペしてもボタンとして機能しません。はてブボタンのソースコード作成時にページのアドレスとページのタイトルを入力する欄がありました。ここに自分のブログのトップページURLとブログ名を入れてしまうと、毎回自分のブログのトップページとブログ名がはてブされてしまうことになります。どうせボタンを設置するなら各ブログ記事ごとに、その記事のタイトルをつけてはてブして欲しいと思いませんか?
ブログの記事を新しく書く度にはてブ用ソースコードを取得して、投稿画面に貼り付けるのも面倒です。それでは一体どうしたらよいでしょうか?
この記事では、プラグインを使わず自分のWordPressにはてブボタンを設置するためのソースコードの取得、修正方法を簡単にご説明します。
取得したソースコードを一部修正する必要があった!
ものは試しにこのブログの情報を正直に入力してみます・・・「サイト名」、ブログURLなどそのまま記入。
ただし、このままだと先ほども言いましたが、はてブボタンを押してブックマークしてくれた人が毎回ブログの「トップページ」と「ブログ名」をはてブすることになります。
そういうボタンを望んではいませんよね?やはり、ブログの各記事のタイトルとURLがキチンとボタンに反映されるようなソースが欲しいです。
だからといって、毎回ブログを書く度に……このはてブボタンのソースコードを取得して個別の記事に貼り付けるのも面倒くさいです(笑)
[html]
<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>
[/html]
とりあえず取得してみた上のコードの中で、ピンク色のマーカーで印をつけた2カ所をWordPressのテンプレートタグで置き換えます。
[html]
<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>
[/html]
前半の<?php the_permalink() ?>
ですが、これはブログの記事のパーマリンク(URL)をはき出すテンプレートタグです。
後半の<?php wp_title(' | ', true, 'right'); ?><?php bloginfo('name'); ?>
ですが、これは…例えば今あなたがご覧になってるこの記事をあなたがブックマークしたとして、そのブックマークのタイトルを「WordPressにはてなブックマークボタンを設置する方法 | taccuma note」と表示させるためのモノです。
以上の2カ所を修正さえすれば、OKです!!
まとめ
[html]
<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>
[/html]
WordPressにはてブボタンを設置する時は上記の修正後ソースコードを使ってください。設置場所はsingle.php
のボタンを設置したい箇所です。
コメント