お使いのブラウザは最新版ではありません。最新のブラウザでご覧ください。

CNET Japan ブログ

Web2.0のアクセスアップ・SEO対策:「はてなブックマークに追加」ボタンを設置する

2006/08/22 00:15
  • このエントリーをはてなブックマークに追加

ミキ・オキタWebClip ウェブデザインのニュース

「はてなブックマークに追加」「はてなブックマークを見る」を設置する

こんにちは。“時代の3歩先をねらうWeb屋”ミキ・オキタです。
このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの業界動向をお伝えしている。

前回より続いて、Web2.0的なアクセスアップ・SEO対策について。

前回記事:Web2.0のアクセスアップ・SEO対策

今回は実践編。

サイトやブログへのアクセスアップの話だが、聞いた話では、検索エンジンからの流入に加え、はてなやオールアバウトからの流入も馬鹿にできなくなりつつあるらしい。

とくにCNET Japan 読者ブログでは、はてなブックマークと連携して、User数が表示されるため、その影響は大きいと推測される。
そこで、記事の中に「はてなブックマークに追加」「はてなブックマークを見る」のふたつのボタンを設置してみることにする。
とくに、1クリックでダイレクトにはてなブックマークに追加させる「はてなブックマークに追加」は、はてな公式ヘルプには記述がないテクニックだ。

はてな公式ヘルプでは「はてなブックマークを見る(このエントリーを含むはてなブックマーク)」についての説明はあるが、僕が読者の立場でいうと、ブックマークするのに、1クリックでも少なくしたい。
なので、はてなブックマークのブックマークレットを改造して、ダイレクトにブックマーク登録画面を表示する「はてなブックマークに追加」というボタンも作成してみた。

ステップ1 「はてなブックマークに追加」を設置する

はてな公式ヘルプには書かれていないせいか、「はてなブックマークに追加」ボタンはあまり設置されていないようだ。
ただ、経験的に、直接的な表現のほうがユーザの行動を喚起しやすいような気がするので、本当はこっちのボタンのほうがアクセスアップには効果的と思う。

参考:はてなブックマーク 公式ブックマークレット(ブラウザ用)

方法としてはhttp://b.hatena.ne.jp/add?に続けて、いくつかのデータを投げてやればいいようだ。
データはJavaScriptを利用して生成する。
公式ブックマークレットは、ポップアップと非ポップアップの2種類があったが、ブログの記事に設置する前提で考えると、最近はブラウザやGoogle Toolbarのポップアップブロッカーがあるので、あえて非ポップアップを採用した。

ソース:

<A HREF="javascript:window.location='http://b.hatena.ne.jp/add?mode=confirm&title='+escape(document.title)+'&url='+escape(location.href);"><img src="http://b.hatena.ne.jp/images/append.gif" alt="はてなブックマークに追加" width="16" height="12" border="0" />はてなブックマークに追加</A>

これを表示すると下記の通り。

はてなブックマークに追加はてなブックマークに追加

ちなみに同様のことを実現する手段として「http://b.hatena.ne.jp/append?」に続けて自分のページのURLを書くという方法もあるが、この方法はユーザが事前にはてなにログインしている必要がある。
非ログイン状態からでは、ログイン認証のあと、ブックマーク追加画面に移動してくれなかった。

ステップ2 「はてなブックマークを見る(このエントリーを含むはてなブックマーク)」を設置する

はてな公式ヘルプには、HTMLテンプレートをいじる方しか掲載されている。
CNET Japan 読者ブログはブロガー自身はテンプレートにふれられないので、JavaScriptを利用して作成してみた。

参考:はてな公式ヘルプ

基本的にはhttp://b.hatena.ne.jp/entry/というURLに続けて、自分のページのURLを投げてやればいいようだ。

例:
http://b.hatena.ne.jp/entry/(自分のページのURL)
http://b.hatena.ne.jp/entry/http://rblog-media.japan.cnet.com/webclip/2006/08/web20seo_b273.html

自分のページのURLを、JavaScriptで自動取得するようにしてみたのが下記。

ソース:

<A HREF="javascript:window.location='http://b.hatena.ne.jp/entry/'+escape(location.href);"><img src="http://d.hatena.ne.jp/images/b_entry.gif" alt="はてなブックマークを見る" width="16" height="12" border="0" />はてなブックマークを見る</A>

これを表示するとこうなる。

はてなブックマークを見るはてなブックマークを見る

ステップ3 「はてなRSSに追加」を設置する

せっかくここまでやったので、はてなRSSのユーザには、RSSも購読してもらいたい。
「はてなRSSに追加」ボタンも設置してみることにする。

参考: はてな公式ヘルプ

下記は、記事のURLをJavaScriptで自動取得したもの。
たいていのブログは大丈夫と思うが、エントリごとのHTMLテンプレート上でもRSS Autodiscovery機能が記述されていないと、うまくいかないかもしれない。

ソース:

<a href="javascript:window.location='http://r.hatena.ne.jp/append/'+escape(location.href);" title="はてなRSSに追加"><img src="http://r.hatena.ne.jp/images/addto_w.gif" alt="はてなRSSに追加" border=0>はてなRSSに追加</a>

表示は下記。

はてなRSSに追加はてなRSSに追加

尚、今回作成したソースコードは、ほとんど公式サイトのものをコピペしただけなので、再利用はご自由にどうぞ。ただし、再利用はあくまで各自の自己責任でお願いいたします。

もし再利用した際には、このページへのリンク・トラックバックをいただけると嬉しい。
ついでに上の「はてなブックマークに追加」ボタンを押して、このページもあなたのブックマークに追加していただけるともっと嬉しい。
CNET Japan 読者ブログはボランティア制なので、モチベーション維持のためにも、ご協力お願いいたします。

もっとも、こういうTIPSは、既に誰かがつくっているような気もするが・・・。

番外編 CNET Japan 読者ブログ専用カスタマイズ

さて、ここからは同じCNET Japan 読者ブログのブロガーの方のための記事。
というのは、上記ソースコードに加え、CNET Japan 読者ブログ用にいくつかカスタマイズを加えてある。
(その分、記事ごとにパラメータの設定が必要)

 ※投稿時に改行設定を「なし」にする必要があり。

ソースコードについて、細かい解説はしないので、理解できる方のみご利用ください。

ソース:

<!-- ______基本情報 必ず記事の一番上に記述する______ -->
<script language="JavaScript"><!--
var rblog_Title = 'WebClip:Web2.0のアクセスアップ・SEO対策:「はてなブックマークに追加」ボタンを設置する'; //記事のタイトル
var rblog_URL = 'http://rblog-media.japan.cnet.com/webclip/2006/08/web20seo_b273.html'; //記事のURL
// --></script>

<!-- ______「はてなブックマークに追加」ボタン______ -->
<script language="JavaScript"><!--
function rblog_b_hatena_add_button() {
document.write( '<A HREF="http://b.hatena.ne.jp/add?mode=confirm&title=' + escape(rblog_Title) + '&url=' + escape(rblog_URL) + '"><img src="http://b.hatena.ne.jp/images/append.gif" alt="はてなブックマークに追加" width="16" height="12" border="0" />はてなブックマークに追加</A>' );
}
rblog_b_hatena_add_button();
// --></script>

<!-- ______「はてなブックマークを見る」ボタン______ -->
<script language="JavaScript"><!--
function rblog_b_hatena_entry_button() {
document.write( '<A HREF="http://b.hatena.ne.jp/entry/' + escape(rblog_URL) + '"><img src="http://d.hatena.ne.jp/images/b_entry.gif" alt="はてなブックマークを見る" width="16" height="12" border="0" />はてなブックマークを見る<img src="http://b.hatena.ne.jp/entry/image/' + escape(rblog_URL) + '" border="0"></A>' );
}
rblog_b_hatena_entry_button();
// --></script>

<!-- ______「はてなRSSに追加」「はてなRSSを見る」ボタン______ -->
<script language="JavaScript"><!--
function rblog_r_hatena_append_button() {
document.write( '<a href="http://r.hatena.ne.jp/append/' + escape(rblog_URL) + '"><img src="http://r.hatena.ne.jp/images/r_add.gif" title="r_add.gif" alt="r_add.gif" width="16" height="16" border=0>はてなRSSに追加</a>' );
}
rblog_r_hatena_append_button();
function rblog_r_hatena_entry_button() {
document.write( '<a href="http://r.hatena.ne.jp/feed/' + escape(rblog_URL) + '"><img src="http://r.hatena.ne.jp/images/r_entry.gif" title="r_entry.gif" alt="r_entry.gif" width="16" height="16" border=0>はてなRSSを見る</a>' );
}
rblog_r_hatena_entry_button();
// --></script>

表示結果:

関連記事

RSSリーダーにご登録ください


サイトポリシー
  • このブログはすべてリンク・コメント・トラックバックフリーといたします。また、引用元の明記を条件に、転載も自由といたします。ご興味いただけそうな方へのご紹介をぜひお願いいたします。
  • CNET Japan読者ブログ「WebClip ウェブデザインのニュース」はミキ・オキタによって運営されています。掲載されている全ての内容は、シーネットネットワークスジャパン および CNET Japan 編集部の見解・意向を示すものではありません。
  • CNET Japan読者ブログの読者ブロガーはボランティアです。記事を投稿したことによる報酬は受けておりません。
  • このブログのご利用により生じたトラブル・損害などに対する責任は負いかねます。

プロフィール

ミキ・オキタ / Miki OKITA
得意分野:ウェブサイトの構築とマーケティング戦略
経歴:
・1996年からインターネットに触れ、ウェブデザインにのめりこむ。
・ウェブデザインのアルバイトでオンラインショップの立ち上げから運営までを経験。その経験のなかで、マーケティング戦略としてのウェブデザインを知る。
・2000年にはプロデュースしたバナー広告が平均の11倍のクリックレートを記録。
・就職後、システム営業を経て、現在はIT系商社のウェブ戦略に関わる。

アクセスカウンタ:

※このエントリは CNET Japan ブロガーにより投稿されたものです。朝日インタラクティブ および CNET Japan 編集部の見解・意向を示すものではありません。
運営事務局に問題を報告

最新ブログエントリー

個人情報保護方針
利用規約
訂正
広告について
運営会社