1. 記事・ページの投稿
  2. はてなブックマークボタンの設置方法

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

2015/10/15

WordPressで作成したサイトに、はてなブックマークボタン設置する方法をご紹介します。はてなブックマークは、オンラインにブックマークを無料で保存できるソーシャルブックマークサービスです。

はてなブックマークボタンの機能

現在公開されている『はてなブックマークボタン』には、以下の機能があります。

  • ブックマークへの追加
  • ブックマーク数のカウンター表示
  • コメントやブックマークされたページの情報が集まるエントリーページへのリンク

デザインは3種類あり、お好みのボタンを選んで設置できます。

このエントリーをはてなブックマークに追加 スタンダード (B!+ブックマーク数を表示)
このエントリーをはてなブックマークに追加 バーティカル (大きめのサイズでB!+ブックマーク数を表示)
このエントリーをはてなブックマークに追加 シンプル B!のみ(ブックマーク数の表示なし)

『はてなブックマークボタン』についての詳細は、こちらのページで紹介されています。

はてなブックマークボタンのコード生成

はてなブックマークボタンを設置するためのコードは、こちらのページで作成できます。
はてなブックマークボタンのコード生成

ページ情報の入力

はてなブックマークボタンを設置するページの情報を入力します。項目は、「URL」と「タイトル」です。

ここでやってしまいがちなのが、サイトの「トップページ」の情報を入力してしまうということです。サイト訪問者があなたの記事を気に入って、ボタンを使ってブックマークに追加しようとしても、その個別記事でなくトップページがブックマークされてしまうのではボタンを設置する意味がありません。

では、記事の「URL」や「タイトル」を入力するにはどうすればよいでしょうか?記事を書くたびに、ボタン設置のコードを作成するなんてことは非常に面倒ですよね?

テンプレートタグを使う

そこで利用するのが、Wordpressのテンプレートタグと呼ばれるものです。テンプレートタグとは、Wordpressに対して何かを実行・取得させるときに使います。テンプレートタグは、「index.php」や「single.php」などのテンプレートファイル内に記述します。

今回使うテンプレートタグは、下記の2つです。

  • 「URL」:<?php the_permalink();?>
  • 「タイトル」:<?php the_title();?>

これらをそのまま入力してコードを作成できれば便利なのですが、残念ながら問題が生じてしまいます。それは、一部のタグが特殊文字に変換されてしまう点です。
一部のタグが特殊文字に変換

なので、ここでは適当な文字を入力しておいて、コード生成後にテンプレートタグと置き換えるとよいでしょう。


コード生成が面倒な場合は、下記をお使いください。(ご利用は、自己責任でお願いいたします)

このエントリーをはてなブックマークに追加 スタンダード (B!+ブックマーク数を表示)
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="<?php the_title();?>"
 data-hatena-bookmark-layout="standard"
 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="async"></script>
このエントリーをはてなブックマークに追加 バーティカル (大きめのサイズでB!+ブックマーク数を表示)
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="<?php the_title();?>"
 data-hatena-bookmark-layout="vertical"
 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="async"></script>
このエントリーをはてなブックマークに追加 シンプル B!のみ(ブックマーク数の表示なし)
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink();?>"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="<?php the_title();?>"
 data-hatena-bookmark-layout="simple"
 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="async"></script>

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

ここまでに紹介したコードはテンプレートタグを利用していますので、テンプレートファイルの中に記述する必要があります。テンプレートファイルについて、くわしくは下記ページをご覧ください。

では、コードはどのテンプレートファイルに記述すればよいのでしょうか。それは、サイト内のどのページにブックマークボタンを表示させるかによって決まります。

WordPressテーマの多くは、ページの種類(投稿、固定ページなど)によって異なるテンプレートファイルを利用しています。たとえば、投稿は「single.php」、固定ページは「page.php」などがあります。

たとえば、投稿記事内だけにブックマークボタンを設置するなら、「single.php」のみコードを記述すればいいわけです。


テンプレートファイルにコードを記述する方法がよくわからない場合は、プラグインを利用するといいでしょう。複数のソーシャルブックマークボタンを設置できるプラグインを、下記ページでご紹介しています。

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。