「はてなブックマーク」ボタン設置

「はてなブックマーク」ボタンの作成方法から設置、URLの判定等について説明しています。

「はてなブックマーク」ボタンの概要

 「はてなブックマーク」ボタンは株式会社はてなが提供しているはてなブックマーク機能の一部で本サイトにも設置している以下のボタンです。

「はてなブックマーク」ボタンの設置1

 「B!」や「B! ブックマーク」、「B! Bookmark」等と表示され、カウントが付いているタイプと付いていないタイプがあります。

 はてなブックマークは、例えば会社で見たホームページを自宅でも見たい時、ブラウザでブックマークすると会社のパソコンでしかブックマークされませんが、はてなブックマークを使うとWebからブックマークを見れる為、自宅ですぐに同じホームページを見る事が出来ます。

 又、そのブックマークは設定に寄っては他のユーザーからも参照可能で、ブックマークして貰う事で訪問者が増える可能性がありますし、外部リンクとして扱われる為、検索結果の向上が望めます。

 ブラウザのアドレスからURLをコピーする等ブックマークの方法は様々ですが、「はてなブックマーク」ボタンをクリックする事でブックマーク可能なため、ボタンを設置する事でブックマークをし易くなります。

 設置するのは無料でユーザー登録も不要なため、クリックしてくれる人が殆どいなくても設置しておいて損はないと思います。

「はてなブックマーク」ボタンの作成

 「はてなブックマーク」ボタンの作成は「はてなブックマークボタン」で行います。

「はてなブックマーク」ボタンの設置2

 上記の右には各項目を選択した時のプレビューが表示されます。選択を変更する度にどのようなボタンになるか確認が出来ます。特になにも設定せずにコードをそのまま利用出来ますが、以下に設定の内容を説明します。

・ボタンのタイプ
 表示されているボタンのタイプを選択します。
・ページのアドレス
 ホームページのURLを入力します。例えばexample.comやexample.com/index.htmlです。
・ページのタイトル
 ホームページのタイトルを入力します。
・ブックマーク数
 表示、非表示、バーティカルから選択します。表示にすると以下のようにブックマークしてくれた人の数が表示されます。
「はてなブックマーク」ボタンの設置3
 バーティカルにすると以下のように数字が上に大きく表示されます。ボタンのタイプで「ブックマーク」と表示されたタイプを選択しておく必要があります。
「はてなブックマーク」ボタンの設置4
・表示言語
 ボタンのタイプで「ブックマーク」を選択しているとBookmarkと英語にする事も出来ます。

htmlへの反映

 選択した内容のプレビューは随時画面右の緑枠部分に表示されます。

 又、設定は自動的に右の赤枠部分に表示されるコードに反映されます。

「はてなブックマーク」ボタンの設置5

 プレビューの内容で良ければ上記のコードをコピーして「はてなブックマーク」ボタンを表示したい場所に張り付けます。

URLの入力について

 URLは入力しなくても自動判定してくれます。このため、URLを入力せずに表示されたコードを全てのページに張り付けて大丈夫です。

 但し、トップページは気を付ける必要があります。例えばexample.comとexample.com/index.htmlのURLを統一していなくて両方でトップページが表示される可能性がある場合、それぞれ違うURLと認識してしまいます。

 この場合、URLを入力しておくとどちらかに統一出来ます。例えばexample.comと入力しておくとexample.com/index.htmlとブラウザで表示されている時にクリックされてもexample.comと認識されます。トップページ等異なるURLで同じページを表示する場合は指定しておいた方がいいと思います。

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

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)