投稿日：2015年9月30日｜最終更新日: 2015年9月29日

サイトにブックマークボタンを作る

HTML・CSS JavaScript

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

完成イメージ

ブックマーク（お気に入り）ボタンをクリックします。

「お気に入りの追加」ダイアログを表示します。

お気に入り登録ボタン設置
問題点
非対応ブラウザ向けコード
スマホでは設置しない

お気に入り登録ボタン設置

下記のソースを記述し、ボタンを設置できます。

<input type="button" value="お気に入りに登録" onclick="window.external.AddFavorite('https://hombre-nuevo.com/','ホーネット');">

「お気に入りに登録」がボタン表面に表示。
登録されるurlは「http://hombre-nuevo.com/」。
「ホーネット」が登録される名称。

問題点

各ブラウザの挙動が違います。「input」の方法は、IEのみ可能です。safariとchoromeはブックマークをさせることができません。
ですので、jsを使ってアラートで
「ブラウザ付属のブックマーク機能をご利用ください。【 Command 】 + 【 D 】ボタンを押すとブックマークできます。」
と表示させます。

非対応ブラウザ向けコード

IEのときはブックマークダイアログを表示します。それ以外は、メッセージを表示させます。

index.html

<head>内か、</body>の直前に以下のコードを記述します。

<script>
$(function() {
    $('#bookmarkme,#bookmarkme2').click(function() {
        if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
            window.sidebar.addPanel(document.title,window.location.href,'');
        } else if(window.external && ('AddFavorite' in window.external)) { // IE Favorite
            window.external.AddFavorite(location.href,document.title); 
        } else if(window.opera && window.print) { // Opera Hotlist
            this.title=document.title;
            return true;
        } else { // webkit - safari/chrome
            alert('ブラウザ付属のブックマーク機能をご利用ください。' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? '【 Command 】' : '【 Ctrl 】') + ' + 【 D 】ボタンを押すとブックマークできます。');
        }
    });
});
</script>

以下はボタンのコードです。設置した居場所に記述します。

<li><a id="bookmarkme" href="" rel="sidebar" title="bookmark this page">ブックマーク</a></li>

スマホでは設置しない

スマホではsafariとchromeが大半です。そのため、ブックマークボタンを付けないほうがよいです。

※PCの場合でもブラウザの挙動が異なります。ブックマークボタンの採用はあまりお勧めできません。

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20