「はてなブックマークボタン」をWordPressの個別記事に設置する方法

「はてなブックマークボタン」をWordPressに設置する場合、公式ページで生成したコードをそのまま貼ると個別記事に対応できないという問題が発生します(サイトのトップページのブックマークになってしまいます)。

はてなブックマークボタン

今回はこの「はてブボタン」をWordPressの個別記事にブックマークできるようにする手順を解説します。

はてなブックマークボタンとは

はてなブックマークボタンは、はてなブックマークのコメントが読めたり、その場でブックマークを追加できたりする、ウェブページ用のボタン(ガジェット、ブログパーツ)です。

このボタンをあなたのWebサイトに設置すると、何人にブックマークされているかが一目で分かったり、ユーザーがあなたのサイトを離れることなくブックマークする機能を提供できます。ブックマーク時のタグや外部連携機能はもちろんのこと、ユーザーのお気に入りのブックマーク状況や新着ブックマークコメントを読むこともできます。

はてなブックマークボタンの作り方

まずは下記ページより自分のサイトのコードを生成します。
ページのアドレスはとりあえず自分のサイトのURLでOK。

LINK:はてなブックマークボタンの作成・設置について

サンプルコードはこちら。

<a href="http://b.hatena.ne.jp/entry/https://www.webernote.net/" class="hatena-bookmark-button" data-hatena-bookmark-title="weberNote" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="https://www.webernote.net/wp-content/uploads/HLIC/937135c1cdddab3b3f58e47d996c0f71.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>

上記コードの2ヶ所をWordPress用に書き換えます。

1.「https://www.webernote.net/」を

<?php the_permalink() ?>

に変更。

2.「data-hatena-bookmark-title=”weberNote”」を

<?php the_title(); ?>

に変更。これで完成です!

ちなみに画像を変えたいときは

<img src="https://www.webernote.net/wp-content/uploads/HLIC/937135c1cdddab3b3f58e47d996c0f71.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" />

のパスや縦横幅を変更すればOKです。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント