CNET Japan

最終更新時刻：2009年11月26日(木) 10時56分
CNET Japanからのお知らせ
ついに発売「Windows 7」のチカラ
誰にでもわかる「Chrome OS」
ビジネスに効くTwitterの可能性
「CNET Japanモバイル版β」登場
トップ  »  ブログ  »  WebClip - ウェブ制作、UXD／IA、アクセシビリティ  »  Web2.0のアクセスアップ・SEO対策：「はてなブックマークに追加」ボタンを設置する
WebClip - ウェブ制作、UXD／IA、アクセシビリティ
8

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

公開日時：
2006/08/22 00:15
著者：
ミキ・オキタ

コメント(0)

ブックマーク(-)

ミキ・オキタ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倍のクリックレートを記録。
・就職後、システム営業を経て、現在はＩＴ系商社のウェブ戦略に関わる。

アクセスカウンタ：

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

ログインしてコメントする このエントリを評価する
運営事務局に問題を報告 この記事についてブログを書く（ブロガー専用）

このエントリーへのコメント

ブログにコメントするにはCNET_IDにログインしてください。

トップ  »  ブログ  »  WebClip - ウェブ制作、UXD／IA、アクセシビリティ  »  Web2.0のアクセスアップ・SEO対策：「はてなブックマークに追加」ボタンを設置する

注目トピックス From ZDNet Japan

クローズアップ

[PR]

企画特集

CNET どっち？

HT-03A

iPhone 3GS

業界キーパーソンが最新トピックを斬る！
CNET Japan オンラインパネルディスカッション

ネットの選挙活動解禁の動きをどう見る？

回答
寺岡宏彰さん

モノを買うときに、ネットでよく調べてから買うように、選挙にあたって、候補...

新着企業動向

リリース

イベント

企業ブログ

製品

このブログについて

ブロガープロフィール

アーカイブ

«
2009年11月
日月火水木金土
1234567
891011121314
15161718192021
22232425262728
2930     

カテゴリ

アルファブログ

みんなのお題

みんなのお題では、ブロガー同士で質問を出し合いそれに対する回答や意見を集めています。今日はどんな話題が盛り上がっているでしょう？

新着コメント

ブログネットワークとは？

CNET Japan ブログネットワークは、元はCNET Japanの一読者であった読者ブロガーと、編集部の依頼により執筆されているアルファブロガーたちが、ブログを通じてオンタイムに批評や意見を発信する場である「オピニオンプレイス」、また、オピニオンを交換するブロガーたちが集うソサエティです。

広い視野と鋭い目を持ったブロガーたちが、今日のIT業界や製品に対するビジョンや見解について日々熱く語っています。

あなたもブログを書いてみませんか？

CNET Japanやその他サイトが提供するITニュースやコンテンツへの意見や分析、ビジネスやテクノロジーに対するビジョンや見解について語っていただける方を募集しています。ご応募はこちらから

ブログの投稿・管理

ブログの投稿はこちらから（※ブロガー専用）

αマークって？

これは、CNET Japan 編集部の依頼に基づいて執筆されているCNET Japan アルファブロガーであることを示す印です。

Good!って？

CNET Japan ブログネットワーク内で拍手の代わりに使用する機能です。ブログを読んで、感激した・役に立ったなど、うれしいと思ったときにクリックしてください。多くGood!を獲得した記事は、より多くの人に読まれるように表示されます。

CNET Japan ブログ

製品ランキング

薄型テレビ

データ協力 : Amazon.co.jp

ブロガーみんなで回答中

CNET_ID

メンバー限定サービスをご利用いただく場合、このページの上部からログイン、またはCNET_ID登録（無料）をしてください。

» CNET_IDパスワードの確認

話題のタグ：  iPod |  Twitter |  mixiアプリ |  買収 |  iPhone |  グーグル |  マイクロソフト |  アップル |  Windows 7 |  Google Voice |  PlayStation 3 | 

The Japanese edition of 'CNET' is published under license from CBS Interactive, Inc., San Francisco, CA, USA. Editorial items appearing in 'CNET Japan' that were originally published in the US Edition of 'CNET', 'ZDNet', 'TechRepublic', 'GameSpot' and 'CNET News.com' are the copyright properties of CBS Interactive, Inc. or its suppliers.
Copyright © 2000-2009 CBS Interactive, Inc. All Rights Reserved. 'CNET', 'ZDNet' 'GameSpot' and 'CNET News.com' are trademarks of CBS Interactive, Inc.

 | 個人情報保護方針  | 利用規約  | 訂正  | 広告について  | 朝日インタラクティブについて  | 

Copyright  © 2009 ASAHI INTERACTIVE, Inc. All rights reserved. No reproduction or republication without written permission.