以前紹介したWEBサイトにプッシュ通知が付けられるWEBサービス「bpush」に簡単設置のボタンカスタマイズが追加されました。

• 簡単設置のボタンをカスタマイズできるようになりました。

簡単設置でもサイトに合わせたボタンを設置できるように

これまでのbpushでは、簡単設置でボタンを表示させる時に決められたボタンしか表示できませんでしたが、 2015年12月28日からユーザーでカスタマイズすることが可能になりました。

WEBサイトにプッシュ通知が付けられるWEBサービス「bpush」を試してみる

2015.12.23

カスタマイズ前

カスタマイズ前は通知と書かれた小さなボタンのみだったので、サイトのデザインから浮いてしまうこともありました。

<div id="bpush_button" style="display: inline-block;"
     data-site="350" data-back="【ページURL】"
     data-height="20" data-width="60"></div>
<script>
(function(d,s,ns){
  var ns = d.createElement(s);
    ns.async=1;ns.src="//bpush.net/connect/button.js";
    var s0=d.getElementsByTagName(s)[0];
  s0.parentNode.insertBefore(ns, s0);
})(document,'script');
</script>

カスタマイズ例

カスタマイズ後では、画像のURLや幅・高さの指定、リンクの別窓などを独自のdata属性を使って変更できます。

<div id="bpush_button" style="display: inline-block;"
     data-site="350" data-back="https://creatorclip.info/"
     data-link_target="_blank"
     data-image_src="https://creatorclip.info/wp-content/themes/material/img/favicons/android-chrome-192x192.png"
     data-width="192" data-height="192"></div>
<script>
(function(d,s,ns){
  var ns = d.createElement(s);
    ns.async=1;ns.src="//bpush.net/connect/button.js";
    var s0=d.getElementsByTagName(s)[0];
  s0.parentNode.insertBefore(ns, s0);
})(document,'script');
</script>

設定可能な属性