全てのブラウザ向けにJavaScriptでブックマークリンクを設定する方法

JavaScriptでブックマークリンクを設定するには、各ブラウザごとの指定が必要になります。

Internet ExplorerではJavaScriptで

window.external.AddFavorite(【URL】,【タイトル】);

Firefox(Mozilla系)のサイドバーではJavaScriptで

window.sidebar.addPanel(【タイトル】,【URL】,"");

Operaではリンクタグで

<a href="【URL】" rel="sidebar" title="【タイトル】">お気に入りに登録</a>

Google Chrome/SafariではCtrlキーとDキーを同時に押す。

となります。

これをブラウザ判定、リンク出しわけを含めると次のようなコードになります。
このコードではHTMLページのタイトルをそのままブックマークのタイトルに、URLも自動でアクセスしているページのURLになります。

Internet Explorer、Firefox(Mozilla系)、Operaではブックマーク追加ウインドウが出ます。
Google Chrome、Safariではブックマークの仕方が表示されます。
JavaScriptでリンクタグを出力しているので、JavaScriptに対応していない・無効にしている場合にはリンクは出ません。 リンクタグが出ないとレイアウトが崩れてしまう場合には、JavaScript非対応のときに表示されるよう<noscript>で表示させます。 (このコードには<noscript>の記述はありません。)

設置のサンプル

<script type='text/javascript'>
<!--//
var bookmarkurl=window.location.href;
var bookmarktitle=document.title;

function setBookMark() {
  if (document.all)  {
    window.external.AddFavorite(bookmarkurl,bookmarktitle);
  }else if (window.sidebar&&window.sidebar.addPanel) {
    window.sidebar.addPanel(bookmarktitle,bookmarkurl,"");
  }else{
    alert("このブラウザへのお気に入り追加ボタンは、Google Chrome/Safari等には対応しておりません。\nGoogle Chrome/Safariの場合、CtrlキーとDキーを同時に押してください。\nその他の場合はご自身のブラウザからお気に入りへ追加下さい。");
  }
}


function viewBookMarkLink() {
  if ( window.opera) {
    document.write('<a href="'+bookmarkurl+'" rel="sidebar" title="'+bookmarktitle+'">お気に入りに登録</a>');
  }else{
    document.write('<a href="#" onclick="setBookMark();return false;">お気に入りに登録</a>');
  }
}

viewBookMarkLink();
//-->
</script>

関連記事

スポンサーリンク

font-familyを指定した要素で文字化けする

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る