【Web制作】お気に入り登録・ブックマークボタンの設置方法

ブログのアクセスアップには前回設置のソーシャルボタンも有効です。今回はブラウザの「お気に入り」や「ブックマーク」への登録ボタンの設置方法についてです。アクセスアップというかリピーター促進策の1つですね。

ゆめぴょんです。こんちはっ(^^)/

私も個人的には「お気に入り」や「ブックマーク」などは昔に比べると今はあまり利用しません。でもネット利用率がそれほど高くない一般人や年配者などが利用する様子はよく見かけます。

特に時々チェックしたいブログやサイトなどを登録すると便利だと思います。常にチェックしたいならSNS（ソーシャルネットワーク）やRSSリーダーへの登録をおすすめします。もしよければこのブログもお願いします(^^)

お気に入り・ブックマーク登録ボタンの設置方法
1. JavaScriptコードの設置
2. ボタンを設置するコード

お気に入り・ブックマーク登録ボタンの設置方法

JavaScriptコードの設置

まず<head>……</head>の間の一番下あたりに次のjavascriptコードを貼り付けて下さい。本当はfooterの</body>の直前に設置すると読み込み時間を短縮できるのですが、今回は動作確認してないので興味ある人は試してみて下さい。

<script type="text/javascript">
function toFavorite(toURL,toStr){
        if(navigator.userAgent.indexOf("MSIE") > -1){
        //Internet Explorer
                window.external.AddFavorite(toURL,toStr);
        }else if(navigator.userAgent.indexOf("Lunascape") > -1){
        //Lunascape
                alert("[Ctrl] か [Command]と[G}ボタンを同時に押してください。");
        }else if(navigator.userAgent.indexOf("Flock") > -1){
        //Flock
                window.sidebar.addPanel(toStr,toURL,'');
        }else if(navigator.userAgent.indexOf("Firefox") > -1){
        //Firefox
                window.sidebar.addPanel(toStr,toURL,'');
        }else if(navigator.userAgent.indexOf("Opera") > -1){
        //Opera
                window.open(toURL,'sidebar','title='+toStr);
        }else if(navigator.userAgent.indexOf("Chrome") > -1){
        //Chrome,Safari
                alert("ブックマーク機能をご利用ください。又は[Ctrl] か [Command]と[D]ボタンを同時に押すとブックマークできます");
        }else{
        //その他
                alert("ブラウザ付属のブックマーク機能をご利用ください。");
        }
}
</script>

function toFavorite(toURL,toStr){

if(navigator.userAgent.indexOf("MSIE") > -1){

//Internet Explorer

window.external.AddFavorite(toURL,toStr);

}else if(navigator.userAgent.indexOf("Lunascape") > -1){

//Lunascape

alert("[Ctrl] か [Command]と[G}ボタンを同時に押してください。");

}else if(navigator.userAgent.indexOf("Flock") > -1){

//Flock

window.sidebar.addPanel(toStr,toURL,'');

}else if(navigator.userAgent.indexOf("Firefox") > -1){

//Firefox

window.sidebar.addPanel(toStr,toURL,'');

}else if(navigator.userAgent.indexOf("Opera") > -1){

//Opera

window.open(toURL,'sidebar','title='+toStr);

}else if(navigator.userAgent.indexOf("Chrome") > -1){

//Chrome,Safari

alert("ブックマーク機能をご利用ください。又は[Ctrl] か [Command]と[D]ボタンを同時に押すとブックマークできます");

}else{

//その他

alert("ブラウザ付属のブックマーク機能をご利用ください。");

}

</script>

ちなみにjavascriptは別ファイルで管理した方が良いとされます。別ファイルへコピーする場合は、<script type="text/javascript">と</script>は不要になります。

ボタンを設置するコード

次に設置したい場所に次のhtmlコードを貼り付けてください。私はサイドバーと個別記事の下に設置しました。

<input type="button" rel='sidebar' value="お気に入りに登録" onClick="toFavorite(location.href,document.title);">

1	<input type="button" rel='sidebar' value="お気に入りに登録" onClick="toFavorite(location.href,document.title);">

WordPressのウィジェットに貼り付けることも可能です。管理画面の左メニューの「外観」「ウィジェット」を選び、「テキスト」に上の2つのコードを続けて貼り付けても動作しました。

お気に入り登録ボタンを複数設置する場合でも、JavaScriptコードは1度だけしか貼り付けないでください。HTMLコードは設置する場所の数だけ貼り付ける必要があります。

参考：ブログアクセスアップに効果的！でも意外と忘れられている方法 – お気に入り登録ボタン

ゆめぴょんでした。ちゃおっ！