投稿日: | 最終更新日:
サイトにブックマークボタンを作る
ボタンをクリックすることで、「お気に入り」に登録させる方法です。
完成イメージ
ブックマーク(お気に入り)ボタンをクリックします。
「お気に入りの追加」ダイアログを表示します。
お気に入り登録ボタン設置
下記のソースを記述し、ボタンを設置できます。
<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
プロフィール
最近の投稿
人気記事
カテゴリー
- Python 88
- 制作 56
- RaspberryPi 41
- WordPress 40
- Django 32
- Linux 24
- VPS 22
- PHP 20
- JavaScript 20
- HTML・CSS 18
- 仮想環境 15
- レスポンシブデザイン 13
- WEB全般 11
- AWS 10
- マイコン 9
- Webサービス 8
- 統合開発環境 8
- 起業・設立 7
- jQuery 7
- SEO 6
- C# 6
- 携帯サイト 5
- heroku 5
- デザイン 5
- PyCharm 5
- symfony 4
- node.js 4
- 機械学習 4
- illustrator 4
- Mac 4
- Visual Studio 4
- ツール 3
- データベース 3
- facebook 3
- Go言語 3
- PC 3
- Docker 3
- 作業効率化 3
- Webスクレイピング 3
- photoshop 3
- Cloud9 3
- インフラ 3
- Webサーバー 2
- movie 2
- ネットワーク 2
- Java 2
- ドローン 2
- コンテナ 2
- Kali Linux 2
- コマンド 2
- XSERVER 2
- MariaDB 2
- 動画製作 2
- DaVinci Resolve 2
- 知識 1
- アフィリエイトノウハウ 1
- スマートフォン 1
- アクセス解析 1
- windows 1
- 役立つ本・書籍 1
- git 1
- アニメ 1
- Rhino 1
- D3.js 1
- アニメーション 1
- TypeScript 1
- データサイエンス 1
- Nginx 1
- ownCloud 1
- ESP32 1
- API 1
- ネットワーク 1
- pydata 1
- ムームードメイン 1
- S3 1
- JSON 1
- Bootstrap 1
- SSL 1
- 音楽 1
- PCDJ 1
- バージョン管理システム 1
- 数学 1
広告