お気に入り(ブックマーク)登録ボタンを作る方法はあるが

IEでは昔からJavaScriptでお気に入り登録画面を出せた

IEでは昔からJavaScriptでお気に入り登録画面を出せた

JavaScriptを使えば、ボタンやリンクをクリックするだけで閲覧中のページや指定したURLをInternet Explorerのお気に入り(ブックマーク)に登録させることができます。

ユーザがブラウザの機能を使えば簡単に登録できるのですから、ウェブページ側にわざわざ「お気に入り登録機能」を用意する必要はありません。しかし、登録の機会を増やしておけば、それだけ登録してくれる人の数も増えるかも知れません。また、初心者には役に立つ可能性もあるでしょう。

そのような理由から、本記事(初版は2002年公開)ではIEのお気に入りに登録する機能の作り方をご紹介していました。IEでのアクセス者にしか意味のない機能ですが、当時はIEのシェアが圧倒的に高かった上に、特に初心者の多くはIEユーザだったので役に立ちました。

IE11では動くがEdgeでは動かない
IE11までは使えるが

IE11までは使えるが

Windows10ではIEの後継としてEdgeが標準ブラウザになりました。お気に入りに登録するためのスクリプトは、Windows10でもIE11では動きますがEdgeでは動きません。

したがって、使えるブラウザが限られているという点で、もはやお気に入り登録ボタンをウェブページ上に用意しておく意味はなさそうです。まだIEユーザも残っていますから全く役に立たないとまでは言いませんが、今さら新しくその機能を用意する必要性は高くはないでしょう。

以前はFirefoxやOperaでブックマークに登録させる方法もあったが
ブラウザごとに分岐させてブックマーク登録画面を出すスクリプトもあったが

ブラウザごとに分岐させてブックマーク登録画面を出すスクリプトもあったが

以前はFirefoxやOperaでブックマーク登録ダイアログを表示する方法があったので、「ChromeやSafari以外でなら動作するブックマーク登録スクリプト」を書くこともできました(※)。
※参考:How do I add an "Add to Favorites" button or link on my website?

しかし、現在ではブラウザの仕様が変わっており、FirefoxやOperaでも使えません(※)。そもそも現在で最もシェアの高いブラウザであるChromeには、JavaScriptでブックマーク登録画面を出す方法は元々ありません。

※Firefoxには、副次的な情報としてサイドバーに表示する用途でブックマークさせられる機能はあります。参考までにこのページの末尾でご紹介しています。

ブラウザのブックマークよりも、ネット上のブックマーク
ネット上のブックマークサービスに登録するためのボタン

ネット上のブックマークサービスに登録するためのボタン

そこで本記事では、ブラウザのお気に入り登録ボタンを作る方法に加えて、ソーシャルブックマークサービスへのブックマーク登録ボタンを作る方法も併せてご紹介いたします。

ブラウザのメニューやツールバーを使えば、ブラウザのブックマークに登録するのは簡単です。それよりは、ソーシャルブックマークサービスに登録できるボタンを用意する方が役に立つでしょう。

【目次】


 

IEのお気に入りに登録する機能を作るJavaScriptソース

JavaScript部分だけを先に解説しておきます。JavaScriptでIEのお気に入り登録画面を出す方法は簡単で、次の1行を実行するだけです。
window.external.AddFavorite('URL','名称');

記述例1:
例えば、All Aboutホームページ作成のトップページをお気に入りに登録させたい場合は、以下のように記述します。見やすくするために3行に分割していますが、実際には1行にまとめて書いても問題ありません。
window.external.AddFavorite(
   'https://allabout.co.jp/gm/gt/1053/' ,
   'All Aboutホームページ作成');
AddFavoriteメソッドの引数に「登録するURL」と「お気に入りの名称」の2項目をカンマで区切って指定するだけです。値は引用符で囲みます。

