ホーム >  HTML・CSS >  サイトにブックマークボタンを作る

投稿日:   |  最終更新日:

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

HTML・CSSJavaScript

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

完成イメージ

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

htmlcss0001

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

htmlcss0002

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

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

<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

最近の投稿
人気記事
カテゴリー
広告