忍者おまとめボタンで、PCとスマホで表示を変える方法

【SSL対応】ツイートボタン、いいねボタン、はてブ、LINEボタン簡単設置｜忍者おまとめボタン

当ブログは、ソーシャルボタンを「忍者おまとめボタン」で表示しています。で、スマホとPCで上記画像のように表示を変えてるのですが、その方法を書いておきます。

原理は簡単で、「忍者おまとめボタン」をPC用とスマホ用の２つ登録して、UA（端末情報）をみて切り替えてるだけです。

忍者おまとめボタンのコードについて

<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_839f6f2a76a8afd44312c09f86850cd4)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/839f6f2a76a8afd44312c09f86850cd4'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_839f6f2a76a8afd44312c09f86850cd4.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span>
</div>

忍者おまとめボタン（１つ分）のコードは上記のようになっていると思います。
２つ分をマージするのですが、(function(d){　から　})(document);の部分をマージします。

変更するところはJavascriptの部分です。

原理

var userAgent = window.navigator.userAgent.toLowerCase();

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Android') >0){
//スマホの場合

}else{
//pc & tabletの場合

}

上記のような感じで、UAをみて、IF文で処理を分けるわけです。

サンプル

<div class="ninja_onebutton">
<script type="text/javascript">
//<![CDATA[
(function(d){
var userAgent = window.navigator.userAgent.toLowerCase();

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0) || navigator.userAgent.indexOf('Android') >0){
//スマホの場合

if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_c6bb82680a14bee8b417137feee3616c)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/c6bb82680a14bee8b417137feee3616c'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_c6bb82680a14bee8b417137feee3616c.ONETAGButton_Load();}

}else{
//pc & tabletの場合

if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_839f6f2a76a8afd44312c09f86850cd4)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/839f6f2a76a8afd44312c09f86850cd4'><\/sc"+"ript>");
}else{
    window.NINJA_CO_JP_ONETAG_BUTTON_839f6f2a76a8afd44312c09f86850cd4.ONETAGButton_Load();}

}

})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span>
</div>

当サイトの場合だとこんな感じになります。
本当に、マージしただけですね。