はてなブックマークボタンの設置方法 個別ページ編(WordPress)

はてなブックマークボタンを個別ページ用に設定する方法を解説します。今回はWordPressを対象とします。

目次

  • タグの取得
  • WordPress用カスタマイズ
  • 完成形

タグの取得

なにはともあれタグの取得です。まずは公式ページにアクセスしましょう。


こんな感じのページです。設定項目は

  • ボタンのタイプ
  • サイトのドメイン名
  • サイト名
  • ブックマーク数の表示タイプ
  • 言語
になります。今回は後でカスタマイズする前提なので、ボタンのタイプ・ブックマーク数の表示タイプ・言語だけきっちり設定して、サイトのドメイン名・サイト名は適当に何か文字列を入れておきましょう。

貼り付けるタグが出力されたら、とりあえず適当なテキストエディタにコピーしておきましょう。

WordPress用カスタマイズ

ここからが本題になります。タグの編集作業です。頑張っていきましょう。 (上の例ではサイトURLはhogehoge.com サイト名は「ほげほげ」)
おそらくこんな感じのタグを取得できたと思います。まずはこれを2つに切ります。<script type=”text/javascript” で始まるところを探して、ここで切ります。切ったあとは こんな感じになります。下側のタグ(Script要素)は、はてなブックマークボタンを設置するページの何処かで(Headタグが終わる直前かBodyタグが終わる直前がメジャー)1回登場すればいいです。

今回カスタマイズするのは上側のタグ(A要素)です。ここから本格的にカスタマイズしていきます。今回はWordPressを使用している前提なので、ページタイトルとURLの取得はWordPressの機能にやらせます。まずはページURLのセットです。

取得したタグの冒頭部分です。entry/以下の文字列(ここではhogehoge.com)をこのように置き換えます。

<?php the_permalink();?>は、WordPressで現在表示されているページのURLを取得するテンプレートタグです。これでURL設定は完了です。タイトル設定に移ります。

タイトルは、

data-hatena-bookmark-title=”ほげほげ” の「ほげほげ」をページタイトルに置き換えればOKです。

<?php wp_title();?>は、WordPressでページタイトルを取得するテンプレートタグです。基本的にはこれでOKですが、テーマでこのタグに引数が指定されている場合などはそちらに合わせてください。

完成形

完成形はこんな感じです。 完成したタグを、はてなブックマークボタンを表示したい場所に貼ればOKなはずです。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

Bitcoin:

Monacoin:

Litecoin: