Blogger:[忍者おまとめボタン]「お気に入りに登録」ボタンの表示を対応ブラウザのみに限定する

前の関連記事：Blogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？

忍者おまとめボタンに「お気に入りに登録」ボタンがありますが動作しないブラウザがあるので動作するブラウザにだけ表示するようにします。

カウンタ付ボタンの設置はやめました

これまでカウンタ付ボタンを設置してきましたが、これがとても読み込み速度が遅いのです。

とくにSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法でページを描画後にSyntaxHighlighterのtableの高さをjQueryで設定してからスクロールバーをfleXcrollで置き換えるようにしたので、描画が遅い部分があるとスクロールバーの置き換えが終わるまで非常に時間がかかってしまいます。

またBlogger:[忍者おまとめボタン]アクセス解析のシェア数が一致しない？でみたようにカウンタ付ボタンを設置しても一向にカウンタが増えませんでした。

ということでカウンタ付ボタンの設定はやめてカウンタなしのボタンのみにしました。

これで読み込み時間が非常に改善されました。
これを機会に「お気に入りに登録」ボタンを設置することにしました。

動かなくてもボタンをクリックすればアクセス解析のカウントは増える

ボタンをクリックしてみた動作を確認してみました。

iOS Safari　　　何も起こらず。

Chrome、Sleipnir4　「ブックマークするにはCTRL+Dを押してください」と言われます。

IE8、IE10、FireFox　ブックマーク登録ダイアログがでてきます。

ちなみに何も起こらないiOS Safariであっても、ボタンをクリックされれば忍者おまとめボタンのアクセス解析は、クリックした回数だけカウントが増えます。

こういう理由でカウンタ付ボタンのカウントとアクセス解析のカウントの違いがでてくるのですね。

ということでブックマークに登録できないブラウザではこのボタンは表示させないようにします。

動かないブラウザでは「お気に入りに登録」ボタンは表示させないようにする

<div class="favorite_button_l" data-url="投稿のURL" data-title="投稿タイトル" data-onetagbutton="true">
 <a href="Javascript:void(0);"><img src="http://omt.shinobi.jp/images/favorite_button_l.png" title="ブラウザのブックマークに保存します" alt="favorite" style="border:none;"></a>
</div>

「お気に入りに登録」ボタンを対応ブラウザだけで表示させる方法まとめ

BloggerのテンプレートのHTMLでninja_onebuttonクラスのdivをdisplay:noneをつけて非表示にしておく。

<div class='ninja_onebutton' style='width:340px;margin:0 auto;display:none'>

以下もどこかに記載。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/><!--jQueryのロード。既に済んでいるなら不要。-->
<script type="text/javascript">
  $(window).load(function () {//ページが完全に読み込まれたら実行
  if(!(document.all||(window.sidebar&&window.sidebar.addPanel)||window.opera)){//IEでもなくFireFoxでもなくOperaでもないなら
    $("div.favorite_button_l").css("display", "none");//favorite_button_lクラスのdivを非表示にする
  }
  $("div.ninja_onebutton").css("display", "");//非表示にしていた「忍者おまとめボタン」を表示させる
 });
</script>

レイアウトでHTML/JavaScriptガジェットに入れてもよいですし、テンプレートに直接いれてもよいです。

テンプレートのHTMLに直接書き込む場合はHTML EnCoder | Widget GeneratorsなどでHTMLエンコードしてから書き込まないととエラーがでて保存ができません。

私はSyntaxHighlighterにfleXcroll(3)デフォルトテンプレートからの導入方法で導入したSyntaxHighlighterのtableの高さを設定するjQueryの後に入れました。

参考にしたサイト

jQuery：jQueryを使用して<div>要素の表示・非表示 | raining
最近なにかとjQuery頼りになっています。

display－スタイルシートリファレンス
要素の表示を制御するdisplayプロパティ。

全てのブラウザ向けにJavaScriptでブックマークリンクを設定する方法 - [JavaScript + JavaScript] ぺんたん info
ブラウザ判定方法について参考にさせていただきました。

HTML EnCoder | Widget Generators
BloggerのテンプレートにJavaScriptを直接書き込むときはこのエンコーダが便利です。