記述例2:
もし、今閲覧中のページを登録させたいなら、以下のように記述できます。
window.external.AddFavorite(
   location.href,
   document.title);
location.hrefは現在閲覧しているURLを表し、document.titleは現在閲覧しているページのタイトルを表しています。

問答無用で登録されてしまうわけではない
このスクリプトが実行されても、いきなりお気に入りに登録されるわけではありません。下図のようなダイアログが表示されて、ユーザに登録が促されるだけです。

IE11のお気に入り登録ダイアログ

IE11のお気に入り登録ダイアログ(Windows10版での表示例)


ユーザはここで登録先の階層を選択したり、必要に応じて名称を変更したりできます。また、キャンセルボタンをクリックして登録を取りやめることもできます。

IE用のお気に入り登録ボタンを作るHTML+JavaScriptソース

それでは、実際にウェブページ上にコピーして使える具体的な「お気に入り登録ボタン」の作り方をご紹介いたします。

ボタンの形で表示する場合
例えば、現在閲覧しているページをお気に入りに登録する機能をボタンの形で用意するなら、以下のように記述します。
<input type="button"
   value="このページをお気に入りに登録する"
   onclick="window.external.AddFavorite(location.href,document.title);">
input要素のtype属性値に値「button」を指定することでボタンを作り、value属性値にボタンの名称を書き、onclick属性値に先程のJavaScriptを記述します。このソースを実際に表示すると、以下のように見えます。
ボタンを押すと、IE4~IE11のみで、お気に入り登録画面が表示されます。

リンクの形で表示する場合
クリックされたときにスクリプトを実行すれば良いだけですから、ボタンではなくリンクの形で表示することも簡単です。例えば、All Aboutホームページ作成のTOPページをリンクの形で登録できるようにしたいなら以下のように記述します。
<a href=""
   onclick="window.external.AddFavorite(
      'https://allabout.co.jp/gm/gt/1053/' ,
      'All Aboutホームページ作成'); return false;">
   TOPページをお気に入りに登録する
</a>
リンクを作るa要素にonclick属性を付加して、そこに先程のJavaScriptを記述します。ただし、先程のボタンの例とは異なり、JavaScriptの最後に「return false;」と追記しておく必要があります。これは、リンクの機能であるページ移動が実行されないようにするために必要です。

実際に表示すると、以下のように見えます。
リンクをクリックすると、IE4~IE11のみで、お気に入り登録画面が表示されます。

補足:Firefoxでもブックマーク登録ダイアログを出したい場合

Firefoxでは、リンクを作るa要素に「rel="sidebar"」を付けると、ブックマーク登録ダイアログが表示されます。その際、ブックマークの名称はtitle属性値が使われます。例えば、以下のように記述します。
<a href="https://allabout.co.jp/gm/gt/1053/"
   rel="sidebar"
   title="All Aboutホームページ作成">
TOPページをお気に入りに登録する</a>
ただし、この方法で表示されるダイアログは下図のようになっており、「このブックマークはサイドバーに読み込む」というチェックが最初から入っています。ユーザがこのチェックを外さない限り、このブックマークからアクセスしたページはサイドバーに表示されてしまいます。

Firefoxでもブックマーク登録ダイアログは出るが

Firefoxでもブックマーク登録ダイアログは出るが


ここで使った「rel="sidebar"」は、リンク先のコンテンツが副次的な情報であることを示す属性値なので、Firefoxではこのような動作になっています。したがって、たしかにブックマーク登録画面は出せますが、普通のブックマークを促す用途には使えないでしょう。

ブラウザのブックマークよりも、ネット上のブックマーク

というわけで、ブラウザのお気に入り(ブックマーク)に登録するためのボタンを設置するよりは、ソーシャルブックマークに登録するボタンを設置しておく方がブラウザに関係なく使えて便利です。

それでは次のページで、ソーシャルブックマークサービスにブックマークするボタンの表示方法をご紹介いたします。