【ホームページ作成】「お気に入り」登録ボタンを作る方法

それでは、記述方法とサンプルを順にご紹介致しましょう。

お気に入り登録ボタンを作る

ボタンをクリックすることで「お気に入り」に登録させる方法です。

<input type="button" value="お気に入りに登録" onclick="window.external.AddFavorite('http://allabout.co.jp/gm/gt/1053/','オールアバウト ホームページ作成');">

上記のソースでは、
・「お気に入りに登録」がボタン表面に表示される文字列、
・「http://allabout.co.jp/gm/gt/1053/」が登録されるURL、
・「オールアバウト ホームページ作成」が登録される名称
になります。

実際に表示させると、以下のように見えます。
※クリックすると機能します。（IEのみ）

お気に入り登録ボタン（アイコン付き）を作る

アイコンを付けたボタンを作る方法です。

<button style="height:30px;" onclick="window.external.AddFavorite('http://allabout.co.jp/gm/gt/1053/','オールアバウト ホームページ作成');"><img src="favoriteicon.gif" style="vertical-align:middle;"> お気に入りに登録</button>

ここでは、ボタンをHTMLのinput要素ではなくbutton要素で作っています。この方法なら、ボタンの表面に任意の画像を掲載できます。（画像はimg要素を使って指定できます。）

• 「height:30px;」はボタンの高さです。スタイルシートで指定しています。画像の高さよりも少し高めにした方が見栄えがよいでしょう。
• <button>～</button>の間に、ボタンの表面に表示される内容（画像と文字）を記述します。文字を表示したい場合はそのまま文字を書き、画像を表示したい場合はimg要素を使って書きます。
• 画像にはスタイルシートで「vertical-align:middle;」と指定し、縦方向の中央に配置されるようにしています。

先ほどと同様に、「http://allabout.co.jp/gm/gt/1053/」が登録されるURLで、「オールアバウト ホームページ作成」が登録される名称です。

実際に表示させると、以下のような感じに見えます。

All About側のCSSの影響で、記事中ではサンプルを表示できないため、上記は画像で掲載しています。IEではだいたい上記のような感じで表示されます。

お気に入り登録リンクを作る

通常のリンクとして表示したい場合の方法です。

<a href="#" onclick="window.external.AddFavorite('http://allabout.co.jp/gm/gt/1053/','オールアバウト ホームページ作成'); return false;">お気に入りに登録</a>

リンク先のページは存在しないので、href属性の値にはダミーとして「 # 」を入れています。 また、スクリプト部分の末尾に「return false;」を入れておくことで、お気に入り登録ダイアログを閉じた後に、ページ先頭へ移動してしまうのを防いでいます。

先ほどと同様に、「http://allabout.co.jp/gm/gt/1053/」が登録されるURLで、「オールアバウト ホームページ作成」が登録される名称です。

実際に表示させると、以下のように見えます。
※クリックすると機能します。（IEのみ）

お気に入りに登録

おわりに

「現在表示しているURL」と「現在のページのタイトル」を指定したい場合は、次のように記述することもできます。
※つまり、ユーザが「お気に入り」→「お気に入りに追加」をクリックした場合と全く同様の状態でダイアログを表示させたい場合。

～.AddFavorite(location.href,document.title);

「location.href」は、現在表示しているページのURLを示していて、 「document.title」は、現在表示しているページのタイトルを示しています。
※この場合、「location.href」などをクオーテーションで囲む必要がない点に注意して下さい。

表示例：

今回は、Internet Explorer で「お気に入り」に登録できるボタン（やリンク）の作成方法をご紹介致しました。 いろいろ活用してみて下さい。