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

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

2015/10/15

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

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

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

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

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

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

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

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

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

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

ページ情報の入力

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

ここで注意すべきなのが、URLやタイトルに、トップページの値を入力してはいけないという点です。サイト訪問者があなたの記事を気に入ってブックマークに追加しようとしても、その記事ではなくトップページがブックマークされてしまうからです。

では、記事のURLやタイトルを入力するにはどうすればよいでしょうか?記事を書くたびにボタン設置用のコードを作成するのは、たいへん面倒です。

テンプレートタグを使う

そこで利用するのが、Wordpressのテンプレートタグです。テンプレートタグとは、Wordpressに対して何かを実行・取得させるときに使います。今回の例では、記事のURLやタイトルを取得・表示させる目的で利用します。

テンプレートタグは、index.phpやsingle.phpなどのテンプレートファイル内に記述します。

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

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

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

一部のタグが特殊文字に変換

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


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

スタンダード (B!+ブックマーク数を表示)

このエントリーをはてなブックマークに追加

バーティカル (大きめのサイズでB!+ブックマーク数を表示)

このエントリーをはてなブックマークに追加

シンプル B!のみ(ブックマーク数の表示なし)

このエントリーをはてなブックマークに追加

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

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

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

WordPressテーマの多くは、ページの種類(投稿、固定ページなど)によって異なるテンプレートファイルを利用しています。一般的には、投稿はsingle.php、固定ページはpage.phpが使われています。

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


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

おすすめの書籍

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

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

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

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

カテゴリー

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

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